学做Bootstrap的第一个页面.doc
学做Bootstrap的第一个页面.doc
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- Bootstrap 第一 页面
- 资源描述：
-
这篇文章主要为大家介绍了学做Bootstrap的第一个页面，这是学bootstrap的第一个页面，还有许多需要改进的地方，希望大家批评指正 本文实例分享了第一个Bootstrap页面的实现代码，供大家参考，具体内容如下 效果图： 实现代码： 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /><!--为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。--> <title></title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script> <script src="js/bootstrap.min.js"></script> <style> .masthead{ padding: 110px 0px 110px; margin-bottom: 0px; } .masthead:after{ content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(img/bg1.png) repeat center center; opacity: 0.4; } .masthead h1{ font-weight: 700; font-size: 700%; } .active{font-size: 120%;font-weight: bold;} .masthead-a{ opacity: 0.5; color: white; font-size: medium; } .masthead-a:hover{ color: white; opacity: 1; } .modal-header li i{opacity: 0.5;} .text-align{ display: inline; } .img-ls{ width: 23%; border: 1px solid hsl(0, 0%, 87%); margin-right: 2%; padding: 4px 0px; margin-bottom: 6%; min-height: 350px; max-height: 600px; float: left; } .img-ls img{ width: 97%; height: auto; } .img-ls img:hover{ cursor: pointer; } .footer{ padding: 50px 50px; } .navbar-nav li{display: inline;} </style> </head> <body> <div class="navbar-inverse navbar-fixed-top"> <!-- 定义个内部框架表现的基调,位置大小背景等 --> <div class="container"> <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <ul class="nav navbar-nav"><li><a href="#" class="active">Bootstrap中文网</a></li></ul> <div class="navbar-collapse collapse" role="navigation"> <ul class="nav navbar-nav"> <li><a href="#">Bootstrap2中文文档</a></li> <li><a href="#">Bootstrap3中文文档</a></li> <li><a href="#">Bootstrap 4.0 预览</a></li> <li><a href="#">Less 教程</a></li> <li><a href="#">jQuery API</a></li> <li><a href="#">网站实例</a></li> <li><a href="#">前端高薪职位</a></li> <li><a href="#">关于</a></li> </ul> </div> </div> </div> <div class="jumbotron masthead"> <div class="container"> <h1>Bootstrap</h1> <h2>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</h2> <p><a class="btn btn-lg btn-primary" href="#">Bootstrap3中文文档(v3.3.5)</a></p> <p><a href="#" class="masthead-a">Bootstrap2中文文档(v2.3.2)</a></p> </div> </div> <div class="modal-header text-center"> <div class="container"> <ul> <li class="text-align">Bootstrap技术交流群：318630708 <i>|</i> </li> <li class="text-align">Bootstrap问答社区 <i>|</i> </li> <li class="text-align">新浪微博：@Bootstrap中文网</li> </ul> </div> </div> <div class="modal-header"> <div class="container"> <div class="page-header text-center"> <h2>Bootstrap相关优质项目推荐</h2> <p>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</p> </div> <div class="img-ls col-lg-3 text-center"> <img src="img/codeguide.png" /> <h3> <a href="javascript:void(0)" class="btn btn-lg">Bootstrap 编码规范<br/><small>by @mdo</small></a> </h3> <p class="modal-body"> Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。 </p> </div> <div class="img-ls col-lg-3 text-center"> <img src="img/jqueryapi.png" /> <h3> <a href="javascript:void(0)" class="btn btn-lg">jQuery API <br/><small>中文手册</small></a> </h3> <p class="modal-body"> 根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。 </p> </div> <div class="img-ls col-lg-3 text-center"> <img src="img/w3schools.png" /> <h3> <a href="javascript:void(0)" class="btn btn-lg">w3schools<br/><small>原版国内镜像</small></a> </h3> <p class="modal-body"> 是最受欢迎的前端技术教程网站，但是国内用户一直不能访问，并且国内的中文翻译版本十分陈旧。因此做了个镜像，希望英文好的同学直接去看原版教程吧！ </p> </div> <div class="img-ls col-lg-3 text-center"> <img src="img/expo.png"/> <h3> <a href="javascript:void(0)" class="btn btn-lg">优站精选<br/><small>Bootstrap网站实例</small></a> </h3> <p class="modal-body"> Bootstrap优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。 </p> </div> </div> </div> <footer class="footer"> <div class="container modal-header"> <div class="col-lg-6"> <img src="img/logo.png" /> <h5> <p>本网站所列开源项目的中文版文档全部由<a href="javascript:void(0)"><small>Bootstrap中文网</small></a>成员翻译整理，并全部遵循 <a href="javascript:void(0)"><small>CC BY 3.0</small></a>协议发布。</p> </h5> </div> <div class="col-lg-6"> <div class="col-xs-3"> <h4>关于</h4> <h4> <ul class="list-unstyled"> <li><a href="javascript:void(0)"><small>关于我们</small></a></li> <li><a href="javascript:void(0)"><small>广告合作</small></a></li> <li><a href="javascript:void(0)"><small>友情链接</small></a></li> <li><a href="javascript:void(0)"><small>招聘</small></a></li> </ul> </h4> </div> <div class="col-xs-3"> <h4>联系方式</h4> <h4> <ul class="list-unstyled"> <li><a href="javascript:void(0)"><small>新浪微博</small></a></li> <li><a href="javascript:void(0)"><small>电子邮件</small></a></li> </ul> </h4> </div> <div class="col-xs-3"> <h4>旗下网站</h4> <h4> <ul class="list-unstyled"> <li><a href="javascript:void(0)"><small>Laravel中文网</small></a></li> <li><a href="javascript:void(0)"><small>Ghost中国</small></a></li> </ul> </h4> </div> <div class="col-xs-3"> <h4>赞助商</h4> <h4> <ul class="list-unstyled"> <li><a href="javascript:void(0)"><small>UCloud</small></a></li> <li><a href="javascript:void(0)"><small>又拍云</small></a></li> </ul> </h4> </div> </div> </div> <h4 class="text-center "><a href="javascript:void(0)"><small>京ICP备11008151号</small></a><small> | 京公网安备11010802014853</small></h4> </footer> </body> </html> 以上就是本文的全部内容，希望对大家的学习有所帮助。展开阅读全文
咨信网温馨提示：1、咨信平台为文档C2C交易模式，即用户上传的文档直接被用户下载，收益归上传人（含作者）所有；本站仅是提供信息存储空间和展示预览，仅对用户上传内容的表现方式做保护处理，对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿，我们不确定上传用户享有完全著作权，根据《信息网络传播权保护条例》，如果侵犯了您的版权、权益或隐私，请联系我们，核实后会尽快下架及时删除，并可随时和客服了解处理情况，尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确)，网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据，个别因单元格分列造成显示页码不一将协商解决，平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺，下载前须认真查看，确认无误后再购买，务必慎重购买；若有违法违纪将进行移交司法处理，若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传，付费前请自行鉴别，如您付费，意味着您已接受本站规则且自行承担风险，本站不进行额外附加服务，虚拟产品一经售出概不退款（未进行购买下载可退充值款），文档一经付费（服务费）、不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印，是因预览和防盗链等技术需要对页面进行转换压缩成图而已，我们并不对上传的文档进行任何编辑或修改，文档下载后都不会有水印标识（原文档上传前个别存留的除外），下载后原文更清晰；试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓；PPT和DOC文档可被视为“模板”，允许上传人保留章节、目录结构的情况下删减部份的内容；PDF文档不管是原文档转换或图片扫描而得，本站不作要求视为允许，下载前可先查看【教您几个在下载文档中可以更好的避免被坑】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用；网站提供的党政主题相关内容(国旗、国徽、党徽－－等)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
6、文档遇到问题，请及时联系平台进行协调解决，联系【微信客服】、【QQ客服】，若有其他问题请点击或扫码反馈【服务填表】；文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“【版权申诉】”，意见反馈和侵权处理邮箱：1219186828@qq.com；也可以拔打客服电话：0574-28810668；投诉电话：18658249818。
实名认证
平台协调中心【客服】
自信AI助手
微信客服
客服QQ
发送邮件
意见反馈
链接地址：https://www.zixin.com.cn/doc/9780896.html