Bootstrap 基本使用

该框架提供友好的电脑版和移动设备版的页面布局配置，在CSS样式方面十分突出，要求文件必须为HTML5类型，并且在IE7以上环境使用
注：
本文介绍的是3.0+版本，目前bootstrap已经发展到4.0+，可能在部分样式上存在不兼容问题，不过在使用方法上都大同小异，因此可以当做入门了解进行学习，具体内容参见官方文档为准：
3.0+版本文档：文档地址
4.0+版本文档：中文地址 | 英文地址

环境导入

需要引入相关的CSS和JS文件，由于其基于jQuery，所以也需要提前引入jQuery

<!--  核心 CSS 文件-bootstrap.min.css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" >

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" >

<!-- 引入jquery -->
<script src="http://code.jquery.com/jquery-3.4.1.js" ></script>

<!-- 核心 JavaScript 文件-bootstrap.min.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" ></script>

使用方法

该框架主要针对响应式的CSS样式，因此使用时主要通过对标签设置对应的类属性来实现样式的设置，说白了，就是框架里提供了很多class的样式，你只要在对应的标签里使用他提供的类就可以得到想要的效果了

手机界面兼容

如果想要在手机界面自动调节友好样式，则需要在文件当中添加下面的标签：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

栅格系统

在Bootstrap框架当中，每列基本被分为12格，要使用栅格系统需要在该<div>标签当中设置class="container"，而对于每一行则用<div class="row">包着，内部由于有12格，因此可以结合具体情况分配比例，举例：

<div class="container">
    <!-- 定义栅格系统 -->
    <div class="row">
        <!-- 定义一行 -->
        <div class="col-md-4">
            <!-- 定义了三列，每列占3格 -->
            <img src="timg.jpg" width="300px">
        </div>
        <div class="col-md-4">
            <img src="timg.jpg" width="300px">
        </div>
        <div class="col-md-4">
            <img src="timg.jpg" width="300px">
        </div>
    </div>
    <div class="row">
        <!-- 定义了4列，分别占6、3、2、1格 -->
        <div class="col-md-6">
            <img src="timg.jpg" width="300px">
        </div>
        <div class="col-md-3">
            <img src="timg.jpg" width="300px">
        </div>
        <div class="col-md-2">
            <img src="timg.jpg" width="300px">
        </div>
        <div class="col-md-1">
            <img src="timg.jpg" width="300px">
        </div>
    </div>
</div>

注：
栅格系统会根据页面尺寸改变样式排列，因此在例如页面打印时，最好要考虑到页面的样式情况来选择，例如希望永远保持水平排列，则可以使用col-xs-数字，具体参考文档：https://v3.bootcss.com/css/#grid-options

列偏移

对于上面的情况如果没用到规定格子数，则一般右边剩下的格子会直接空出来，但是如果想要在规定的地方空出来，比如第二列的左边空出4格，则可以在该列的类中添加一个.col-md-offset-4的类，举例：

<div class="row">
    <div class="col-md-4">
        <img src="timg.jpg" width="300px">
    </div>
    <div class="col-md-4 col-md-offset-4">
        <!-- 第二列的左边空4格 -->
        <img src="timg.jpg" width="300px">
    </div>
</div>

列嵌套

在一个列里，可以再进行嵌套栅格系统，此时被嵌套的列里也拥有12个列，以此类推...

注：
上面在列中用的类前缀是col-md-，其表示当窗口宽度低于970px时会将所有的列分到单独的行中，即变成单列模式。其他还有对窗口控制的类前缀如下：

col-xs-  总是水平排列，不会变成单列模式
col-sm-  750px变单列
col-lg-  1170px变单列

排版

该框架提供了很多的类属性和标签样式，常用如下：
1.标题：<h1>~<h6>中.page-header
2.段落：<p>中.lead
3.黄色标记：<mark>
4.删除线：<del>
5.小字：<small>
6.文本对齐：<p>中.text-left/.text-center/.text-right
7.文本大小写：<p>中.text-lowercase/.text-uppercase/.text-capitalize

代码

代码语句

<code>

代码块

<pre>

键盘标记

<kbd>

表格

表格样式

<table>中.table-表格、.table-striped-条纹、.table-bordered-边框、.table-hover-悬浮时样式，这些样式可以结合使用

表格颜色

<tr>/<td>中.active-灰色背景、.success-绿色背景、.info-蓝色背景、.warning-黄色背景、.danger-红色背景

响应式表格

<div>中.table-responsive-当窗口缩小到一定程度时，横向将会出现滚动条，使用时将其包在对应的<table>外面，使用举例：

<div class="table-responsive">
    <table class="table table-striped">
        <tr class="warning">
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
        </tr>
        <tr>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
        </tr>
        <tr>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
        </tr>
    </table>
</div>

按钮

按钮样式

<button>/<input type="button">等按钮中.btn-灰色按钮、.btn .btn-default-白色按钮、.btn .btn-success-绿色背景、.btn .btn-primary-蓝色背景、.btn .btn-info-浅蓝背景、.btn .btn-warning-黄色背景、.btn .btn-danger-红色背景、.btn .btn-link-超链接背景，举例：

<button class="btn">灰色按钮</button>
<button class="btn btn-default">白色按钮</button>
<button class="btn btn-primary">蓝色按钮</button>
<button class="btn btn-success">绿色按钮</button>
<button class="btn btn-info">浅蓝色按钮</button>
<button class="btn btn-warning">黄色按钮</button>
<button class="btn btn-danger">红色按钮</button>
<button class="btn btn-link">超链接按钮</button>

按钮大小

.btn-lg-大、.btn-sm-小、.btn-xs-微小

块级按钮

.btn-block-独占一行

表单

配置表单组使用类.form-group，其中对于输入框等可以使用类.form-control使其能够占满一行，并且根据窗口大小自动改变，还有可以设置placeholder属性来定义默认值，举例：

<form>
    <div class="form-group">
        <label for="name">用户名：</label>
        <input type="text" class="form-control" id="name" placeholder="default name">
    </div>
    <div class="form-group">
        <label for="password">密码：</label>
        <input type="password" id="password" class="form-control">
    </div>
    <div class="form-group">
        <input type="submit" class="btn btn-success form-control" value="go">
        <input type="reset" class="btn btn-danger form-control" value="cancel">
    </div>
</form>

内联表单

在<form>标签当中添加.form-inline类，可以使表单内容都在同一行内显示

输入框组

即对于一个输入框，可以有前缀和后缀修饰，使用.input-group类包起来，对于前后缀则使用类.input-group-addon，如果是前后缀的按钮则可以使用类.input-group-btn，举例：

<div class="input-group">
    <div class="input-group-addon">$</div>
    <input class="form-control">
    <div class="input-group-addon">.00</div>
</div>
<div class="input-group">
        <input class="form-control">
        <div class="input-group-btn">
            <button class="btn btn-danger">GO</button>
        </div>
</div>

输入框颜色

.has-success-绿色、.has-warning-黄色、.has-error-红色，举例：

<div class="form-group has-success">
    <label for="name">用户名：</label>
    <input type="text" class="form-control" name="name" id="name" placeholder="default name">
</div>

禁用/只读

使用disabled/readonly属性实现，要注意的是对于禁用的内容，其对应的name和value不会上传，而只读的内容会上传，使用举例：

<div class="form-group">
    <label for="name">用户名：</label>
    <input type="text" class="form-control" name="name" id="name" placeholder="default name" disabled>
</div>
<div class="form-group">
    <label for="password">密码：</label>
    <input type="password" id="password" name="pwd" class="form-control" readonly>
</div>

集合控制

当想要对特定的一组标签设置相同的属性时，可以使用<fieldset>标签来设置属性并嵌套起来，举例：

<fieldset disabled>
    <!-- 全部禁用 -->
    <form>
        <div class="form-group">
            <label for="name">用户名：</label>
            <input type="text" class="form-control" name="name" id="name" placeholder="default name">
        </div>
        <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" id="password" name="pwd" class="form-control">
        </div>
        <div class="form-group">
            <input type="submit" class="btn btn-success form-control" value="go">
            <input type="reset" class="btn btn-danger form-control" value="cancel">
        </div>
    </form>
</fieldset>

图片

图片形状

<img>下.img-rounded-方形、.img-circle-圆形、.img-thumbnail-方形（加相框）

响应式图片

.img-responsive-根据窗口大小自动调整图片大小

辅助类

即通用类，大部分标签都能使用的类属性

字体颜色：

.text-muted-灰色、.text-primary-蓝色、.text-success-绿色、.text-info-浅蓝、.text-warning-黄色、.text-danger-红色

背景颜色

.bg-primary-蓝色、.bg-success-绿色、.bg-info-浅蓝、.bg-warning-黄色、.bg-danger-红色

右上角标志

.close-标签内容会浮动到右上角，举例：

<div>点击右上角关闭
    <span class="close">×</span>
</div>

打开更多标志

.caret-就是一个向下的三角形，举例：

<div>点击查看更多
    <button class="btn btn-success">更多<span class="caret"></span></button>
</div>

浮动位置

.pull-right-浮动到最右边、.pull-left-浮动到最左边

清除浮动

.clearfix-清除浮动

内容块居中

.center-block-将块居中

显示/隐藏

.show/.hide

组件

官方提供的很多组件样式，包括字符图标、下拉菜单、导航、警告框、弹出框等

字符图标

对于官方提供的图标样式，只需引用其对应的类名即可，但注意的是其属于字符而不是图片，因此图标大小可以通过设置样式font-size来改变，颜色也可以通过color改变，即可以像操作字体那样来操作图标样式，举例：

<span class="glyphicon glyphicon-music" style="font-size: 50px; color: blue; ">音乐播放器</span>

官方提供图标参考：https://v3.bootcss.com/components/#glyphicons
注：
当把bootstrap.css保存到本地引入时，如果使用了字体图标，则需要将对应的fonts文件夹也保存到本地，否则会无法正常显示，具体原因参考：
https://blog.csdn.net/nongweiyilady/article/details/53611094

下拉菜单

对于下拉菜单的按钮和对应的菜单数据都放在.dropdown类中，然后在按钮中设置data-toggle="dropdown"来绑定菜单数据，菜单数据列表则添加类.dropdown-menu，其中菜单数据列表里如果想要设置不可选的标题，可以添加类.dropdown-header，分割线则使用类divider，禁选框则使用类disabled，举例：

<div class="dropdown">
    <button class="btn btn-primary" data-toggle="dropdown">点击查看更多<span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li class="dropdown-header">a</li>
        <li><a href="">aaa</a></li>
        <li><a href="">aaa</a></li>
        <li class="disabled"><a href="">aaa</a></li>
        <li class="divider"></li>
    </ul>
</div>

若想要菜单数据列表显示在右边，可添加类.dropdown-menu-right，若希望改成上拉菜单，则dropdown改成dropup即可

下拉菜单点击不消失问题

对于官方给的下拉菜单，在点击内部选项后将会关闭菜单选项，这在有时候可能无法满足我们的需求，比如下拉框内部加入复选框，那么此时肯定希望点击时下拉菜单不会消失，因此可以通过stopPropagation()方法阻止其事件影响到其他节点，举例：

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        选择<span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><input type="checkbox" name="aaa" value="1">1</li>
        <li><input type="checkbox" name="aaa" value="2">2</li>
    </ul>
</div>
<script type="text/javascript">
$('.dropdown > ul').on('click', function (e) {
        e.stopPropagation();    // 阻止事件影响到ul以外的节点
    });
</script>

按钮组

即连续的一组按钮，使用类.btn-group（默认横向，若要纵向则用.btn-group-vertical）来嵌套多个<button class="btn">即可，并且可以通过.btn-group-lg/.btn-group-sm/.btn-group-xs来设置样式大小，举例：

<div class="btn-group btn-group-lg">
    <button class="btn">fff</button>
    <button class="btn btn-default">ddd</button>
    <button class="btn btn-primary">aaa</button>
    <button class="btn btn-success">bbb</button>
    <button class="btn btn-warning">ccc</button>
    <button class="btn btn-danger">eee</button>
</div>

大按钮组

对于上面的.btn-group是小组，如果要大组，即能再嵌套.btn-group的按钮大组，则使用.btn-toolbar，举例：

<div class="btn-toolbar">
    <div class="btn-group">
        <button class="btn">fff</button>
        <button class="btn btn-default">ddd</button>
        <button class="btn btn-primary">aaa</button>
        <button class="btn btn-success">bbb</button>
        <button class="btn btn-warning">ccc</button>
        <button class="btn btn-danger">eee</button>
    </div>
    <div class="btn-group">
        <button class="btn">fff</button>
        <button class="btn btn-default">ddd</button>
        <button class="btn btn-primary">aaa</button>
        <button class="btn btn-success">bbb</button>
        <button class="btn btn-warning">ccc</button>
        <button class="btn btn-danger">eee</button>
    </div>
    ...
</div>

两端对齐

原来按钮文字有多少就占多宽，设置两端对齐则会占满一行，使用类.btn-group .btn-group-justified，其和大按钮组一样需要嵌套在.btn-group外面，举例：

<div class="btn-group btn-group-justified">
    <div class="btn-group btn-group-lg">
        <button class="btn">fff</button>
    </div>
    <div class="btn-group btn-group-lg">
        <button class="btn btn-success">ddd</button>
        <!-- 一个btn-group里只包一个按钮，如果包多个，将会分行显示 -->
    </div>
</div>

进度条

由.progress类包着，并设置.progress-bar类表示进度条，.progress-bar-striped表示条纹进度条，.active表示动态显示，举例：

<div class="progress">
    <div id="progressBar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0"
         aria-valuemin="0" aria-valuemax="100" style="width: 0%">
        <span class="sr-only">0% Complete</span>
    </div>
</div>
<script>
    for (i = 0; i < 101; i++) {
        $('#progressBar').css("width", i + "%");
    }
</script>

标签页

使用类.nav .nav-tabs实现（如果要胶囊特效的标签页则使用类.nav .nav-pills，如果想要纵向堆叠则可以在前面的基础上再添加类.nav-stacked），其中被选中的式样则添加类.active，使用举例：

<ul class="nav nav-tabs">
    <li class="active">
        <a href="">aaa</a>
    </li>
    <li class="">
        <a href="">bbb</a>
    </li>
    <li class="">
        <a href="">ccc</a>
    </li>
</ul>

此时如果想要点击某一个标签显示内容，其他屏蔽则可以实现如下：

<style type="text/css">
    .row {
        display: none;
    }
</style>
...
<div class="col-md-2">
    <ul class="nav nav-pills nav-stacked">
        <li class="active">
            <a href="">aaa</a>
        </li>
        <li class="">
            <a href="">bbb</a>
        </li>
        <li class="">
            <a href="">ccc</a>
        </li>
    </ul>
</div>
<div class="col-md-10">
    <div class="row">
        <p>aaaaaaaaaaaaaaaaaa</p>
    </div>
    <div class="row">
        <p>bbbbbbbbbbbbbbbbbb</p>
    </div>
    <div class="row">
        <p>cccccccccccccccccc</p>
    </div>
</div>
...
<script type="text/javascript">
    $('li').mouseenter(function(){
        $(this).addClass('active');
        $('li').not($(this)).removeClass('active');

        page = $(this).index('li');
        $('.row').eq(page).show();
        $('.row').not($('.row').eq(page)).hide();
    })

    $('.row').eq(0).show();
</script>

导航条

在<nav>标签中使用类.navbar，并使用.navbar-default代表使用默认灰色为背景色（.navbar-inverse则为黑色），示例：

<nav class="navbar navbar-inverse">
    <!-- 黑色导航条 -->
    <div class="container-fluid">
        <div class="navbar-header">
            <!-- 标头 -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#aaa">
                <!-- data-target用于设置对应的ID，从该id列表当中获取下拉框内容 -->
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <!-- icon-bar是一条横线，连续三个就会变成三条横线 -->
            </button>
            <a class="navbar-brand" href="#">Brand</a>
            <!-- 标头样式 -->
        </div>
        <div class="collapse navbar-collapse" id="aaa">
            <!-- id对应上面的data-target，为下拉框内容 -->
            <ul class="nav navbar-nav">
                <!-- 下拉框导航条 -->
                <li class="active"><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </div>
</nav>

参考课程

https://study.163.com/course/courseMain.htm?courseId=1003664020

第三方插件

踩坑记录

动态创建的标签会导致某些属性失效

动态创建的标签需要再手动调用一次对应属性的初始化方法，例如a标签的b属性无效，那么在创建完成后需要执行下列步骤：

选择器选中动态生成的标签
调用对应的属性方法，如：$('a').b()

参考：https://www.oschina.net/question/4020519_2289239?sort=default

最后编辑于：2020.03.12 10:02:16

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,445评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,889评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,047评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,760评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,745评论 5赞 367
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,638评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,011评论 3赞 398
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,669评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,923评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,655评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,740评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,406评论 4赞 320
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,995评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,961评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,197评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,023评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,483评论 2赞 342