BootStrap3

Bootstrap

详细参考官方文档，写的很详细！

导入

  • Bootstrap 插件全部依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入

  1. 本地文件导入

  2. CDN导入

1
2
3
4
5
6
7
8
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

样式介绍

布局

容器

以下两种容器二选一，不能同时存在

container 固定容器

会根据当前窗口尺寸改变元素尺寸。有几个固定的阈值，在不同的阈值区间设定不同的元素宽度，通常左右会留白。

1
2
3
4
<!-- container 固定布局-->
<div class="container" style="border:1px black solid;">
    hello bootstrap!
</div>

container-fluid 流体容器

布局始终占窗口宽度的100%

1
2
3
4
<!-- container-fluid 流体布局-->
<div class="contaniner-fluid" style="border:1px aqua solid;">
    contaniner-fluid!
</div>

image-20210209232138590

栅格系统

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<style>
    /* 表示col开头的类 */
    .container{
        background-color: pink;
    }
    div[class|=col]{
        border:1px aqua solid
    }
</style>
<body>
    <!-- 栅格系统将页面分为行列，最多12列 -->

        <!-- 栅格系统要放到容器内 -->
        <!-- 一个row就是一行 -->
        <div class="container">
            <div class="row">
                <!-- 定义一列，占4份 -->
                <!-- 默认每列之间会有15的padding -->
                <div class="col-sm-4" >col-sm-4</div>
                <div class="col-sm-4" >col-sm-4</div>
                <div class="col-sm-4" >col-sm-4</div>
                <!-- 一行最多12列，多出的部分会到下一行 -->
                <div class="col-sm-4" >col-sm-4</div>
            </div>
            <div class="row">
                <!-- 列有四种类，只要是适应不同尺寸的屏幕，决定在什么时候堆叠元素 -->
                <!-- 原来的列是展开的，布局在一行，堆叠后每行一列 -->
                <!-- col-lg大屏幕
                     col-md中屏幕
                     col-sm小屏幕
                     col-xs更小屏幕 -->
                <div class="col-lg-3">col-lg-3</div>
                <div class="col-lg-3">col-lg-3</div>
                <div class="col-lg-3">col-lg-3</div>
                <div class="col-lg-3">col-lg-3</div>
            </div>
            <div class="row">
                <div class="col-xs-6">col-xs-6</div>
                <div class="col-xs-6">col-xs-6</div>
            </div>
            <div class="row">
                <div class="col-md-4">col-md-4</div>
                <div class="col-md-8">col-md-8</div>
            </div>
            <div class="row">
                <!-- 列的嵌套 -->
                <div class="col-sm-4">
                    <div class="col-sm-6">col-sm-6</div>
                    <div class="col-sm-6">col-sm-6</div>
                </div>
                <div class="col-sm-4">col-sm-4</div>
                <div class="col-sm-4">col-sm-4</div>
            </div>
            <div class="row">
                <!-- 列偏移，offset -->
                <div class="col-sm-4 col-sm-offset-2">col-sm-4</div>
                <div class="col-sm-4">col-sm-4</div>
            </div>
         </div>
</body>

image-20210210144616191

排版

内置标签

small-小号文本

其内的文本大小被设置为父容器的85%。

1
2
3
4
5
6
7
<!-- small：字体为父容器字体的85% -->    
<h1>一级标题 <small>副标题</small></h1>
<h2>二级标题 <small>副标题</small></h2>
<h3>三级标题 <small>副标题</small></h3>
<h4>四级标题 <small>副标题</small></h4>
<h5>五级标题 <small>副标题</small></h5>
<h6>六级标题 <small>副标题</small></h6>

image-20210209232626482

mark-标签文本
1
2
<!-- mark标签：添加背景色显示 -->
<p>司的后台管理系统用的是H+框架，也是基于<mark>mark标签文本</mark>的，希望学了这个以后能更好的理解H+</p>

image-20210210001756432

del/s-删除线
1
2
<!-- del/s：删除线 -->
<p>那个按esc关闭模态框的功能在电脑上的三个浏览器<del>del删除线</del>试了下，只有<s>s删除线</s>成功了[doge]IE浏览器终于站起来了[doge]</p>

image-20210210002002671

ins/u-下划线
1
2
<!-- ins/u：下划线 -->
<p>同学能跟上吧？我<ins>ins下划线</ins>看的，刚好能跟上。B站就是没有<u>u下划线</u>，我就跟不上了。</p>

image-20210210002010712

strong-加粗
1
2
<!-- strong: 加粗文本 -->
<p>希望能出个springcloud<strong> 加粗文本！</strong></p>

image-20210210002016865

em-斜体
1
2
<!-- em：斜体 -->
<p>老师的完整的课程资料谁有?<em>斜体文本</em>！！！！没找到那条置顶评论！！！</p>

image-20210210002023856

abbr-缩略语

鼠标移入会显示说明文本，

配合initialism类，可以使缩略语字体缩小

1
2
3
<p><abbr title="哔哩哔哩弹幕网的视频">视屏</abbr>最后的那个问题怎么解决的，有知道的吗？</p>
<!-- initialism类：配合abbr标签使用，首字母缩略语，使缩略语字体变小 -->
<p><abbr title="哔哩哔哩弹幕网的视频" class="initialism">视屏</abbr>最后的那个问题怎么解决的，有知道的吗？</p>

image-20210210002513761

blockquote-引用块

相当于这种效果

1
<blockquote>这是一个引用块</blockquote>

image-20210210002659466

内置类

lead-突出展示

放大字体

1
2
3
4
5
6
7
8
9
10
11
12
13
<div>
    HTML&CSS:尚硅谷Web前端HTMLCSS初学者零基础入门(新版已上传，推荐观看)<br>
    HTML5+CSS3(超哥新版):尚硅谷Web前端HTML5CSS3初学者零基础入门全套完整版<br>
    <span class ="lead">JS核心</span>:尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)<br>
    JS高级:尚硅谷JavaScript高级教程(javascript实战进阶)<br>
    jQuery:尚硅谷jQuery教程(jquery从入门到精通)<br>
    
    <p><span class="lead">必备技术--修炼内功——》》</span>
    ES6-ES11:尚硅谷Web前端ES6教程，涵盖ES6-ES11
    AngularJS:尚硅谷AngularJS实战教程(angular.js框架精讲)
    Node.js:尚硅谷超经典NodeJS-node.js实战教程全套完整版(初学者零基础入门)
        Zepto.js:尚硅谷Zepto教程(zepto.js框架精讲)</p>
</div>

image-20210210001547012

对齐

​ text-center

​ text-rignt

​ text-left

​ text-justify 自动换行

​ text-nowrap 不换行，超出加滚动条

1
2
3
4
5
<p class="text-center">居中展示</p>
<p class="text-rignt">居右对齐</p>
<p class="text-left">居左对齐</p>
<p class="text-justify">自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行</p>
<p class="text-nowrap">不自动换行不自动换行不自动换行不自动换行不自动换行不自动换行不自动换行不自动换行不自动换行不自动换行不自动换行不自动换行不自动换行不自动换行不自动换行不自动换行不自动换行不自动换行不自动换行不自动换行不自动换行不自动换行不自动换行不自动换行不自动换行不自动换行不自动换行不自动换行不自动换行不自动换行不自动换行</p>

image-20210210002158685

改变大小写

​ text-lowercase类 全小写

​ text-uppercase类 全大写

​ text-capitalize类 首字母大写,其他位置不变

1
2
3
<p class="text-lowercase">WHAT THE FUXK 8102983!!</p>
<p class="text-uppercase">what's up 8102983!!</p>
<p class="text-capitalize">WHAT the fXXk 8102983!!</p>

image-20210210002252293

列表样式

list-unstyled类：去除列表默认样式

list-inline类：将所有元素展示在一行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- list-unstyled类：去除列表默认样式 -->
<ul>
    <li>这是默认无序列表</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<ul class="list-unstyled">
    <li>这是无样式列表</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<!-- list-inline类：将所有元素展示在一行 -->
<ol class="list-inline">
    <li>这是单行展示的列表</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

image-20210210002802182

实体

表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!-- 表格：
    table基类
    table-bordered  带边框
    table-striped   带斑马线条纹样式
    table-hover     带鼠标悬停样式
    table-condensed 紧凑表格(padding缩小50%)-->
<table class="table table-bordered table-striped table-hover table-condensed ">
    <!-- 一些状态类：可以加在tr,td,th上
        info        蓝色背景
        success     绿色
        warning     黄色
        danger      红色 -->
    <tr class="info">
        <th class="danger">编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>生日</th>
        <th>邮箱</th>
    </tr>
    <!-- 不能加在tbody上 -->
    <!-- <tbody class="success">  -->
    <tbody> 
        <tr class="success">
            <td>1</td>
            <td>张三</td>
            <td>16</td>
            <td>00.09.17</td>
            <td>[email protected]</td>
        </tr>
        <tr class="warning">
            <td>1</td>
            <td>张三</td>
            <td>16</td>
            <td>00.09.17</td>
            <td>[email protected]</td>
        </tr>
        <tr class="danger">
            <td>1</td>
            <td>张三</td>
            <td>16</td>
            <td>00.09.17</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td class="info">1</td>
            <td class="success">张三</td>
            <td class="warning">16</td>
            <td class="danger">00.09.17</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table>

<!-- table-responsive响应式表格(会在小屏幕<768px上水平滚动)  -->
    <!--注意：这是加在table标签外的div上的不是直接加在table上 -->
<div class="table-responsive">
    <table class="table table-hover">
        <thead>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>
</div>

image-20210210151355295

按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!-- 可以为 <a>、<button> 或 <input>添加btn类来成为一个按钮 -->
    <!-- btn-default是默认按钮样式 -->
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

    <br>
<!-- 按钮预定义样式 -->
    <!-- 白色背景 Standard button -->
    <button type="button" class="btn btn-default">（默认样式）Default</button>

    <!-- 深蓝色背景 Provides extra visual weight and identifies the primary action in a set of buttons -->
    <button type="button" class="btn btn-primary">（首选项）Primary</button>

    <!-- 绿色背景 Indicates a successful or positive action -->
    <button type="button" class="btn btn-success">（成功）Success</button>

    <!-- 浅蓝 Contextual button for informational alert messages -->
    <button type="button" class="btn btn-info">（一般信息）Info</button>

    <!-- 黄色 Indicates caution should be taken with this action -->
    <button type="button" class="btn btn-warning">（警告）Warning</button>

    <!-- 红色 Indicates a dangerous or potentially negative action -->
    <button type="button" class="btn btn-danger">（危险）Danger</button>

    <!-- 链接样式 Deemphasize a button by making it look like a link while maintaining button behavior -->
    <button type="button" class="btn btn-link">（链接）Link</button>

<!-- 按钮尺寸 -->
<p>
    <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
    <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
  </p>
  <p>
    <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
    <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
  </p>
  <p>
    <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
    <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
  </p>
  <p>
    <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
    <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
  </p>

<!-- 块级按钮 -->
  <!-- 通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度 -->
    <button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
    <button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>

<!-- 按钮状态 -->
  <!-- 激活状态active -->
  <button type="button" class="btn btn-primary btn-lg active">Primary button</button>
    <button type="button" class="btn btn-default btn-lg active">Button</button>
    <!-- 禁用状态 -->
    <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
    <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

image-20210210152726206

框架
#前端 #Bootstrap
BootStrap3
http://blog.rainna.xyz/2022/10/08/2022-10-08-BootStrap3/
作者
rainnalv
发布于
2022年10月8日
许可协议