1.BootStrap概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。
好处：
　　1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
　　2. 响应式布局。
　　　　同一套页面可以兼容不同分辨率的设备。

2. 快速入门
(1)下载Bootstrap
(2)在项目中将这三个文件夹复制
(3)创建html页面，引入必要的资源文件到当前的工程目录

Bootstrap使用模板：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  8.     <title>Bootstrap hello world</title>
  9.  
  10.     <!-- Bootstrap -->
  11.     <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
  12.  
  13.     <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
  14.     <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
  15.     <!--[if lt IE 9]>
  16.     <![endif]-->
  17. </head>
  18. <body>
  19. <h1>你好，世界！</h1>
  20.  
  21. <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  22. <script src="bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
  23. <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  24. <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  25. </body>
  26. </html>

3.响应式布局
同一套页面可以兼容不同分辨率的设备。
实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子
步骤：
　　(1) 定义容器。相当于之前的table、
　　* 容器分类：
　　　　1. container：两边留白
　　　　2. container-fluid：每一种设备都是100%宽度
　　(2)定义行。相当于之前的tr 样式：row
　　(3)定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
　　　　* 设备代号：
　　　　　　1. xs：超小屏幕 手机 (<768px)：col-xs-12
　　　　　　2. sm：小屏幕 平板 (≥768px)
　　　　　　3. md：中等屏幕 桌面显示器 (≥992px)
　　　　　　4. lg：大屏幕 大桌面显示器 (≥1200px)

* 注意：
　　(1)一行中如果格子数目超过12，则超出部分自动换行。
　　(2) 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
　　(3) 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。

4.CSS样式和JS插件
(1)全局CSS样式：
　　<1>按钮：class="btn btn-default"
　　<2>图片：
　　　　 class="img-responsive"：图片在任意尺寸都占100%
　　　　图片形状
　　　　<img src="..." alt="..." class="img-rounded">：方形
　　　　<img src="..." alt="..." class="img-circle"> ： 圆形
　　　　<img src="..." alt="..." class="img-thumbnail"> ：相框
　　<3>表格
　　　　* table
　　　　* table-bordered
　　　　* table-hover
　　<4>表单
　　　　* 给表单项添加：class="form-control"

案例：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  8.     <title>Bootstrap hello world</title>
  9.  
  10.     <!-- Bootstrap -->
  11.     <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
  12.  
  13.     <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
  14.     <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
  15.     <!--[if lt IE 9]>
  16.     <![endif]-->
  17. </head>
  18. <body>
  19. <a class="btn btn-default" href="#" role="button">Link</a>
  20. <button class="btn btn-default" type="submit">Button</button>
  21. <input class="btn btn-default" type="button" value="Input">
  22. <input class="btn btn-default" type="submit" value="Submit">
  23.  
  24. <br>
  25. <!-- Standard button -->
  26. <button type="button" class="btn btn-default">（默认样式）Default</button>
  27.  
  28. <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
  29. <button type="button" class="btn btn-primary">（首选项）Primary</button>
  30.  
  31. <!-- Indicates a successful or positive action -->
  32. <button type="button" class="btn btn-success">（成功）Success</button>
  33.  
  34. <!-- Contextual button for informational alert messages -->
  35. <button type="button" class="btn btn-info">（一般信息）Info</button>
  36.  
  37. <!-- Indicates caution should be taken with this action -->
  38. <button type="button" class="btn btn-warning">（警告）Warning</button>
  39.  
  40. <!-- Indicates a dangerous or potentially negative action -->
  41. <button type="button" class="btn btn-danger">（危险）Danger</button>
  42.  
  43. <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
  44. <button type="button" class="btn btn-link">（链接）Link</button>
  45.  
  46. <img src="img/banner_1.jpg" class="img-responsive" >
  47. <table class="table table-bordered table-hover" >
  48.     <tr>
  49.         <th>编号</th>
  50.         <th>姓名</th>
  51.         <th>年龄</th>
  52.     </tr>
  53.     <tr>
  54.         <td>1</td>
  55.         <td>lucky</td>
  56.         <td>23</td>
  57.     </tr>
  58.     <tr>
  59.         <td>2</td>
  60.         <td>linda</td>
  61.         <td>26</td>
  62.     </tr>
  63.     <tr>
  64.         <td>3</td>
  65.         <td>bob</td>
  66.         <td>29</td>
  67.     </tr>
  68. </table>
  69.  
  70. <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  71. <script src="bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
  72. <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  73. <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  74. </body>
  75. </html>

效果图：

(2)组件：
导航条(结合https://v3.bootcss.com/components/#navbar)
分页条
(3)插件：
轮播图(javascript--->carousel)

5.综合应用案例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  8.     <title>Bootstrap hello world</title>
  9.  
  10.     <!-- Bootstrap -->
  11.     <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
  12.  
  13.     <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
  14.     <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
  15.     <!--[if lt IE 9]>
  16.     <![endif]-->
  17.     <style>
  18.         .paddingtop{
  19.             padding-top: 10px;
  20.         }
  21.  
  22.         .search-btn{
  23.             float: left;
  24.             border: 1px solid #ffc900;
  25.             background-color: #ffc900;
  26.             width: 90px;
  27.             height: 35px;
  28.             text-align: center;
  29.             line-height: 35px;
  30.             margin-top: 15px;
  31.         }
  32.  
  33.         .search-input{
  34.            float: left;
  35.             border: 2px solid #ffc900;
  36.             width: 400px;
  37.             height: 35px;
  38.             padding-left: 5px;
  39.             margin-top: 15px;
  40.         }
  41.  
  42.         .jx{
  43.             border-bottom: 2px solid #ffc900;
  44.             padding-bottom: 5px;
  45.         }
  46.  
  47.         .company{
  48.             height: 40px;
  49.             background-color: #ffd026;
  50.             text-align: center;
  51.             line-height: 40px;
  52.         }
  53.  
  54.     </style>
  55. </head>
  56. <body>
  57. <!--页眉部分-->
  58.     <header class="container-fluid">
  59.         <div class="row">
  60.             <img src="img/top_banner.jpg" class="img-responsive">
  61.         </div>
  62.         <div class="row paddingtop">
  63.             <div class="col-md-3">
  64.                 <img src="img/logo.jpg" class="img-responsive">
  65.             </div>
  66.             <div class="col-md-5">
  67.                 <input placeholder="请输入文字" class="search-input">
  68.                 <a href="#" class="search-btn">搜索</a>
  69.             </div>
  70.             <div class="col-md-4">
  71.                 <img src="img/hotel_tel.png" class="img-responsive">
  72.             </div>
  73.         </div>
  74.  
  75.         <!--导航栏-->
  76.         <div class="row">
  77.             <nav class="navbar navbar-default">
  78.                 <div class="container-fluid">
  79.                     <!-- Brand and toggle get grouped for better mobile display -->
  80.                     <div class="navbar-header">
  81.                         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  82.                             <span class="sr-only">Toggle navigation</span>
  83.                             <span class="icon-bar"></span>
  84.                             <span class="icon-bar"></span>
  85.                             <span class="icon-bar"></span>
  86.                         </button>
  87.                         <a class="navbar-brand" href="#">首页</a>
  88.                     </div>
  89.  
  90.                     <!-- Collect the nav links, forms, and other content for toggling -->
  91.                     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  92.                         <ul class="nav navbar-nav">
  93.                             <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
  94.                             <li><a href="#">Link</a></li>
  95.                             <li><a href="#">Link</a></li>
  96.                             <li><a href="#">Link</a></li>
  97.                             <li><a href="#">Link</a></li>
  98.                             <li><a href="#">Link</a></li>
  99.  
  100.                         </ul>
  101.  
  102.                     </div><!-- /.navbar-collapse -->
  103.                 </div><!-- /.container-fluid -->
  104.             </nav>
  105.         </div>
  106.  
  107.         <!--轮播图-->
  108.         <div class="row">
  109.             <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  110.                 <!-- Indicators -->
  111.                 <ol class="carousel-indicators">
  112.                     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  113.                     <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  114.                     <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  115.                 </ol>
  116.  
  117.                 <!-- Wrapper for slides -->
  118.                 <div class="carousel-inner" role="listbox">
  119.                     <div class="item active">
  120.                         <img src="img/banner_1.jpg" alt="...">
  121.                         <div class="carousel-caption">
  122.                             ...
  123.                         </div>
  124.                     </div>
  125.                     <div class="item">
  126.                         <img src="img/banner_2.jpg" alt="...">
  127.                         <div class="carousel-caption">
  128.                             ...
  129.                         </div>
  130.                     </div>
  131.                     <div class="item">
  132.                         <img src="img/banner_3.jpg" alt="...">
  133.                         <div class="carousel-caption">
  134.                             ...
  135.                         </div>
  136.                     </div>
  137.  
  138.                 </div>
  139.  
  140.                 <!-- Controls -->
  141.                 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
  142.                     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  143.                     <span class="sr-only">Previous</span>
  144.                 </a>
  145.                 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
  146.                     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  147.                     <span class="sr-only">Next</span>
  148.                 </a>
  149.             </div>
  150.         </div>
  151.     </header>
  152.  
  153. <!--主体部分-->
  154.     <div class="container">
  155.         <div class="row jx">
  156.             <img src="img/icon_5.jpg" >
  157.             <span>黑马精选</span>
  158.         </div>
  159.         <div class="row paddingtop">
  160.             <div class="col-md-3">
  161.                 <div class="thumbnail">
  162.                     <img src="img/jiangxuan_3.jpg" alt="">
  163.                     <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
  164.                     <font color="red">&yen; 699</font>
  165.                 </div>
  166.             </div>
  167.             <div class="col-md-3">
  168.                 <div class="thumbnail">
  169.                     <img src="img/jiangxuan_3.jpg" alt="">
  170.                     <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
  171.                     <font color="red">&yen; 699</font>
  172.                 </div>
  173.             </div>
  174.             <div class="col-md-3">
  175.                 <div class="thumbnail">
  176.                     <img src="img/jiangxuan_3.jpg" alt="">
  177.                     <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
  178.                     <font color="red">&yen; 699</font>
  179.                 </div>
  180.             </div>
  181.             <div class="col-md-3">
  182.                 <div class="thumbnail">
  183.                     <img src="img/jiangxuan_3.jpg" alt="">
  184.                     <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
  185.                     <font color="red">&yen; 699</font>
  186.                 </div>
  187.             </div>
  188.         </div>
  189.  
  190.         <div class="row jx">
  191.             <img src="img/icon_6.jpg" >
  192.             <span>国内游</span>
  193.         </div>
  194.  
  195.         <div class="row paddingtop">
  196.             <div class="col-md-4">
  197.                 <img src="img/guonei_1.jpg">
  198.             </div>
  199.  
  200.             <div class="col-md-8">
  201.  
  202.                 <div class="row">
  203.                     <div class="col-md-4">
  204.                         <div class="thumbnail">
  205.                             <img src="img/jiangxuan_3.jpg" alt="">
  206.                             <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
  207.                             <font color="red">&yen; 699</font>
  208.                         </div>
  209.                     </div>
  210.                     <div class="col-md-4">
  211.                         <div class="thumbnail">
  212.                             <img src="img/jiangxuan_3.jpg" alt="">
  213.                             <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
  214.                             <font color="red">&yen; 699</font>
  215.                         </div>
  216.                     </div>
  217.                     <div class="col-md-4">
  218.                         <div class="thumbnail">
  219.                             <img src="img/jiangxuan_3.jpg" alt="">
  220.                             <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
  221.                             <font color="red">&yen; 699</font>
  222.                         </div>
  223.                     </div>
  224.                 </div>
  225.  
  226.                 <div class="row">
  227.                     <div class="col-md-4">
  228.                         <div class="thumbnail">
  229.                             <img src="img/jiangxuan_3.jpg" alt="">
  230.                             <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
  231.                             <font color="red">&yen; 699</font>
  232.                         </div>
  233.                     </div>
  234.                     <div class="col-md-4">
  235.                         <div class="thumbnail">
  236.                             <img src="img/jiangxuan_3.jpg" alt="">
  237.                             <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
  238.                             <font color="red">&yen; 699</font>
  239.                         </div>
  240.                     </div>
  241.                     <div class="col-md-4">
  242.                         <div class="thumbnail">
  243.                             <img src="img/jiangxuan_3.jpg" alt="">
  244.                             <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
  245.                             <font color="red">&yen; 699</font>
  246.                         </div>
  247.                     </div>
  248.                 </div>
  249.             </div>
  250.  
  251.         </div>
  252.     </div>
  253.  
  254. <!--页脚部分-->
  255.     <footer class="container-fluid">
  256.         <div class="row">
  257.             <img src="img/footer_service.png" class="img-responsive">
  258.         </div>
  259.  
  260.         <div class="row company">
  261.             江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882
  262.         </div>
  263.     </footer>
  264. <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  265. <script src="bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
  266. <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  267. <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  268. </body>
  269. </html>

效果图：

06 BootStrap前端开发框架(超级好用)的更多相关文章

  1. bootstrap前端开发框架，未来发展趋势

    http://v3.bootcss.com/getting-started/Bootstrap 起步 CSS 组件 JavaScript插件 定制 关于 CSS 设置全局CSS样式,基本的HTML元素 ...

  2. Bootstrap 简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

    Bootstrap 简洁.直观.强悍的前端开发框架,让web开发更迅速.简单.

  3. Bootstrap非常简单实用的web前端开发框架

    今天无意间用firebug看网站的代码发现了Bootstrap,之前从来没有听说过这个东东,于是对它产生了好奇感,通过百度我了解到了Bootstrap是一款非常简单,强悍,实用,移动设备端优先使用的这 ...

  4. 2017年当下最值得你关注的前端开发框架，不知道你就OUT了！

    近几年随着 jQuery.Ext 以及 CSS3 的发展,以 Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野,可谓应接不暇. 在这篇分享中,我将总结2017年当下最值得你关注的前端开发框 ...

  5. 【总结】2017年当下最值得你关注的前端开发框架，不知道你就OUT了！

    近几年随着 jQuery.Ext 以及 CSS3 的发展,以 Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野,可谓应接不暇. 在这篇分享中,我将总结2017年当下最值得你关注的前端开发框 ...

  6. Schema – 模块化，响应式的前端开发框架

    Schema 是一个模块化的,响应式的前端框架,方便,快捷地帮助您迅速启动你的 Web 项目.Schema 配备完整的创建多个视图的能力.从桌面显示器到移动设备,它的12列网格提供强大的灵活性. Sc ...

  7. Crumpet – 使用很简单的响应式前端开发框架

    Crumpet 是一个简单的响应式的基于 SASS/SCSS 的响应式前端框架,保持你的 HTML 代码简洁.内置尽量使用占位符选择器,以减少你的 HTML 标记的大小,没有凌乱的 HTML 代码.快 ...

  8. Furatto – 轻量，友好的响应式前端开发框架

    Furatto 是一个基于 Bootstrap & Foundation 的前端开发框架,用于快速开发网站.这个框架采用流行的扁平化设计和响应式设计.除了布局和网格之外,所有的主要元素都有预定 ...

  9. 国内HTML5前端开发框架汇总

    国内HTML5前端开发框架汇总 Dawei Cheng 程大伟... 于 星期日, 02/12/2012 - 20:53 提交 国外很有多优秀的HTML5前端开发框架相信大家都耳熟能详:JQuery ...

随机推荐

  1. MyBatis框架的搭建

    前言:MyBatis框架的前身是iBatis,本身是Apache的一个开源项目. MyBatis框架是一个半自动的orm映射框架,是实体类和sql语句之间建立映射关系,sql语句写在单独的配置文件中, ...

  2. CentOS7下安装Python3和PIP3

    为了方便以后编译,所以整合了下配置流程 先查看是否安装了Python3 python3 -V 如果没有安装,则先安装依赖包 yum install zlib-devel bzip2-devel ope ...

  3. MongoDB 红宝书-MongoDB官网使用指南

    本文转载自Mongodb中文社区:http://www.mongoing.com/archives/27359 无论你是MongoDB的使用者.爱好者.初学者还是路人甲,有一个学习与进修的资源宝藏是千 ...

  4. asp.net大附件上传，支持断点续传

    以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传  ...

  5. mariadb启动不了

    提示地址已经被使用,是否有其他的进程正在使用 /var/run/sdata/mysql.sock 查询该文件,发现没有,sdata目录都不存在,应该是上次mysql意外关闭导致这个目录丢失了, 使用r ...

  6. CSS3背景图片（多重背景、起始位置、裁剪、尺寸）

    一.多重背景图片 ①CSS3允许我们在一个元素上添加多个图片 ②多重背景可以把多个图片资源添加到background属性上,用逗号隔开,然后用background-position把他们定位到你想要的 ...

  7. 时间datetime模块

    datetime模块 import datetime --时间加减的模块 #返回当前时间 print(datetime.datetime.now()) --2019-09-28 17:22:14.54 ...

  8. JAVA中Stringbuffer的append( )方法

    Stringbuffer是动态字符串数组,append( )是往动态字符串数组添加,跟“xxxx”+“yyyy”相当‘+’号. 跟String不同的是Stringbuffer是放一起的,String1 ...

  9. CSP-S乱搞记

    还有一年的时间,没人能挡住我前进的脚步 以后不打算写游记了,补完这篇再写就等退役吧,不太想传播什么负能量,走这条路,希望能得到自己想要的东西 Day-n 上了一个月文化课,班主任突然催我搞竞赛??? ...

  10. TP5验证码上传阿里云万网虚拟主机后，验证码不显示的解决办法

    TP5不显示验证码 清除缓冲区就应该可以了,今天我刚好也遇到了,解决的办法是在vendor/topthink/think-captcha/CaptchaController.php中加上这个ob_cl ...