• CDN引用

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

一、标签页&下拉菜单

image.png image.png

   <!-- tab导航&下拉效果 -->
   <div class="container">
       <ul class="nav nav-tabs">
           <li class="dropdown active">
               <a class="dropdown-toggle" data-toggle="dropdown" href="#">下拉<span class="caret"></span></a>
               <ul class="dropdown-menu ">
                   <li><a href="#">春</a></li>
                   <li><a href="#">夏</a></li>
                   <li><a href="#">秋</a></li>
                   <li><a href="#">冬</a></li>
               </ul>
           </li>
           <li class="dropup ">
               <a class="dropdown-toggle" data-toggle="dropdown" href="#">上拉<span class="caret"></span></a>
               <ul class="dropdown-menu ">
                   <li><a href="#">春</a></li>
                   <li><a href="#">夏</a></li>
                   <li><a href="#">秋</a></li>
                   <li><a href="#">冬</a></li>
               </ul>
           </li>
           <li><a href="#">你过来啊</a></li>
       </ul>
       <br /> <br /> <br /> <br /> <br />

       <!-- 胶囊导航&下拉效果 -->
       <div class="container">
           <ul class="nav nav-pills">
               <li class="dropdown active">
                   <a class="dropdown-toggle" data-toggle="dropdown" href="#">下拉&分割线<span class="caret"></span></a>
                   <ul class="dropdown-menu ">
                       <li><a href="#">春</a></li>
                       <li class="divider"></li>
                       <li><a href="#">夏</a></li>
                       <li class="divider"></li>
                       <li><a href="#">秋</a></li>
                       <li class="divider"></li>
                       <li><a href="#">冬</a></li>
                   </ul>
               </li>

               <li class="dropup ">
                   <a class="dropdown-toggle" data-toggle="dropdown" href="#">上拉&分割线<span class="caret"></span></a>
                   <ul class="dropdown-menu ">
                       <li><a href="#">春</a></li>
                       <li class="divider"></li>
                       <li><a href="#">夏</a></li>
                       <li class="divider"></li>
                       <li><a href="#">秋</a></li>
                       <li class="divider"></li>
                       <li><a href="#">冬</a></li>
                   </ul>
               </li>
               <li><a href="#">滚蛋吧</a></li>
           </ul>
       </div>

       <!-- 按钮组下拉效果 -->
       <div class="container">
           <div class="btn-group-vertical">
               <button class="btn btn-default">五行</button>
               <button class="btn btn-default">星座</button>
               <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">季节<span
                       class="caret"></span></button>
               <ul class="dropdown-menu">
                   <li><a href="#">春</a></li>
                   <li><a href="#">夏</a></li>
                   <li><a href="#">秋</a></li>
                   <li><a href="#">冬</a></li>
               </ul>
           </div>
       </div>

        <hr>
        <p class="active-tab"><strong>激活的标签页</strong>：<span></span></p>
        <p class="previous-tab"><strong>前一个激活的标签页</strong>：<span></span></p>
        <hr>
        <ul id="myTab" class="nav nav-tabs">
            <li class="active"><a href="#home" data-toggle="tab">菜鸟教程</a></li>
            <li><a href="#ios" data-toggle="tab">iOS</a></li>
            <li class="dropdown">
                <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown"> Java <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                    <li><a href="#maven" tabindex="-1" data-toggle="tab">Maven</a></li>
                    <li><a href="#idea" tabindex="-1" data-toggle="tab">Idea</a></li>
                </ul>
            </li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="home">
                <p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>
            </div>
            <div class="tab-pane fade" id="ios">
                <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
                    TV。</p>
            </div>
            <div class="tab-pane fade" id="maven">
                <p>Maven。</p>
            </div>
            <div class="tab-pane fade" id="idea">
                <p>Idea</p>
            </div>
        </div>
    </div>

二、顶部导航栏

image.png

    <nav class="navbar navbar-default navbar-fixed-top navbar-inverse"  role="navigation">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Logo</a>
            </div>

            <ul class="nav navbar-nav">
                <li class="active"><a href="#">安卓</a></li>
                <li><a href="#">苹果</a></li>
                <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Windows
                        <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Windows7</a></li>
                        <li><a href="#">Windows8.1</a></li>
                        <li><a href="#">Windows10</a></li>
                    </ul>
                </li>
            </ul>

            <form class="navbar-form navbar-right">
                <div class="input-group">
                    <span class="input-group-addon">@</span>
                    <input list="lst" type="text" class="form-control" placeholder="Search" />
                    <datalist id="lst">
                        <option value="IE"></option>
                        <option value="Firefox"></option>
                        <option value="chrome"></option>
                        <option value="safari"></option>
                    </datalist>
                </div>
    
                <button class="btn btn-success" type="submit">search</button>
            </form>
        </div>
    </nav>

三、表格、表单、按钮

image.png

        <h1>一、表格：</h1>
        <table class="table table-bordered table-striped table-hover">

            <thead>
                <tr class="danger">
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>性别</td>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>谢</td>
                    <td>27</td>
                    <td>男</td>
                </tr>
                <tr>

                    <td>🍵</td>
                    <td>25</td>
                    <td>女</td>
                </tr>
                <tr>
                    <td>🐖</td>
                    <td>26</td>
                    <td>未知</td>
                </tr>
            </tbody>
        </table>

        <h1>二、表单</h1>


        <form action="">

            <div class="form-group">
                <label class="control-label" for="">label标签是给input输入框做标记用的：</label>
                <div class="input-group">
                    <span class="input-group-addon">$</span>
                    <input type="text" placeholder="请填入信息" class="form-control">
                </div>

            </div>

            <div class="form-group">
                <label>input-group包裹span符号和input输入框</label>
                <div class="input-group">
                    <input class="form-control" type="text" placeholder="请输入金额">
                    <div class="input-group-addon">0.00</div>
                </div>
            </div>

            <div class="form-group">
                <label for="">这是一个单选：</label>
                <select name="" id="" class="form-control">
                    <option value="">北京</option>
                    <option value="">上海</option>
                    <option value="">深圳</option>
                </select>
            </div>

            <div class="form-group">
                <label for="">这是一个多行文本输入框</label>
                <textarea cols="10" rows="5" class="form-control">开始输入吧少年</textarea>
            </div>
        </form>

        <h3> label 和 input 实现左标签右输入布局</h3>

        <div class="form-horizontal">
            <fieldset>
                <div class="form-group">
                    <label class="col-sm-2 control-label">昵 称:</label>
                    <div class="col-sm-2 input-group">
                        <input type="text" class="form-control">
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-user"></span>
                        </span>
                    </div>
                </div>
            </fieldset>
        </div>

        <div class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-2 control-label">密码:</label>
                <div class="col-sm-2 input-group">
                    <input class="form-control" type="password">
                    <span class="help-block"><i class="fa fa-info-circle"></i>请再次输入您的密码</span>
                </div>
            </div>
        </div>



        <h1>三、字体符号</h1>
        <span class="glyphicon glyphicon-plus"></span> <br /><br />
        <span class="glyphicon glyphicon-ok"></span> <br /><br />
        <span class="glyphicon glyphicon-remove"></span> <br /><br />
        <span class="glyphicon glyphicon-pencil"></span> <br /><br />

        <h1>四、按钮&按钮组</h1>
        <button type="button" class="btn btn-primary">button1</button>
        <button type="button" class="btn btn-success">button2</button>
        <button type="button" class="btn btn-danger">button3</button>

        <br /> <br />

        <div class="btn-group">
            <button type="button" class="btn btn-primary">贝贝</button>
            <button type="button" class="btn btn-success">晶晶</button>
            <button type="button" class="btn btn-danger">欢欢</button>
        </div>

其它

• 折叠

.collapse 默认折叠
.collapse in 默认折叠打开

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">
    点击折叠
</button>

<div id="demo" class="collapse in">
    <h1>大吉大利，今晚吃鸡！</h1>
</div>

折叠 折叠打开

• 导航栏
  .navbar——设置nav元素为导航条组件；
  .navbar-default——指定导航条组件为默认主题；
  .navbar-inverse——指定导航条组件为黑色主题；
  .navbar-fixed-top——设置导航条组件固定在顶部；
  .navbar-header——主要指定div元素为导航条组件包裹品牌图标及切换按钮；
  .navbar-brand——设置导航条组件内的品牌图标；navbar-brand默认是放文字的,也可以放图片，但必须是小图片,如果图片太大，位置就会靠下.
  .navbar-nav——设置ul为导航条组件内的列表元素;还有
  navbar-form
  .navbar-left——设置导航条内元素向左对齐；
  .navbar-right——设置导航条内元素向右对齐；

• 输入框
  input-group——一般包含一个输入框和一个图标。
  input-group-addon——输入框前或后的图标
  form-control——表单美化

• 按钮
  button-group——按钮组，将多个按钮连载一起，左右有圆角效果

• 下拉菜单
  dropdown
  dropdown-toggle
  data-toggle="dropdown"
  dropdown-menu
  .caret——下拉菜单的▼标志

• 其它
  .container——自动，有点据中效果
  .container-fluid——设置宽度充满父元素，即为100%。内容从左开始显示；