bootstrap学习

最新推荐文章于 2022-10-19 17:38:12 发布
最新推荐文章于 2022-10-19 17:38:12 发布
阅读量1.6k 收藏 4
点赞数 4
分类专栏： bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/OneGoal/article/details/53640385
版权

Bootstrap 4 开始模板

<!doctype html>
<html lang="zh-cmn">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
        <title>Hello, world!</title>
    </head>
    <body>
        <h1>Hello, world!</h1>



        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    </body>
</html>
shrink-to-fit 为了解决一些兼容性问题，阻止某些浏览器因为元素超出范围而重设页面的 scale 。
integrity 验证文件的完整性，不成功就拒绝加载。

bootstrap入门

初识bootstrap:

jquery下载：http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js

bootstrap下载：https://github.com/twbs/bootstrap/archive/v3.3.7.zip

全套 jquery: http://www.bootcdn.cn/jquery/

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <!--[if lt IE 9]>
              <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
              <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        .
        .
        .


        <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
    </body> 
</html>

栅格系统、栅格布局

<div class="container-fluid">
    <div style="background: red;">michael1</div>
</div>


<div class="container">
    <div class="row">
        <div class="col-lg-1">第1行第1列</div>
        <div class="col-lg-11">第1行第2列</div>
    </div>
</div>
container-fluid          自适应宽度100%
container                固定宽度（适应响应式）
                        宽度>=1200                1170px
                        992<=宽度<1200            970px
                        768<=宽度<992              750px
                        宽度<768                  auto
注意：这两个class不能放在一起，可以是兄弟关系，但不能是嵌套的关系
如果不想让宽度随着屏幕而变化，可以给它一个!important来提升优先级，这样的话在所有尺寸下都是一个定值

container:如果列的和超过了12，那就会换行;如果有一列只占一行并且这个数值超过了12，那就会按12去显示

屏幕尺寸

<div class="container">
    <div class="row">
        <div class="col-lg-1">第1行第1列</div>
        <div class="col-lg-3">第1行第2列</div>
        <div class="col-lg-5">第1行第3列</div>
        <div class="col-lg-3">第1行第4列</div>
     </div>
     <div class="row">
        <div class="col-md-4">第2行第1列</div>
        <div class="col-md-4">第2行第2列</div>
        <div class="col-md-4">第2行第3列</div>
     </div>
</div>
lg          宽度>1200
            表现形式：屏幕的宽度大于1200，一行显示n(结构里有几个div)列
            屏幕的宽度小于1200，一行显示1列

md          992=<宽度<1200
            表现形式：屏幕的宽度大于992并且小于1200，一行显示n(结构里有几个div)列
            屏幕的宽度小于992，一行显示1列

sm          768=<宽度<992
            表现形式：屏幕的宽度大于768并且小于992，一行显示n(结构里有几个div)列
            屏幕的宽度小于768，一行显示1列

xs          宽度<768
            表现形式：屏幕的宽度小于768，一行永远显示n(结构里有几个div)列

组合模式

<div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6">第1行第1列</div>
    <div class="col-lg-3 col-md-4 col-sm-6">第1行第2列</div>
    <div class="col-lg-3 col-md-4 col-sm-6">第1行第3列</div>
    <div class="col-lg-3 col-md-4 col-sm-6">第1行第4列</div>
</div>

当宽度大于1200px时候，div按照col-lg来显示
当992=<宽度<1200，div按照col-md来显示
当768=<宽度<992，div按照col-sm来显示
当宽度<768，div按照col-xs来显示

列偏移

<div class="row">
    <div class="col-lg-4 col-lg-offset-4">第2行第1列</div>
    <div class="col-lg-4 col-lg-offset-5">第2行第1列</div>
    <div class="col-lg-4 col-lg-offset-12">第2行第1列</div>
    <div class="col-lg-4 col-lg-offset-13">第2行第1列</div>
</div>
offset              往右偏移
偏移的格子数量，大于12会不起作用，小于等于12有效。
注意：当有多列时，偏移后超出十二，会导致换行再偏移。如果多列加上偏移小于等于12，则还在一行上。

列排序与嵌套

<div class="container" style="border: 1px solid #f00;">
    <div class="row">
        <div class="col-lg-2 col-lg-push-1">第1行第1列</div>
        <div class="col-lg-2 col-lg-push-12">第1行第2列</div>
    </div>
    <div class="row">
        <div class="col-lg-2 col-lg-push-10">第3行第1列</div>
        <div class="col-lg-10 col-lg-pull-2">第3行第2列</div>
    </div>
</div>
push        往右走，不能超过12，否则就不起作用
pull        往左走，不能超过12，否则就不起作用
如果两个顺序一样，即push或pull后面的数字一样，则会依次排列，两个层不会重合。


列偏移和列排序的区别
1、列偏移只能往右走，而列排序（pull、push）既可以往右边走，也可以往左边走
2、如果一行中有多列，offset偏移如果大的话，会换行再偏移。而push不会有这个问题

每一列里面都可以在嵌套一行和n（不能超过12）列，那嵌套里面的元素就会以父级的宽度为基准，再分12个格子。

特殊标签以及样式

<p><kbd>ctrl+n</kbd></p>
<pre>&lt;p&gt;这里是一段文字，不会被解析&lt;/p&gt;<br />&lt;div&gt;michael&lt;/div&gt;</pre>
<code>.michael</code>
<code>&lt;span&gt;</code>

表格相关样式

<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover table-condensed">
        <thead>
            <tr>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>
        <tbody>
            <tr class="active">
                <td>语文  </td>
                <td>数学</td>
                <td>英文</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr class="success">
                <td>语文  </td>
                <td>数学</td>
                <td>英文</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
        </tbody>
    </table>
</div>
table               会修改一些简单的样式
table-striped       隔行换色
table-bordered      给表格添加边框
table-hover         给每一行添加一个hover状态
table-condensed     让表格更加紧凑

注意：将表格包在一个class为table-responsive的div里，当屏幕尺寸小于768的时候会出现滚动条

表单的操作

<form action="#" class="form-inline">
    <div class="form-group">
        <label for="userName">用户名</label>
        <input type="text" id="userName" class="form-control" />
    </div>

    <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" class="form-control" />
    </div>

    <input type="button" value="登录" class="btn-success btn" />
</form>

form-control            让表单的宽度为100%，并且还添加了一些其它的样式
form-group              给表单之间添加了一些距离
form-inline             让表单在一行中显示
上面的代码如果没有form-inline，form-control会显示百分之百，导致表单输入框与表单名称换行。
有了form-inline，会让输入框与表单名称在一行，但是当小于768px，又会使得输入框显示百分之百。

表单

仔细研究下官方文档。

按钮

    <!--按钮的背景色-->
    <div class="row">
        <input type="button" value="按钮" class="btn" />
        <button type="button" class="btn btn-default">michael</button>
        <button type="button" class="btn btn-primary">michael</button>
        <button type="button" class="btn btn-success">michael</button>
        <button type="button" class="btn btn-info">michael</button>
        <button type="button" class="btn btn-warning">michael</button>
        <button type="button" class="btn btn-danger">michael</button>
        <button type="button" class="btn btn-link">michael</button>
    </div>

    <!--按钮的尺寸-->
    <div class="row">
        <button type="button" class="btn btn-default btn-lg">michael</button>
        <button type="button" class="btn btn-primary btn-md">michael</button>
        <button type="button" class="btn btn-success btn-sm">michael</button>
        <button type="button" class="btn btn-info btn-xs">michael</button>
    </div>

    <!--btn-block 让按钮的宽度变为100%，并且成了块级元素-->
    <div class="row">
        <button type="button" class="btn btn-primary btn-block">michael</button>
    </div>

    <!--激活状态-->
    <div class="row">
        <button type="button" class="btn btn-primary active">michael</button>
    </div>

    <!--禁用状态-->
    <div class="row">
        <button type="button" class="btn btn-primary active" disabled>michael</button>
        <button type="button" class="btn btn-info disabled">michael</button>
        <a href="#" class="btn btn-danger active disabled">michael</a>
    </div>

响应式图片

<div class="container">
    <div class="row">
        <div class="col-lg-6">
            <img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png" class="img-responsive"/>
        </div>
    </div>

    <!--图片的形状-->
    <div class="row" style="margin-top: 10px;">
        <div class="col-lg-3">
            <img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png" class="img-responsive img-rounded"/>
        </div>
        <div class="col-lg-3">
            <img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png" class="img-responsive img-circle"/>
        </div>
        <div class="col-lg-3">
            <img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png" class="img-responsive img-thumbnail"/>
        </div>
    </div>
</div>

img-rounded    圆角矩形
img-circle     圆形图片
img-thumbnail  透明表框图片

辅助类样式

<!--字体的颜色-->
<div class="row">
    <p class="text-muted">michael，michael，michael</p>
    <p class="text-primary">michael，michael，michael</p>
    <p class="text-success">michael，michael，michael</p>
    <p class="text-info">michael，michael，michael</p>
    <p class="text-warning">michael，michael，michael</p>
    <p class="text-danger">michael，michael，michael</p>
</div>

<!--字体的背景，测试效果同btn-xxx-->
<div class="row">
    <p class="bg-primary">michael，michael，michael</p>
    <p class="bg-success">michael，michael，michael</p>
    <p class="bg-info">michael，michael，michael</p>
    <p class="bg-warning">michael，michael，michael</p>
    <p class="bg-danger">michael，michael，michael</p>
</div>

<!--三角符号、关闭按钮-->
<div class="row">
    <span class="caret"></span>
    <button class="close">&times;</button>
</div>

<!--浮动，row自带清除浮动-->
<div class="row" style="border: 1px solid #f00;">
    <div class="pull-left">michael1</div>
    <div class="pull-right">michael2</div>
</div>

<!--清除浮动，效果同上-->
<div class="row" >
    <div style="border: 1px solid green;" class="clearfix">
        <div class="pull-left">michael1</div>
        <div class="pull-right">michael2</div>
    </div>
</div>

<!--居中对齐-->
<div class="row" >
    <div style="width: 100px; height: 100px; border: 1px solid #f00;" class="center-block">
    </div><!--相当于样式invisible，位置还占着。-->
</div>

<!--隐藏与显示-->
<div class="row sh">
    <div class="col-lg-2 show">第1列</div>
    <div class="col-lg-2 hidden">第2列</div>       <!--不占位置-->
    <div class="col-lg-2">第3列</div>
    <div class="col-lg-2 invisible">第4列</div>    <!--但是位置还占着-->
    <div class="col-lg-2">第5列</div>
</div>

响应式工具

<div class="container">
    <div class="row">
        <div class="col-lg-4 visible-lg-block">第1行第1列</div>
        <div class="col-lg-4 visible-lg-inline">第1行第2列</div>
        <div class="col-lg-4 visible-lg-inline-block">第1行第3列</div>
    </div>

    <div class="row">
        <div class="col-lg-4 visible-md-block">第2行第1列</div>
        <div class="col-lg-4 visible-md-inline">第2行第2列</div>
        <div class="col-lg-4 visible-md-inline-block">第2行第3列</div>
    </div>

    <div class="row">
        <div class="col-lg-4 hidden-lg">第3行第1列</div>
    </div>
</div>
visible      显示             
hidden       隐藏
样式col-lg-4 hidden-lg，当宽度小于lg的时候，这个样式就会失效，就会显示出第3行第1列。

打印样式

<div class="container">
    <div class="row">
        <div class="col-lg-4 visible-print-block">第1行第1列</div>
        <div class="col-lg-4 visible-print-inline">第1行第2列</div>
        <div class="col-lg-4 visible-print-inline-block">第1行第3列</div>
    </div>

    <div class="row">
        <div class="col-lg-4 hidden-print">第2行第1列</div>
    </div>
</div>
visible-print           只有在打印的时候显示
hidden-print             打印的时候不显示
visible-print-block      打印时候显示为块状元素
当在同一个屏幕宽度范围内，设置了栅格化的大小，那么再设置inline或者block无效。也就是说栅格化的优先级比内联或者块状显示的优先级要高。

字体

<div class="container">
    <div class="row">
        <span class="glyphicon glyphicon-star" style="font-size: 40px; color: red;"></span>
    </div>

    <button class="btn btn-danger">
        <span class="glyphicon glyphicon-camera" style="color: #000;"></span>
        michael
    </button>
</div>

按钮组

<div class="btn-group">
    <button class="btn btn-primary">michael</button>
    <button class="btn btn-success">michael</button>
    <button class="btn btn-info">michael</button>
</div>
<div class="btn-group btn-group-md">
    <button class="btn btn-primary">michael</button>
    <button class="btn btn-success">michael</button>
    <button class="btn btn-info">michael</button>
</div>
<div class="btn-group-vertical">
    <button class="btn btn-primary">michael</button>
    <button class="btn btn-success">michael</button>
    <button class="btn btn-info">michael</button>
</div>



<div class="btn-group btn-group-justified">
    <a href="#" class="btn btn-primary">michael</a>
    <a href="#" class="btn btn-success">michael</a>
    <a href="#" class="btn btn-info">michael</a>
</div>
<!--btn-group-justified将这个button组平铺为屏幕宽度的百分之百-->






<div class="row" style="margin-top: 10px;">
    <div class="btn-group">
        <button class="btn btn-primary">michael</button>
        <button class="btn btn-primary"><span class="caret"></span></button>
    </div>
</div>
<div class="row" style="margin-top: 10px;">
    <div class="btn-group dropup">     <!--caret三角形会朝上显示。-->
        <button class="btn btn-primary">michael</button>
        <button class="btn btn-primary"><span class="caret"></span></button>
    </div>
</div>

下拉菜单

<div class="dropdown">
    <button style=' width: 160px;' class="btn btn-primary" data-toggle="dropdown">welcome</button>

    <ul class="dropdown-menu">
        <li><a href="#">html</a></li>
        <li><a href="#">css</a></li>
        <li><a href="#">javascript</a></li>
        <li><a href="#">less</a></li>
        <li><a href="#">bootstrap</a></li>
    </ul>
</div>

下拉菜单的样式

<div class="container">
    <div class="row">
        <div class="col-lg-4">
            <div class="dropdown open">
                <button class="btn btn-default btn-block" data-toggle="dropdown">michael <span class="caret"></span></button>

                <ul class="dropdown-menu dropdown-menu-right">
                    <li><a href="#">html</a></li>
                    <li><a href="#">css</a></li>
                    <li><a href="#">javascript</a></li>
                    <li><a href="#">less</a></li>
                    <li><a href="#">bootstrap</a></li>
                </ul>
            </div>
        </div>
        <div class="col-lg-4" style="margin-top: 150px;">
            <div class="dropup">
                <button class="btn btn-default" data-toggle="dropdown">michael <span class="caret"></span></button>

                <ul class="dropdown-menu">
                    <li><a href="#">html</a></li>
                    <li><a href="#">css</a></li>
                    <li><a href="#">javascript</a></li>
                    <li><a href="#">less</a></li>
                    <li><a href="#">bootstrap</a></li>
                </ul>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="dropdown">
                <button class="btn btn-default" data-toggle="dropdown">michael <span class="caret"></span></button>

                <ul class="dropdown-menu">
                    <li class="dropdown-header text-center"><a href="#"> michael </a></li>
                    <li><a href="#">html</a></li>
                    <li><a href="#">css</a></li>
                    <li><a href="#">javascript</a></li>
                    <li><a href="#">less</a></li>
                    <li><a href="#">bootstrap</a></li>
                    <li class="divider"></li>
                    <li class="dropdown-header text-center"><a href="#">后端</a></li>
                    <li><a href="#">php</a></li>
                    <li><a href="#">java</a></li>
                    <li class="disabled"><a href="#">.net</a></li>
                </ul>
            </div>
        </div>

    </div>
</div>

输入框组

<div class="container">
    <div class="row">
        <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" />
        </div>
    </div>

    <!--输入框组的尺寸-->
    <div class="row" style="margin-top: 10px;">
        <div class="input-group input-group-lg">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" />
        </div>

        <div class="input-group input-group-md">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" />
        </div>
    </div>


    <!--额外内容里放的是checkbox-->
    <div class="row" style="margin-top: 10px;">
        <div class="input-group">
            <span class="input-group-addon">
                <input type="checkbox" />
            </span>
            <input type="text" class="form-control" />
        </div>
    </div>

    <!--额外内容里放的是radio-->
    <div class="row" style="margin-top: 10px;">
        <div class="input-group">
            <span class="input-group-addon">
                <input type="radio" />
            </span>
            <input type="text" class="form-control" />
        </div>
    </div>

    <!--额外内容里放的是按钮-->
    <div class="row" style="margin-top: 10px;">
        <div class="input-group">
            <input type="text" class="form-control" />
            <span class="input-group-btn">
                <button type="button" class="btn btn-default">搜索</button>
            </span>

        </div>
    </div>


    <!--额外内容里放的是按钮-->
    <div class="row" style="margin-top: 10px;">
        <div class="input-group">
            <div class="input-group-btn">
                    <button class="btn btn-default" data-toggle="dropdown">michael <span class="caret"></span></button>

                    <ul class="dropdown-menu">
                        <li><a href="#">html</a></li>
                        <li><a href="#">css</a></li>
                        <li><a href="#">javascript</a></li>
                        <li><a href="#">less</a></li>
                        <li><a href="#">bootstrap</a></li>
                    </ul>

            </div>
            <input type="text" class="form-control" />
        </div>
    </div>

</div>

导航

<div class="container">
<div class="row">
    <ul class="nav nav-tabs">
        <li><a href="#">michael</a></li>
        <li class="active"><a href="#">michael</a></li>
        <li><a href="#">michael</a></li>
    </ul>
</div>

<!--胶囊式 nav-pills-->
<div class="row" style="margin-top: 10px;">
    <ul class="nav nav-pills">
        <li><a href="#">michael</a></li>
        <li class="active"><a href="#">michael</a></li>
        <li><a href="#">michael</a></li>
    </ul>
</div>

<!--竖着排 nav-stacked-->
<div class="row" style="margin-top: 10px;">
    <ul class="nav nav-pills nav-stacked">
        <li><a href="#">michael</a></li>
        <li class="active"><a href="#">michael</a></li>
        <li><a href="#">michael</a></li>
    </ul>
</div>


<!--两端对齐 nav-stacked-->
<div class="row" style="margin-top: 10px;">
    <ul class="nav nav-pills nav-justified">
        <li><a href="#">michael</a></li>
        <li class="active"><a href="#">michael</a></li>
        <li><a href="#">michael</a></li>
    </ul>
</div>


<!--导航中放下拉菜单 -->
<div class="row" style="margin-top: 10px;">
    <ul class="nav nav-tabs">
        <li><a href="#">michael</a></li>
        <li class="active"><a href="#">michael</a></li>
        <li><a href="#">michael</a></li>
        <li>
            <a href="#" data-toggle="dropdown">michael课程 <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">html</a></li>
                <li><a href="#">css</a></li>
                <li><a href="#">javascript</a></li>
                <li><a href="#">less</a></li>
                <li><a href="#">bootstrap</a></li>
            </ul>
        </li>
    </ul>
</div>
</div>
nav-stacked 会将一列铺满屏幕，即宽设置百分百
nav-justified 会将多列在一行内铺满，即把整个导航栏设置百分百

选项卡

<style>
    .tab1{
        border: 1px solid #ddd;
        border-top: none;
        padding: 100px;
        border-radius: 0 0 5px 5px;
    }
</style>

<div class="container">
    <div class="row">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#con1" data-toggle="tab">michael</a></li>
            <li><a href="#con2" data-toggle="tab">michael</a></li>
            <li><a href="#con3" data-toggle="tab">leon</a></li>
        </ul>
        <div class="tab-content">
            <div id="con1" class="tab-pane active">html</div>
            <div id="con2" class="tab-pane">css</div>
            <div id="con3" class="tab-pane">js</div>
        </div>
    </div>


    <div class="row">
        <div class="col-lg-4">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#con4" data-toggle="tab">michael</a></li>
                <li><a href="#con5" data-toggle="tab">michael</a></li>
                <li><a href="#con6" data-toggle="tab">leon</a></li>
            </ul>
            <div class="tab-content tab1">
                <div id="con4" class="tab-pane active">html</div>
                <div id="con5" class="tab-pane">css</div>
                <div id="con6" class="tab-pane">js</div>
            </div>
        </div>
    </div>
</div>

导航条

<div class="container">
    <!--默认样式的导航条-->
    <nav class="navbar navbar-default">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">111</a></li>
            <li><a href="#">111</a></li>
            <li><a href="#">111</a></li>
        </ul>
    </nav>

    <!--黑色的导航条-->
    <nav class="navbar navbar-inverse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">222</a></li>
            <li><a href="#">222</a></li>
            <li><a href="#">222</a></li>
        </ul>
    </nav>

    <!--黑色的导航条-->
    <nav class="navbar navbar-inverse navbar-static-top">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">333</a></li>
            <li><a href="#">333</a></li>
            <li><a href="#">333</a></li>
        </ul>
    </nav>

    <!--固定在上边的导航条-->
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">444</a></li>
            <li><a href="#">444</a></li>
            <li><a href="#">444</a></li>
        </ul>
    </nav>

    <!--固定在上边的导航条-->
    <nav class="navbar navbar-default navbar-fixed-bottom">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">555</a></li>
            <li><a href="#">555</a></li>
            <li><a href="#">555</a></li>
        </ul>
    </nav>
</div>
navbar                  导航条的基础样式
nav navbar-nav          导航条里菜单的固定样式组合class
navbar-inverse          导航条的样式为黑色，只起到这个作用
navbar-static-top       导航条为直角，只起到这个作用
navbar-fixed-top        导航条固定在最上边，并且设置宽度为整个屏幕的尺寸
navbar-fixed-bottom     导航条固定在最下边，不会随滚动的滚动而走，并且设置宽度为整个屏幕的尺寸

路径导航与分页

<div class="container">
    <div class="row">
        <ul class="breadcrumb">
            <li><a href="#">bootstrap</a></li>
            <li><a href="#">dist</a></li>
            <li class="active">css</li>
        </ul>
    </div>
</div>



<div class="container">
    <div class="row">
        <ul class="pagination">
            <li class="disabled"><a href="#"><<</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li class="active"><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">>></a></li>
        </ul>
    </div>

    <div class="row">
        <ul class="pagination pagination-lg">
            <li class="disabled"><a href="#"><<</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li class="active"><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">>></a></li>
        </ul>
    </div>

    <!--翻页-->
    <ul class="pager">
        <li><a href="#">&larr;上一页</a></li>
        <li><a href="#">下一页&rarr;</a></li>
    </ul>
    <ul class="pager">
        <li class="previous disabled"><a href="#">&larr;上一页</a></li>
        <li class="next"><a href="#">下一页&rarr;</a></li>
    </ul>
</div>

标记与巨幕

<div class="container">
    <div class="jumbotron">
        <h1>leon学院</h1>
        <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
        <p><a href="#" class="btn btn-primary">Selina</a></p>
    </div>
</div>


<div class="jumbotron">
    <div class="container">
        <h1>leon学院</h1>
        <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
        <p><a href="#" class="btn btn-primary">Selina</a></p>
    </div>
</div>

缩略图与警告框

<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <a href="http://www.apeclass.com" class="thumbnail">
                <img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png"/>
            </a>
        </div>
        <div class="col-lg-3">
            <a href="http://www.apeclass.com" class="thumbnail">
                <img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png"/>
            </a>
        </div>
    </div>


    <!--还可以把thumbnail给父级，会有不同的样式-->
    <div class="row">
        <div class="col-lg-4">
            <div class="thumbnail">
                <a href="http://www.apeclass.com">
                    <img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png"/>
                </a>
                <div class="caption">
                    <h3>leon学院</h3>
                    <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
                    <p><a href="#" class="btn btn-primary">Selina</a> <a href="#" class="btn btn-danger">leon</a></p>
                </div>
            </div>
        </div>
    </div>
</div>



<!-----------------警告框--------------------->
<div class="container">
    <div class="row">
        <p class="alert alert-success">这里是一个警告框！！！！<button class="close" data-dismiss="alert">&times;</button></p>
        <p class="alert alert-info">这里是一个警告框！！！！</p>
        <p class="alert alert-warning">这里是一个警告框！！！！</p>
        <p class="alert alert-danger">这里是一个警告框！！！！</p>
    </div>
</div>

进度条

<div class="container">
    <div class="row">
        <div class="progress">
            <div class="progress-bar" style="width: 60%;">60%</div>
        </div>

        <div class="progress">
            <div class="progress-bar progress-bar-info" style="width: 36%;">36%</div>
        </div>

        <div class="progress">
            <div class="progress-bar progress-bar-warning" style="width: 70%;">70%</div>
        </div>

        <div class="progress">
            <div class="progress-bar progress-bar-danger " style="width: 20%;">20%</div>
        </div>


        <!--带条纹的进度条-->
        <div class="progress">
            <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 20%;">20%</div>
        </div>

        <!--带堆叠效果的进度条-->
        <div class="progress">
            <div class="progress-bar" style="width: 10%;">10%</div>
            <div class="progress-bar progress-bar-info" style="width: 20%;">36%</div>
            <div class="progress-bar progress-bar-warning" style="width: 30%;">70%</div>
            <div class="progress-bar progress-bar-danger" style="width: 20%;">20%</div>
            <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 10%;">20%</div>
        </div>
    </div>
</div>

图文混排

<!--
    media               图文混排
    media-left          图片的区域，在左边显示
    media-right         图片的区域，在右边显示
    media-body          内容区域
    media-heading       内容区域里的标题
    media-middle        图片垂直对齐
    media-bottom        图片靠下边对齐
-->
<div class="container">
    <div class="row">
        <div class="media">
            <a href="http://www.apeclass.com" class="media-left">
                <img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png" width="100"/>
            </a>
            <div class="media-body">
                <h4 class="media-heading">leon学院</h4>
                <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
                <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
                <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
                <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
            </div>
        </div>
    </div>


    <!--图片在右边显示-->
    <div class="row">
        <div class="media">
            <div class="media-body">
                <h4 class="media-heading">leon学院</h4>
                <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
                <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
                <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
                <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
            </div>
            <a href="http://www.apeclass.com" class="media-right">
                <img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png" width="100"/>
            </a>
        </div>
    </div>

    <!--左右都有图片-->
    <div class="row">
        <div class="media">
            <a href="http://www.apeclass.com" class="media-left">
                <img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png" width="100"/>
            </a>
            <div class="media-body">
                <h4 class="media-heading">leon学院</h4>
                <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
                <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
                <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
                <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
            </div>
            <a href="http://www.apeclass.com" class="media-right">
                <img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png" width="100"/>
            </a>
        </div>
    </div>


    <!--右侧内容又嵌套了一个media-->
    <div class="row">
        <div class="media">
            <a href="http://www.apeclass.com" class="media-left">
                <img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png" width="100"/>
            </a>
            <div class="media-body">
                <h4 class="media-heading">leon学院</h4>
                <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
                <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
                <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>

                <div class="media">
                    <a href="http://www.apeclass.com" class="media-left">
                        <img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png" width="100"/>
                    </a>
                    <div class="media-body">
                        <h4 class="media-heading">leon学院</h4>
                        <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
                        <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
                        <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>


                    </div>
                </div>


            </div>
        </div>
    </div>

</div>


<div class="row">
    <div class="media">
        <div class="media-body">
            <h4 class="media-heading">leon学院</h4>
            <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
            <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
            <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
            <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
            <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
            <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
            <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
        </div>
        <a href="http://www.apeclass.com" class="media-right media-bottom">
            <img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png" width="100"/>
        </a>
    </div>
</div>

列表组

<!--
    list-group          列表组,给ul添加
    list-group-item     列表项,给li添加
-->
<div class="container">
    <div class="row">
        <ul class="list-group">
            <li class="list-group-item">html</li>
            <li class="list-group-item">css</li>
            <li class="list-group-item">javascript</li>
            <li class="list-group-item">html5/css3</li>
            <li class="list-group-item">less/sass</li>
            <li class="list-group-item">bootstrap</li>
        </ul>
    </div>

    <!--给每个列表项添加了一个标记，那这个标记就会自动跑到右侧-->
    <div class="row">
        <ul class="list-group">
            <li class="list-group-item">html<span class="badge">12</span></li>
            <li class="list-group-item">css<span class="badge">34</span></li>
            <li class="list-group-item">javascript<span class="badge">52</span></li>
            <li class="list-group-item">html5/css3<span class="badge">35</span></li>
            <li class="list-group-item">less/sass<span class="badge">27</span></li>
            <li class="list-group-item">bootstrap<span class="badge">7</span></li>
        </ul>
    </div>


    <!--用a标签做的列表组，可以添加激活状态，禁用状态，背景色-->
    <div class="row">
        <div class="list-group">
            <a href="#" class="list-group-item active">html<span class="badge">12</span></a>
            <a href="#" class="list-group-item disabled">css<span class="badge">34</span></a>
            <a href="#" class="list-group-item list-group-item-info">javascript<span class="badge">52</span></a>
            <a href="#" class="list-group-item list-group-item-warning">html5/css3<span class="badge">35</span></a>
            <a href="#" class="list-group-item list-group-item-danger">less/sass<span class="badge">27</span></a>
            <a href="#" class="list-group-item list-group-item-success">bootstrap<span class="badge">7</span></a>
        </div>
    </div>

    <!--添加标题与段落的列表组,列表组标题：list-group-item-heading，列表组内容：list-group-item-text-->
    <div class="row">
        <ul class="list-group">
            <li class="list-group-item active">
                <h4 class="list-group-item-heading">leon学院</h4>
                <p class="list-group-item-text">leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
            </li>
            <li class="list-group-item">
                <h4 class="list-group-item-heading">leon学院</h4>
                <p class="list-group-item-text">leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
            </li><li class="list-group-item">
                <h4 class="list-group-item-heading">leon学院</h4>
                <p class="list-group-item-text">leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
            </li><li class="list-group-item">
                <h4 class="list-group-item-heading">leon学院</h4>
                <p class="list-group-item-text">leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
            </li>
        </ul>
    </div>
</div>

面板

<div class="container">
    <div class="row">
        <div class="panel panel-warning">
            <div class="panel-heading">
                <h3 class="panel-title">leon学院</h3>
            </div>
            <div class="panel-body">
                <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
            </div>
        </div>
    </div>

    <!--面板与列表组结合起来-->
    <div class="row">
        <div class="panel panel-danger">
            <div class="panel-heading">
                <h3 class="panel-title">leon学院</h3>
            </div>
            <div class="panel-body">
                <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
            </div>

            <ul class="list-group">
            <li class="list-group-item">html</li>
            <li class="list-group-item">css</li>
            <li class="list-group-item">javascript</li>
            <li class="list-group-item">html5/css3</li>
            <li class="list-group-item">less/sass</li>
            <li class="list-group-item">bootstrap</li>
        </ul>
        </div>
    </div>
</div>

弹出层

<!--
    注意
    1、弹出层必需放在body里
    2、弹出层里面不能再嵌套别的层
    3、弹出层出来以后，页面的滚动条会被覆盖


    modal                   弹出层父级
    modal-dialog                弹出层
    modal-content           弹出层的内容区域
    modal-header                弹出层的头部区域
    modal-body              弹出层的主体区域
    modal-footer                弹出层的底部区域
    fade                        让弹出层有一个运动的效果
-->
<div class="container">
    <div class="row">
        <button class="btn btn-primary" data-toggle="modal" data-target=".myModal1">弹出一个小层</button>
        <button class="btn btn-primary" data-toggle="modal" data-target=".myModal2">弹出一个大层</button>
        <button class="btn btn-primary" data-toggle="modal" data-target=".myModal3">弹出一个小小的层</button>
    </div>
</div>

<div class="modal fade myModal1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h4>leon学院</h4>
            </div>
            <div class="modal-body">
                <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
                <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>


<div class="modal myModal2">
    <div class="modal-dialog  modal-lg"><!--modal-lg是用来设置弹出层的尺寸，它必需给modal-dialog的层-->
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h4>leon学院</h4>
            </div>
            <div class="modal-body">
                <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
                <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>

<div class="modal myModal3">
    <div class="modal-dialog  modal-sm"><!--modal-lg是用来设置弹出层的尺寸，它必需给modal-dialog的层-->
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h4>leon学院</h4>
            </div>
            <div class="modal-body">
                <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
                <p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>

滚动监听

<div class="container">
    <div class="row">
        <div class="col-lg-9" style="padding-bottom: 500px;">
            <div class="section">
                <h2 id="gaishu">概览</h2>
                <h3 id="dange">单个还是全部引入</h3>
                <p>JavaScript 插件可以单个引入（使用 Bootstrap 提供的单个 <code>*.js</code> 文件），或者一次性全部引入（使用 <code>bootstrap.js</code> 或压缩版的 <code>bootstrap.min.js</code>）。</p>
                <p>建议使用压缩版的 JavaScript 文件bootstrap.js 和 bootstrap.min.js 都包含了所有插件，你在使用时，只需选择一个引入页面就可以了。</p>
                <p>插件之间的依赖关系某些插件和 CSS 组件依赖于其它插件。如果你是单个引入每个插件的，请确保在文档中检查插件之间的依赖关系。注意，所有插件都依赖 jQuery （也就是说，jQuery必须在所有插件之前引入页面）。 bower.json 文件中列出了 Bootstrap 所支持的 jQuery 版本。</p>
                <h3 id="datashuxing">data 属性</h3>
                <p>你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API，也应该是你的首选方式。</p>
                <p>话又说回来，在某些情况下可能需要将此功能关闭。因此，我们还提供了关闭 data 属性 API 的方法，即解除以 data-api 为命名空间并绑定在文档上的事件。就像下面这样：</p>
                <p>
                    <pre>$(document).off('.data-api')</pre>
                </p>
                <p>另外，如果是针对某个特定的插件，只需在 data-api 前面添加那个插件的名称作为命名空间，如下：</p>
                <p>
                    <pre>$(document).off('.alert.data-api')</pre>
                </p>
                <h3 id="biancheng">编程方式的 API</h3>
                <p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。</p>
                <p>$('.btn.danger').button('toggle').addClass('fat')</p>
                <p>所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：</p>
                <h3 id="bimian">避免命名空间冲突</h3>
                <p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。</p>
                <p>$('.btn.danger').button('toggle').addClass('fat')</p>
                <p>所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：</p>
                <h3 id="shijian">事件</h3>
                <p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。</p>
                <p>$('.btn.danger').button('toggle').addClass('fat')</p>
                <p>所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：</p>
                <h3 id="weidui">未对禁用 JavaScript 的浏览器提供补救措施</h3>
                <p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。</p>
                <p>$('.btn.danger').button('toggle').addClass('fat')</p>
                <p>所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：</p>
            </div>

            <div class="section">
                <h2 id="guodu">过渡效果</h2>
                <h3 id="guanyu">关于过渡效果</h3>
                <p>JavaScript 插件可以单个引入（使用 Bootstrap 提供的单个 <code>*.js</code> 文件），或者一次性全部引入（使用 <code>bootstrap.js</code> 或压缩版的 <code>bootstrap.min.js</code>）。</p>
                <p>建议使用压缩版的 JavaScript 文件bootstrap.js 和 bootstrap.min.js 都包含了所有插件，你在使用时，只需选择一个引入页面就可以了。</p>
                <p>插件之间的依赖关系某些插件和 CSS 组件依赖于其它插件。如果你是单个引入每个插件的，请确保在文档中检查插件之间的依赖关系。注意，所有插件都依赖 jQuery （也就是说，jQuery必须在所有插件之前引入页面）。 bower.json 文件中列出了 Bootstrap 所支持的 jQuery 版本。</p>
                <h3 id="baohan">包含的内容</h3>
                <p>你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API，也应该是你的首选方式。</p>
                <p>话又说回来，在某些情况下可能需要将此功能关闭。因此，我们还提供了关闭 data 属性 API 的方法，即解除以 data-api 为命名空间并绑定在文档上的事件。就像下面这样：</p>
                <p>
                    <pre>$(document).off('.data-api')</pre>
                </p>
                <p>另外，如果是针对某个特定的插件，只需在 data-api 前面添加那个插件的名称作为命名空间，如下：</p>
                <p>
                    <pre>$(document).off('.alert.data-api')</pre>
                </p>
            </div>

            <div class="section">
                <h2 id="shili">实例</h2>
                <h3 id="jingtai">静态实例</h3>
                <p>JavaScript 插件可以单个引入（使用 Bootstrap 提供的单个 <code>*.js</code> 文件），或者一次性全部引入（使用 <code>bootstrap.js</code> 或压缩版的 <code>bootstrap.min.js</code>）。</p>
                <p>建议使用压缩版的 JavaScript 文件bootstrap.js 和 bootstrap.min.js 都包含了所有插件，你在使用时，只需选择一个引入页面就可以了。</p>
                <p>插件之间的依赖关系某些插件和 CSS 组件依赖于其它插件。如果你是单个引入每个插件的，请确保在文档中检查插件之间的依赖关系。注意，所有插件都依赖 jQuery （也就是说，jQuery必须在所有插件之前引入页面）。 bower.json 文件中列出了 Bootstrap 所支持的 jQuery 版本。</p>
                <h3 id="dongtai">动态实例</h3>
                <p>你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API，也应该是你的首选方式。</p>
                <p>话又说回来，在某些情况下可能需要将此功能关闭。因此，我们还提供了关闭 data 属性 API 的方法，即解除以 data-api 为命名空间并绑定在文档上的事件。就像下面这样：</p>
                <p>
                    <pre>$(document).off('.data-api')</pre>
                </p>
                <p>另外，如果是针对某个特定的插件，只需在 data-api 前面添加那个插件的名称作为命名空间，如下：</p>
                <p>
                    <pre>$(document).off('.alert.data-api')</pre>
                </p>
                <h3 id="kexuan">可选尺寸</h3>
                <p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。</p>
                <p>$('.btn.danger').button('toggle').addClass('fat')</p>
                <p>所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：</p>
                <h3 id="jinzhi">禁止动画效果</h3>
                <p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。</p>
                <p>$('.btn.danger').button('toggle').addClass('fat')</p>
                <p>所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：</p>
                <h3 id="yongfa">用法</h3>
                <p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。</p>
                <p>$('.btn.danger').button('toggle').addClass('fat')</p>
                <p>所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：</p>
                <h3 id="tongguo1">通过 data 属性</h3>
                <p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。</p>
                <p>$('.btn.danger').button('toggle').addClass('fat')</p>
                <p>所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：</p>
                <h3 id="tongguo">通过 JavaScript 调用</h3>
                <p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。</p>
                <p>$('.btn.danger').button('toggle').addClass('fat')</p>
                <p>所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：</p>
                <h3 id="canshu">参数</h3>
                <p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。</p>
                <p>$('.btn.danger').button('toggle').addClass('fat')</p>
                <p>所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：</p>
                <h3 id="fangfa">方法</h3>
                <p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。</p>
                <p>$('.btn.danger').button('toggle').addClass('fat')</p>
                <p>所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：</p>
                <h3 id="shijian2">事件</h3>
                <p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。</p>
                <p>$('.btn.danger').button('toggle').addClass('fat')</p>
                <p>所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：</p>
            </div>

        </div>
        <div class="col-lg-3">
            <div id="subNav" class="navbar-collapse">
                <ul class="nav">
                    <li>
                        <a href="#gaishu" class="bold">概览</a>
                        <ul class="nav">
                            <li><a href="#dange">单个还是全部引入</a></li>
                            <li><a href="#datashuxing">data 属性</a></li>
                            <li><a href="#biancheng">编程方式的 API</a></li>
                            <li><a href="#bimian">避免命名空间冲突</a></li>
                            <li><a href="#shijian">事件</a></li>
                            <li><a href="#weidui">未对禁用 JavaScript 的浏览器提供补救措施</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="#guodu" class="bold">过渡效果</a>
                        <ul class="nav">
                            <li><a href="#guanyu">关于过渡效果</a></li>
                            <li><a href="#baohan">包含的内容</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="#shili" class="bold">实例</a>
                        <ul class="nav">
                            <li><a href="#jingtai">静态实例</a></li>
                            <li><a href="#dongtai">动态实例</a></li>
                            <li><a href="#kexuan">可选尺寸</a></li>
                            <li><a href="#jinzhi">禁止动画效果</a></li>
                            <li><a href="#yongfa">用法</a></li>
                            <li><a href="#tongguo1">通过 data 属性</a></li>
                            <li><a href="#tongguo">通过 JavaScript 调用</a></li>
                            <li><a href="#canshu">参数</a></li>
                            <li><a href="#fangfa">方法</a></li>
                            <li><a href="#shijian2">事件</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</div>

提示标签

<div class="container">
    <div class="row">
        <p><a href="#" class="tool" data-toggle="tooltip" data-placment="top" title="leon学院">leon学院</a>leon michael leon学院leon michael leon学院leon michael leon学院leon michael leon学院leon michael <a href="#" class="tool" data-toggle="tooltip" data-placement="right" title="leon学院">leon学院</a>leon michael leon学院leon michael <a href="#" class="tool" data-toggle="tooltip" data-placement="bottom" title="leon学院">leon学院</a>leon michael leon学院leon michael leon学院leon michael <a  href="#" class="tool" data-toggle="tooltip" data-placement="left" title="leon学院">leon学院</a>leon michael </p>
    </div>

    <div class="row">
        <button class="btn btn-primary tool" data-toggle="tooltip" title="leon" data-placement="top">leon</button><br /><br />
        <button class="btn btn-primary tool" data-toggle="tooltip" title="leon" data-placement="right">leon</button><br /><br />
        <button class="btn btn-primary tool" data-toggle="tooltip" title="leon" data-placement="bottom">leon</button><br /><br />
        <button class="btn btn-primary tool btnShow" data-toggle="tooltip" title="leon" data-placement="left">leon</button>
    </div>
</div>

提示框

<div class="container">
    <div class="row">
        <button class="btn btn-danger" data-toggle="popover" data-placement="top" title="这是弹框的标题" data-content="这是弹框的内容，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长">点击我给你弹出一个框</button><br /><br />
        <button class="btn btn-danger" data-toggle="popover" data-placement="right" title="这是弹框的标题" data-content="这是弹框的内容，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长">点击我给你弹出一个框</button><br /><br />
        <button class="btn btn-danger" data-toggle="popover" data-placement="bottom" title="这是弹框的标题" data-content="这是弹框的内容，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长">点击我给你弹出一个框</button><br /><br />
        <button class="btn btn-danger btnShow" data-toggle="popover" data-placement="left" title="这是弹框的标题" data-content="这是弹框的内容，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长">点击我给你弹出一个框</button>
    </div>
</div>

折叠菜单

<div class="container">
    <div class="row">
        <div class="col-lg-5">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <a href="#" data-toggle="collapse" data-target="#con">leon学院</a>
                    </h3>
                </div>
                <div id="con" class="in">
                    <div class="panel-body">
                        leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--------------------一组折叠菜单------------------------>
<div class="container">
    <div class="row">
        <div class="col-lg-5">
            <!--1、把所有的面板都放到一个父级里，并且给父级添加一个panel-group，还有一个id-->
            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <!--2、给要点击的元素添加一个data-parent属性，并让他的值与父级的id一样-->
                        <h3 class="panel-title" data-parent="#accordion" data-toggle="collapse" data-target="#con1">leon学院</h3>
                    </div>
                    <!--3、需要给内容区域添加一个class为collapse-->
                    <div id="con1" class="collapse in">
                        <div class="panel-body">
                            leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael 
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title" data-parent="#accordion" data-toggle="collapse" data-target="#con2">leon学院</h3>
                    </div>
                    <div id="con2" class="collapse">
                        <div class="panel-body">
                            leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael 
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
1、给要点击的那个元素添加一个data-toggle="collapse"
并且需要给它添加一个data-target，让它的值与对应的内容区域的id或者class相同
2、给对应的内容区域添加一个id或者class，与点击的元素相对应

注意：
1、内容区域不能有padding值

轮播图

<div class="container">
    <div id="pic" class="carousel slide" data-interval="2000" data-ride="carousel">
        <!--小圆点-->
        <ol class="carousel-indicators">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
        <!--轮播图的图片-->
        <div class="carousel-inner">
            <div class="item active">
                <img src="images/1.jpg"/>
                <div class="carousel-caption">
                    <h3>这里是标题1</h3>
                    <p>这里是内容，非常多非常多</p>
                </div>
            </div>
            <div class="item">
                <img src="images/2.jpg"/>
                <div class="carousel-caption">
                    <h3>这里是标题2</h3>
                    <p>这里是内容，非常多非常多</p>
                </div>
            </div>
            <div class="item">
                <img src="images/3.jpg"/>
                <div class="carousel-caption">
                    <h3>这里是标题3</h3>
                    <p>这里是内容，非常多非常多</p>
                </div>
            </div>
            <div class="item">
                <img src="images/4.jpg"/>
                <div class="carousel-caption">
                    <h3>这里是标题4</h3>
                    <p>这里是内容，非常多非常多</p>
                </div>
            </div>
        </div>
        <!--左右按钮-->
        <a href="#pic" class="carousel-control left" data-slide="prev">&lsaquo;</a>
        <a href="#pic" class="carousel-control right" data-slide="next">&rsaquo;</a>
    </div>
</div>
1、写一个父级，放一个id，和一个carousel的class
slide                   给图片添加运动的效果
data-interval="500"     间隔时间，不要低于400，容易出现问题
data-ride="carousel"        页面一加载后就开始播放
2、小圆点的内容要放在一个class为carousel-indicators的层里
3、图片内容区域要放在一个class为carousel-inner的层里
每一项内容都需要放到一个叫item的层里
这个里面也可以放文字，那需要来一个父级，父级的class为carousel-caption
4、左右按钮按以下的格式写，href里面的值要与父级的id一样
<a href="#pic" class="carousel-control left" data-slide="prev">&lsaquo;</a>
<a href="#pic" class="carousel-control right" data-slide="next">&rsaquo;</a>
OneGoal
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
bootStrap学习
01-25
学习BootStrap，基于BootStrap3.3.7的网页模板
飞腾FT-2000/4或D2000在Ubuntu系统下SM750/768显卡驱动支持
mikezhang52的博客
02-27 3554
飞腾CPU，FT-2000/4，D2000
ffmepg实践系列之--硬解接口实现
wwssttcc的专栏
07-22 984
闲话 知道ffmpeg很久了，可是一直没有深入研究。最近在研究一款显卡的ffmpeg下的硬解，因此想记录下自己研究所得。关于ffmpeg的基本知识，推荐雷神博客，感谢雷神。废话少说，开始填坑。 思路 1.ffmpeg中如何实现硬件解码接口； 2.编译deb包； 3.编译sm768硬解驱动库； 4.测试总结； ffmpeg硬解框架 开始干之前一定要有一个总体框架，有了指导思想，方向就不会错。sm768支持硬件解码，怎么将硬件解码接口提供给ffmpeg，让其支持硬件解码。接下来用smi_h264为例，梳理下流程
SOPHGO SM5智算模组二次开发参考方案
算能开发者社区是一个为开发者提供信息传播、开发交流、技术分享的交流空间。
08-11 1122
SOPHGO SM5智算模组二次开发参考方案
图形显卡_M.2接口也能做显卡，慧荣科技提供图形显示芯片支持
weixin_35627928的博客
01-13 548
在人们的认知中， M.2接口基本都是以小巧，高集成度出现的。主要用于安装M.2形态的固态硬盘，以及NGFF接口的WiFi无线网卡。不过最近，知名板卡厂商华擎旗下的品牌制造商永擎利用M.2插槽，推出了一款使用M.2接口的显卡出来，大大颠覆了对M.2接口的传统认知。这款产品的名字为M.2_VGA，其使用了M.2 2280规格，可以安装在大部分M.2接口上面。也正是采用了M.2接口，所以需要扩展针脚外接...
CUDA的线程块size
DSQ_17的专栏
03-18 1824
前面扯了很多，不过大多都是在讲CUDA 在软体层面的东西；接下来，虽然Heresy 自己也不熟，不过还是来研究一下硬体的部分吧～毕竟要最佳化的时候，好像还是要大概知道一下相关的东西的。这部分主要参考资料是： [Hotball's Hive]GPU 的硬体架构Programming Massively Parallel Processors的Lecture 7 在研究硬体架构前，
Bootstrap学习笔记
06-25
这个是我的前端学习笔记Bootstrap
bootstrap学习笔记之初识bootstrap
10-22
Bootstrap是一款目前非常流行的前端框架，简单的说，就是html,css,javascript的工具集。本文给大家介绍bootstrap学习笔记之初识bootstrap，感兴趣的朋友一起学习吧
Bootstrap 学习分享
09-28
Bootstrap 是由Twitter 工程师推出的基于HTML，CSS，JAVASCRIPT的简洁灵活的流行前端框架
SM16736手册
09-26
SM16736手册 硬件描述以及驱动协议。SM16726 SM16716 都是兼容的。 SM16736手册 硬件描述以及驱动协议。SM16726 SM16716 都是兼容的。
SM768集成显卡手册
03-30
该文档是SM768显卡的硬件开发参考手册，SM768芯片是慧荣科技推出的图形显示芯片，透过该公司的内容自我调整技术 （Content Adaptive Technology；CAT），可降低CPU （中央处理器）20%～65％的使用率，不但解决了系统的功耗问题，同时也让显示效能大幅提升。
响应式布局总结
热门推荐
LOxia的博客
03-28 1万+
rem适配布局，内含阿里百秀案例代码，bootstrap内容讲解
sm750显卡驱动linux版,M.2接口也能做显卡，慧荣科技提供图形显示芯片支持
weixin_39649405的博客
05-15 284
原标题：M.2接口也能做显卡，慧荣科技提供图形显示芯片支持在人们的认知中， M.2接口基本都是以小巧，高集成度出现的。主要用于安装M.2形态的固态硬盘，以及NGFF接口的WiFi无线网卡。不过最近，知名板卡厂商华擎旗下的品牌制造商永擎利用M.2插槽，推出了一款使用M.2接口的显卡出来，大大颠覆了对M.2接口的传统认知。 这款产品的名字为M.2_VGA，其使用了M.2 2280规格，可以安装在大部分...
KTM5000 Type-c /DP1.4 MST HUB芯片及方案
m0_72277174的博客
10-19 1570
KTM5000 Type-c /DP1.4 MST HUB芯片方案
官宣，麒麟信安服务器操作系统V3.4-5正式发布
weixin_49546901的博客
05-23 1029
近日，麒麟信安服务器操作系统V3.4-5正式对外发布！ 此版本是基于openEuler 20.03 LTS SP3研发的商业发行版，致力于为企业级的云计算、服务器虚拟化、分布式存储、集群管理、容器、数据库、大数据、人工智能、安全加固等平台提供安全可靠的运行底座，是一款具有高安全性、高可靠性、高性能的自研服务器操作系统。 在延续前述版本高安全、高可用、实时性、兼容性等优点的基础之上，麒麟信安服务器操作系统V3.4-5结合行业场景实际需求，主要进行了如下功能新增和优化改良，确保用户的服务器生产环境持续可用和稳
bootstrap 学习
最新发布
05-26
4. 学习Bootstrap的扩展库：Bootstrap有许多扩展库，例如Bootstrap Material Design、BootstrapVue等，可以进一步扩展Bootstrap的功能和应用范围。你可以学习这些扩展库，并尝试将其应用到你的项目中。 5. 查阅...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值