Bootstrap详解

—— 老孙

课程目标：

1、bootstrap简介

2、bootstrap使用

3、案例

1.bootstrap简介

1.1 什么是Bootstrap？

  • Bootstrap来自 Twitter，是目前最受欢迎的响应式前端框架。
  • Bootstrap是基于 HTML、CSS、JavaScript的，它简洁灵活，使得 Web 开发更加快捷。

1.2 为什么使用 Bootstrap？

  • 移动设备优先：自 Bootstrap3 起，框架包含了贯穿于整个库移动设备优先的样式。

    • 不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。
    • 也就是说，针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。
  • 浏览器支持：所有的主流浏览器都支持 Bootstrap。
  • 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
  • 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
  • 它为开发人员创建接口提供了一个简洁统一的解决方案。
  • 它包含了功能强大的内置组件，易于定制。
  • 它还提供了基于 Web 的定制。
  • 它是开源的。

1.3 下载与使用

中文官网：https://www.bootcss.com/

英文官网：http://getbootstrap.com

Bootstrap详解 - 图1\06 任务六 (Bootstrap)\02_图片\1.png)

Bootstrap详解 - 图2\06 任务六 (Bootstrap)\02_图片\2.png)

Bootstrap详解 - 图3\06 任务六 (Bootstrap)\02_图片\3.png)

下载好的，压缩包解压出来。就得到了bootstrap的资源文件了。

分别是css、js、font字体，全部放在项目的根目录即可

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <link href="css/bootstrap.min.css" rel="stylesheet" />
  8.     <title>拉勾有我-必须火</title>
  9.   </head>
  11.   <body style="padding:100px;">
  12.       <h1>Hello, Bootstrap!</h1>
  13.       <!-- 注意：这两个按钮的class样式是Bootstrap定义的 -->
  14.       <button class="btn btn-primary">学习充电</button>
  15.       <button class="btn btn-success">极速入职</button>
  16.   </body>
  17. </html>

2.Bootstrap的使用

2.1 表格

和之前的表格相比，标签更丰富更加语义化，效果更佳美观

2.1.1 丰富的标签

  • 为表格添加基础样式
  • 表格标题行的容器元素（）
  • 表格主体中的表格行的容器元素（）
  • 表格行
  • 内使用。
  • 默认的表格单元格。
  		•  特殊的表格单元格，（居中和加粗的效果）。必须在
     关于表格存储内容的描述或总结。

    2.1.2 好看的类样式

    • .table 为任意 添加基本样式 (只有横向分隔线)
    • .table-striped 在
      • 内添加斑马线形式的条纹 ( IE8 不支持) ，隔行变色
    • .table-bordered 为所有表格的单元格添加边框
    • .table-hover 在
      • 内的任一行启用鼠标悬停状态，鼠标悬停高亮突出显示
    • .table-condensed 让表格更加紧凑

      • 2.1.3 情景色类样式

      适合应用在

      ，
      、

      • .active 激活效果（悬停颜色）
      • .success 表示成功或积极的动作
      • .info 表示普通的提示信息或动作
      • .warning 表示警告或需要用户注意
      • .danger 表示危险或潜在的带来的负面影响的动作

      2.1.4 响应式表格

      表格的父元素设置响应式，小于768px，出现边框

      1. <table class="table table-responsive">
      2.     <caption>经营产品大全</caption>
      3.     <thead>
      4.         <tr>
      5.             <th>产品</th>
      6.             <th>付款日期</th>
      7.             <th>状态</th>
      8.         </tr>
      9.     </thead>
      10.     <tbody>
      11.         <tr class="info">
      12.             <td>产品1</td>
      13.             <td>2020-1-1</td>
      14.             <td>待发货</td>
      15.         </tr>
      16.         <tr class="active">
      17.             <td>产品2</td>
      18.             <td>2020-1-2</td>
      19.             <td>已发货</td>
      20.         </tr>
      21.         <tr class="success">
      22.             <td>产品3</td>
      23.             <td>2020-1-3</td>
      24.             <td>未付款</td>
      25.         </tr>
      26.         <tr class="warning">
      27.             <td>产品4</td>
      28.             <td>2020-1-4</td>
      29.             <td>已退货</td>
      30.         </tr>
      31.         <tr class="danger">
      32.             <td>产品5</td>
      33.             <td>2020-1-5</td>
      34.             <td>已退款</td>
      35.         </tr>
      36.     </tbody>
      37. </table>

      2.2 表单

      2.2.1 表单布局

      2.2.1.1 默认布局

      Bootstrap详解 - 图4\06 任务六 (Bootstrap)\02_图片\5.png)

      1. <body style="padding:100px;">
      2.     <form>
      3.         <div class="form-group">
      4.             <label>邮箱</label>
      5.             <input type="email" class="form-control" placeholder="请输入邮箱">
      6.         </div>
      7.         <div class="form-group">
      8.             <label>密码</label>
      9.             <input type="passowd" class="form-control" placeholder="请输入密码">
      10.         </div>
      11.         <div class="form-group">
      12.             <button class="btn btn-primary">提交</button>
      13.         </div>
      14.     </form>
      15. </body>

      2.2.1.2 内联布局

      • 让所有表单元素居于一行
      • 注意：当小于768px时,会自动还原成移动端样式.

      Bootstrap详解 - 图5\06 任务六 (Bootstrap)\02_图片\6.png)

      1. <form class="form-inline">

      2.2.2 表单控件

      2.2.2.1 输入框

      Bootstrap详解 - 图6\06 任务六 (Bootstrap)\02_图片\7.png)

      1. <form>
      2.     <div class="form-group">
      3.         <label for="">输入框</label>
      4.         <input type="text" class="form-control" placeholder="请输入文本...">
      5.     </div>
      6. </form>

      2.2.2.2 文本框

      Bootstrap详解 - 图7\06 任务六 (Bootstrap)\02_图片\8.png)

      1. <div class="form-group">
      2.     <label for="">文本框</label>
      3.     <textarea class="form-control" cols="30" rows="5"></textarea>
      4. </div>

      2.2.2.3 复选框

      • checkbox 默认
      • checkbox-inline 内联

      Bootstrap详解 - 图8\06 任务六 (Bootstrap)\02_图片\9.png)

      1. <div class="checkbox">
      2.     <label>
      3.         <input type="checkbox"> 抽烟
      4.     </label>
      5. </div>
      6. <div class="checkbox">
      7.     <label>
      8.         <input type="checkbox"> 喝酒
      9.     </label>
      10. </div>
      11.     <hr>
      12. <div class="checkbox-inline">
      13.     <label>
      14.         <input type="checkbox"> 洗澡
      15.     </label>
      16. </div>
      17. <div class="checkbox-inline">
      18.     <label>
      19.         <input type="checkbox"> 烫头
      20.     </label>
      21. </div>

      2.2.2.4 复选按钮

      Bootstrap详解 - 图9\06 任务六 (Bootstrap)\02_图片\11.png)

      1. <form>        
      2.     <div class="btn-group" data-toggle="buttons">
      3.         <label class="btn btn-primary">
      4.             <input type="checkbox"> 音乐
      5.         </label>
      6.         <label class="btn btn-primary">
      7.             <input type="checkbox"> 体育
      8.         </label>
      9.         <label class="btn btn-primary">
      10.             <input type="checkbox"> 美术
      11.         </label>
      12.         <label class="btn btn-primary">
      13.             <input type="checkbox"> 电脑
      14.         </label>
      15.     </div>
      16. </form>
      18. <script src="js/jquery-3.3.1.min.js"></script>
      19. <script src="js/bootstrap.min.js"></script>

      2.2.2.5 单选框

      Bootstrap详解 - 图10\06 任务六 (Bootstrap)\02_图片\10.png)

      1. <label class="radio">
      2.     <input type="radio" name="sex"> 男
      3. </label>
      4. <label class="radio">
      5.     <input type="radio" name="sex"> 女
      6. </label>
      7. <hr>
      8. <label class="radio-inline">
      9.     <input type="radio" name="gender"> 耕
      10. </label>
      11. <label class="radio-inline">
      12.     <input type="radio" name="gender"> 织
      13. </label>
      15. <script src="js/jquery-3.3.1.min.js"></script>
      16. <script src="js/bootstrap.min.js"></script>

      2.2.2.6 单选按钮

      Bootstrap详解 - 图11\06 任务六 (Bootstrap)\02_图片\12.png)

      1. <div class="btn-group" data-toggle="buttons">
      2.     <label class="btn btn-primary">
      3.         <input type="radio" name="gender"> 男
      4.     </label>
      5.     <label class="btn btn-primary">
      6.         <input type="radio" name="gender"> 女
      7.     </label>
      8. </div>
      10. <script src="js/jquery-3.3.1.min.js"></script>
      11. <script src="js/bootstrap.min.js"></script>

      2.3 按钮

      Bootstrap详解 - 图12\06 任务六 (Bootstrap)\02_图片\13.png)

      1. <button class="btn btn-default">默认按钮</button>
      2. <button class="btn btn-primary">主要按钮</button>
      3. <button class="btn btn-success">成功按钮</button>
      4. <button class="btn btn-info">信息按钮</button>
      5. <button class="btn btn-warning">警告按钮</button>
      6. <button class="btn btn-danger">危险按钮</button>
      7. <button class="btn btn-link">连接按钮</button>
      • 按钮大小
        Bootstrap详解 - 图13\06 任务六 (Bootstrap)\02_图片\15.png)
      1. <button class="btn btn-primary btn-lg">超大按钮（高清大屏台式机）</button>
      2. <button class="btn btn-primary">大按钮（笔记本屏幕）</button>
      3. <button class="btn btn-primary btn-sm">小按钮（平板电脑）</button>
      4. <button class="btn btn-primary btn-xs">超小按钮（手机）</button>

      • 按钮状态

        • 激活状态：按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）;
        • 禁用状态：当您禁用一个按钮时，它的颜色会变淡 50%，并失去渐变;

      Bootstrap详解 - 图14\06 任务六 (Bootstrap)\02_图片\14.png)

      1. <button class="btn btn-default">默认按钮</button>
      2. <button class="btn btn-default active">激活按钮</button>
      3. <button class="btn btn-default" disabled>禁用按钮</button>

      2.4 图片

      • .img-rounded：添加 border-radius:6px 来获得图片圆角。
      • .img-circle：添加 border-radius:50% 来让整个图片变成圆形。
      • .img-thumbnail：添加一些内边距（padding）和一个灰色的边框

      Bootstrap详解 - 图15\06 任务六 (Bootstrap)\02_图片\16.png)

      1. <img src="img/1.jpg" class="img-rounded" width="33%">
      2. <img src="img/1.jpg" class="img-circle" width="33%">
      3. <img src="img/1.jpg" class="img-thumbnail" width="33%">

      响应式图片

      1. <img src="img/1.jpg" class="img-responsive">

      2.5 下拉菜单组件

      Bootstrap详解 - 图16\06 任务六 (Bootstrap)\02_图片\17.png)

      1. <div class="dropdown">
      2.     <button class="btn btn-primary" data-toggle="dropdown">拉勾教育 <span class="caret"></span></button>
      3.     <ul class="dropdown-menu">
      4.         <li><a href="#">前沿技术</a></li>
      5.         <li><a href="#">名师制作</a></li>
      6.         <li><a href="#">24小时导师</a></li>
      7.     </ul>
      8. </div>
      10. <script src="js/jquery-3.3.1.min.js"></script>
      11. <script src="js/bootstrap.min.js"></script>

      用法的关键核心

      1. 外围容器使用 class=”dropdown”包裹
      2. 内部点击按钮事件绑定 data-toggle=”dropdown”
      3. 菜单元素使用 class=”dropdown-menu”

      2.6 分页组件

      Bootstrap详解 - 图17\06 任务六 (Bootstrap)\02_图片\20.png)

      1. <ul class="pagination">
      2.     <li class="previous"> <a href="#"> &laquo; </a> </li>
      3.     <li class="active"> <a href="#">1</a> </li>
      4.     <li> <a href="#">2</a> </li>
      5.     <li> <a href="#">3</a> </li>
      6.     <li class="next"> <a href="#">&raquo;</a> </li>
      7. </ul>

      Bootstrap详解 - 图18\06 任务六 (Bootstrap)\02_图片\19.png)

      1.  <ul class="pager">

      2.7 栅格系统

      • bootstrap的栅格系统会将整个页面水平方向上平均分成12个小格子
      • 当浏览器大小发生变化的时候，我们可以控制每行的元素占用几个格子，从而达到响应式的效果

      Bootstrap详解 - 图19\06 任务六 (Bootstrap)\02_图片\25.png)

      • 显示屏幕的扩大和缩小. 实现如下效果

      Bootstrap详解 - 图20\06 任务六 (Bootstrap)\02_图片\24.png)

      1. <style>
      2.     .a{
      3.         height: 50px;
      4.         border: 1px solid black;
      5.         background-color: #eeeeee;
      6.     }
      7. </style>
      8. <body>
      10.     <div class="container">
      11.         <div class="row">
      12.             <!-- col-lg-3 当大屏幕时，一个div占3份，一行显示4个div -->
      13.             <!-- col-md-4 当中屏幕时，一个div占4份，一行显示3个div -->
      14.             <!-- col-sm-6 当小屏幕时，一个div占6份，一行显示2个div -->
      15.             <!-- 超小屏幕时，一个div占12份，一行显示1个div，默认 -->
      17.             <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
      18.             <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
      19.             <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
      20.             <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
      22.             <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
      23.             <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
      24.             <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
      25.             <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
      27.             <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
      28.             <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
      29.             <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
      30.             <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
      31.         </div>
      32.     </div>
      33. </body>

      2.8 缩略图组件

      • 配合响应式的栅格系统

      Bootstrap详解 - 图21\06 任务六 (Bootstrap)\02_图片\21.png)

      Bootstrap详解 - 图22\06 任务六 (Bootstrap)\02_图片\22.png)

      1. <div class="container">
      2.         <div class="row">
      3.             <div class="col-lg-3 col-md-4 col-sm-6">
      4.                 <div class="thumbnail">
      5.                     <img src="img/2.jpg">
      6.                 </div>
      7.             </div>
      8.             <!-- 其余3张图片 -->
      9.             <div class="col-lg-3 col-md-4 col-sm-6">
      10.                 <div class="thumbnail">
      11.                     <img src="img/2.jpg">
      12.                 </div>
      13.             </div>
      14.             <div class="col-lg-3 col-md-4 col-sm-6">
      15.                 <div class="thumbnail">
      16.                     <img src="img/2.jpg">
      17.                 </div>
      18.             </div>
      19.             <div class="col-lg-3 col-md-4 col-sm-6">
      20.                 <div class="thumbnail">
      21.                     <img src="img/2.jpg">
      22.                 </div>
      23.             </div>
      24.         </div>
      25.     </div>
      • 自定义内容

      Bootstrap详解 - 图23\06 任务六 (Bootstrap)\02_图片\23.png)

      1. <div class="container">
      2.     <div class="row">
      4.         <div class="col-lg-3 col-md-4 col-sm-6">
      5.             <div class="thumbnail">
      6.                 <img src="img/2.jpg">
      7.                 <div class="caption">
      8.                     <h3>视频标题</h3>
      9.                     <p>视频介绍，美女众多...</p>
      10.                     <p>
      11.                         <a href="#" class="btn btn-primary">试看</a>
      12.                         <a href="#" class="btn btn-warning">购买</a>
      13.                     </p>
      14.                 </div>
      15.             </div>
      16.         </div>
      18.         <!--其余3个省略-->
      20.     </div>
      21. </div>

      2.9 模态框组件

      Bootstrap详解 - 图24\06 任务六 (Bootstrap)\02_图片\30.png)

      • data-toggle=”modal” 触发类型:模态框modal
      • data-target=”#myModal” 触发的节点
      • data-backdrop=”static” 点击黑灰色背景，不会关闭模态框
      1. <button class="btn btn-warning" data-toggle="modal" data-target="#myModal">弹框</button>
      3. <!-- 声明定义模态框组件 -->
      4. <div class="modal" id="myModal" data-backdrop="static">
      5.     <!-- 窗口声明 -->
      6.     <div class="modal-dialog">
      7.         <!-- 内容声明 -->
      8.         <div class="modal-content">
      9.             <!-- 1.框的标题 -->
      10.             <div class="modal-header">
      11.                 <button class="close" data-dismiss="modal">
      12.                     <span>&times;</span>
      13.                 </button>
      14.                 <h4 class="modal-title">友情提示</h4>
      15.             </div>
      16.             <!-- 2.框内信息 -->
      17.             <div class="modal-body">
      18.                 服务器错误，请稍后再试！
      19.                 <hr>
      20.                 <img src="img/1.jpg" width="200px">
      21.                 <hr>
      22.                 <input type="text">
      23.             </div>
      24.             <!-- 3.框的按钮 -->
      25.             <div class="modal-footer">
      26.                 <button class="btn btn-info">确定</button>
      27.                 <button class="btn btn-default" data-dismiss="modal">取消</button>
      28.             </div>
      29.         </div>
      30.     </div>
      31. </div>

      3.案例

      3.1 首页轮播大图

      Bootstrap详解 - 图25\06 任务六 (Bootstrap)\02_图片\26.png)

      1. 大小屏幕自动适应,扩大缩小浏览器
      2. 滚动数字区点击左右切换图片
      3. 左右区域点击切换
      4. 默认5秒钟自动切换下一张
      5. 最后一张,回到第一张
      1. <div id="myCarousel" class="carousel slide" data-ride="carousel">
      3.     <!-- 滚动圆点区 -->
      4.     <ol class="carousel-indicators">
      5.         <li data-slide-to="0" data-target="#myCarousel"></li>
      6.         <li data-slide-to="1" data-target="#myCarousel"></li>
      7.         <li data-slide-to="2" data-target="#myCarousel"></li>
      8.     </ol>
      10.     <!-- 图片区 -->
      11.     <div class="carousel-inner">
      12.         <div class="item active">
      13.             <img src="img/1.jpg">
      14.         </div>
      15.         <div class="item">
      16.             <img src="img/2.jpg">
      17.         </div>
      18.         <div class="item">
      19.             <img src="img/3.jpg">
      20.         </div>
      21.     </div>
      23.     <!-- 左右切换 -->
      24.     <a href="#myCarousel" data-slide="prev" class="carousel-control left">
      25.         <span class="glyphicon glyphicon-chevron-left"></span>
      26.     </a>
      27.     <a href="#myCarousel" data-slide="next" class="carousel-control right">
      28.         <span class="glyphicon glyphicon-chevron-right"></span>
      29.     </a>
      31. </div>

      data 属性解释：

      1. data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置；

      2. data-slide-to 来向轮播底部创建一个原始滑动索引，data-slide-to=”2” 将把滑动块移动到一个特定的索引，索引从 0 开始计数。

      3. data-ride=”carousel”属性用户标记轮播在页面加载时开始动画播放

      3.2 响应式导航条

      Bootstrap详解 - 图26\06 任务六 (Bootstrap)\02_图片\27.png)

      Bootstrap详解 - 图27\06 任务六 (Bootstrap)\02_图片\29.png)

      Bootstrap详解 - 图28\06 任务六 (Bootstrap)\02_图片\28.png)

      1. <!-- 默认的导航条样式 -->
      2. <div class="navbar navbar-default">
      3.     <!-- 响应式的容器 -->
      4.     <div class="container">
      5.         <!-- 导航条的头部 -->
      6.         <div class="navbar-header">
      7.             <a href="#" class="navbar-brand">老孙科技股份有限公司</a>
      8.             <!-- data-toggle="collapse"  数据切换的事件，特效是折叠-->
      9.             <!-- data-target="#nav"  折叠效果的目标是下面的#nav容器-->
      10.             <button class="navbar-toggle" data-toggle="collapse" data-target="#nav">
      11.                 <span class="sr-only"></span>
      12.                 <span class="icon-bar"></span>
      13.                 <span class="icon-bar"></span>
      14.                 <span class="icon-bar"></span>
      15.             </button>
      16.         </div>
      18.         <!-- 导航项 -->
      19.         <div id="nav" class="collapse navbar-collapse">
      20.             <ul class="nav navbar-nav navbar-right">
      21.                 <li class="active"> <a href="#"> <span class="glyphicon glyphicon-home"></span> 主页</a> </li>
      22.                 <li> <a href="#"> <span class="glyphicon glyphicon-camera"></span> 产品</a> </li>
      23.                 <li> <a href="#"> <span class="glyphicon glyphicon-tint"></span> 竞争</a> </li>
      24.                 <li> <a href="#"> <span class="glyphicon glyphicon-earphone"></span> 联系我们</a> </li>
      25.             </ul>
      26.         </div>
      27.     </div>
      28. </div>