完成的事情：

PPT和周会。。。

计划的事情：

登录和项目渲染。

问题：

            【css-08】bootstrap有哪些常用组件？

            小课堂【成都】

            目录

            1.背景介绍

            2.知识剖析

            3.常见问题

            4.解决方案

            5.编码实战

            6.扩展思考

            7.参考文献

            8.更多讨论

            1.背景介绍

            Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

            Bootstrap提供了优雅的HTML和CSS规范，它是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目。

            国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

            2.知识剖析

                bootstrap

                在使用上主要有CSS、JavaScript 和字体文件，在官网直接下载并正确引用即可，当然，在cdn上也有对应的服务链接。

在官网教程可看出，bootstrap主要分“全局CSS样式”、“组件”、“javaScript插件”三部分内容，这次小课堂主要对“组件”库中常用的组件进行简要的介绍。

下拉菜单

                将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。

<div class="dropdown">

  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

    Dropdown

    <span class="caret"></span>

  </button>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">

    <li><a href="#">Action</a></li>

    <li><a href="#">Another action</a></li>

    <li><a href="#">Something else here</a></li>

    <li role="separator" class="divider"></li>

    <li><a href="#">Separated link</a></li>

  </ul>

</div>

输入框组

                通过在文本输入框 "input"前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 或 .input-group-btn 类，可以给 .form-control 的前面或后面添加额外的元素。

<div class="input-group">

  <span class="input-group-addon" id="basic-addon1">@</span>

  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">

</div>

<div class="input-group">

  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">

  <span class="input-group-addon" id="basic-addon2">@example.com</span>

</div>

<div class="input-group">

  <span class="input-group-addon">$</span>

  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">

  <span class="input-group-addon">.00</span>

</div>

<label for="basic-url">Your vanity URL</label>

<div class="input-group">

  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>

  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">

</div>

导航

                Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。

<ul class="nav nav-tabs">

  <li role="presentation" class="active"><a href="#">Home</a></li>

  <li role="presentation"><a href="#">Profile</a></li>

  <li role="presentation"><a href="#">Messages</a></li>

</ul>

<ul class="nav nav-pills">

  <li role="presentation" class="active"><a href="#">Home</a></li>

  <li role="presentation"><a href="#">Profile</a></li>

  <li role="presentation"><a href="#">Messages</a></li>

</ul>

<ul class="nav nav-pills nav-stacked">

  <li role="presentation" class="active"><a href="#">Home</a></li>

  <li role="presentation"><a href="#">Profile</a></li>

  <li role="presentation"><a href="#">Messages</a></li>

</ul>

导航条

                导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。

<nav class="navbar navbar-default">

  <div class="container-fluid">

    <!-- Brand and toggle get grouped for better mobile display -->

    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

        <span class="sr-only">Toggle navigation</span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand" href="#">Brand</a>

    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <ul class="nav navbar-nav">

        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>

        <li><a href="#">Link</a></li>

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">Action</a></li>

            <li><a href="#">Another action</a></li>

            <li><a href="#">Something else here</a></li>

            <li role="separator" class="divider"></li>

            <li><a href="#">Separated link</a></li>

            <li role="separator" class="divider"></li>

            <li><a href="#">One more separated link</a></li>

          </ul>

        </li>

      </ul>

      <form class="navbar-form navbar-left">

        <div class="form-group">

          <input type="text" class="form-control" placeholder="Search">

        </div>

        <button type="submit" class="btn btn-default">Submit</button>

      </form>

      <ul class="nav navbar-nav navbar-right">

        <li><a href="#">Link</a></li>

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">Action</a></li>

            <li><a href="#">Another action</a></li>

            <li><a href="#">Something else here</a></li>

            <li role="separator" class="divider"></li>

            <li><a href="#">Separated link</a></li>

          </ul>

        </li>

      </ul>

    </div><!-- /.navbar-collapse -->

  </div><!-- /.container-fluid -->

</nav>

进度条

                通过这些简单、灵活的进度条，为当前工作流程或动作提供实时反馈。

默认样式

<div class="progress">

  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">

    <span class="sr-only">60% Complete</span>

  </div>

</div>

多情景颜色

<div class="progress">

  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">

    <span class="sr-only">40% Complete (success)</span>

  </div>

</div>

<div class="progress">

  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">

    <span class="sr-only">20% Complete</span>

  </div>

</div>

<div class="progress">

  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">

    <span class="sr-only">60% Complete (warning)</span>

  </div>

</div>

<div class="progress">

  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">

    <span class="sr-only">80% Complete (danger)</span>

  </div>

</div>

<div class="progress">

  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">

    <span class="sr-only">45% Complete</span>

  </div>

</div>

</code>

</pre>

            7.参考文献

        参考一："http://v3.bootcss.com/components/#progress"bootstrap中文文档

            8.更多讨论

            当我们需要设计更复杂的页面样式，例如导航条中，项目隐藏后的点击下拉显示功能，例如javascript插件中的模态框、轮播图等功能，就需要引用jquery.js和bootstrap.js文件。

            甚至需要调用bootstrap提供的方法接口，对目标进行适当的触发。

        PPT链接：https://ptteng.github.io/PPT/PPT/css-08-bootstrap%20component4726.html#/

        视频链接：https://v.qq.com/x/page/x0396e1008y.html

收获：

PPT？