首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

学做Bootstrap的第一个页面

Posted in HTML / CSS onMay 15, 2016

本文实例分享了第一个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">
      w3schools.com 是最受欢迎的前端技术教程网站，但是国内用户一直不能访问，并且国内的中文翻译版本十分陈旧。因此做了个镜像，希望英文好的同学直接去看原版教程吧！
     </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>

以上就是本文的全部内容，希望对大家的学习有所帮助。

学做Bootstrap的第一个页面

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
使用CSS3代码绘制可爱的Hello Kitty猫
Aug 03 HTML / CSS
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
使用css3实现的tab选项卡代码分享
Dec 09 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
May 10 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子（一个旋转的太极图效果）
Apr 10 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 HTML / CSS
canvas画图被放大且模糊的解决方法
Aug 11 HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
Feb 06 HTML / CSS
css3实现背景模糊的三种方式
HTML5如何适配 iPhone IOS 底部黑条
CSS3画一个阴阳八卦图
CSS中一些@规则的用法小结
Mar 09 #HTML / CSS
a标签的css样式四个状态
Mar 09 #HTML / CSS
详解CSS样式中的 !important * _ 符号
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
缓存(3) PV(1) 内存(1) ipv6(1) 事务(5) 线程(1) 访问日志(2) 策略(1) 连接数(1) 弱口令(1)
You might like
星际实力自我测试
2020/03/04 星际争霸
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
php 数据结构之链表队列
2017/10/17 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
Python图片转换成矩阵,矩阵数据转换成图片的实例
2018/07/02 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
tensorflow之并行读入数据详解
2020/02/05 Python
在python中logger setlevel没有生效的解决
2020/02/21 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
动物科学专业毕业生的自我评价
2013/11/29 职场文书
报告会主持词
2014/04/02 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
建设投标担保书
2014/05/13 职场文书
北京奥运会口号
2014/06/21 职场文书
毕业生银行实习自我鉴定
2014/10/14 职场文书
先进集体申报材料
2014/12/25 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
高中生军训感言
2015/08/01 职场文书
「偶像大师 MILLION LIVE！」七尾百合子手办开订
2022/03/21 日漫
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers