一篇文章学会使用BootStrap-阿里云开发者社区

1：引入BootStrap的结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.min.js"></script>
</body>
</html>

2：基本模板

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <!-- 下面一句的作用是告诉IE浏览器以最新版本（edge)的方式渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 实现响应式，支持移动设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

3：流体容器（.container-fluid）

流体容器会随着页面窗口的大小变化而变化，其宽度始终占据整个屏幕的宽度。
流体容器相当于width=100%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .container-fluid {
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        test
    </div>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.min.js"></script>
</body>
</html>

4：固定容器（.container）

固定容器的宽度是固定的，不会随屏幕大小的变化而变化。
固定容器是有三个阈值的，如下图所示（当屏幕宽度大于等于1200px的时候，容器的宽度为1170px）

5：栅格系统

在栅格系统中一行被分为12列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .container {
            background-color: aqua;
        }
        div[class |= col] {
            border: 1px solid;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-10">col-lg-10</div>
            <div class="col-lg-2">col-lg-2</div>
        </div>
        <div class="row">
            <div class="col-lg-2">col-lg-2</div>
            <div class="col-lg-10">col-lg-10</div>
        </div>
        <div class="row">
            <div class="col-lg-6">col-lg-6</div>
            <div class="col-lg-6">col-lg-6</div>
        </div>
    </div>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.min.js"></script>
</body>
</html>

5.1 效果

5.2 列的阈值划分（lg,md,sm,xs的含义）

5.3 被两个列控制

5.4 列偏移

向右偏移一列。

6：标题标签

给类名添加.h1到.h6，实现下面的效果

7：常用标签

7.1 对齐

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

7.2 改变大小写

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

7.3 常用标签查询网址

v3.bootcss.com/css/#overvi…

8：表格（table)

模板代码

<div class="container table-responsive">
        <table class="table table-bordered table-striped table-hover ">
            <tr class="success">
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
            </tr>
            <tr>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
            </tr>
            <tr>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
            </tr>
        </table>
    </div>

使用方法网址：表格

8.1 把表格变成响应式表格

通过给container所在的div添加table-responsive

9：按钮

参考网址
添加类名 btn-block 会让按钮占一整行
通过类名active使得按钮处于激活状态（被按的情况）
添加类名 disabled 使得按钮处于禁用状态

9.1 按钮模板

<div class="container">
        <a class="btn btn-default" href="#" role="button">Link</a>
        <!-- 在导航和导航条上一般使用button -->
        <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">
        <button type="button" class="btn btn-success">（成功）Success</button>
        <button type="button" class="btn btn-primary btn-block btn-lg">（大按钮）Large button</button>
        <button type="button" class="btn btn-success btn-lg">（大按钮）Large button</button>
        <!-- 把按钮变为块元素 -->
        <button class="btn btn-success btn-block btn-md">充满容器</button>
        <!-- 使得按钮处于激活状态 -->
        <button class="btn btn-success btn-block btn-md active">充满容器</button>
        <!-- 使按钮处于不可用状态 -->
        <button class="btn btn-success btn-block btn-md disabled">充满容器</button>
    </div>

9.2 模板效果

10：图片

10.1 示例代码

<div class="container">
        <img src="images/01-242x200.jpg" class="img-responsive center-block img-rounded">
        <img src="images/01-242x200.jpg" class="img-responsive center-block img-circle">
        <img src="images/01-242x200.jpg" class="img-responsive center-block img-thumbnail">
    </div>

10.2 效果展示

11：辅助类

11.1 关闭符号

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

11.2 三角符号

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

11.3 快速浮动

类名	作用
pull-left	快速左浮动
pull-right	快速右浮动

11.4 让内容块居中

类名	作用
center-block	内容块居中
text-center	让div中的文本居中

11.5 清除浮动

类名	作用
clearfix （这个类名是给父元素添加的）	清除浮动

12：响应式工具

12.1 隐藏或显示内容

通过添加如下类名，实现隐藏或显示内容（带星号的不要用）

13：缩略图

13.1 仿BootStrap官网缩略图源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .thumbnail h3 {
            color: #337ab7;
        }
        .thumbnail small {
            font-size: 65%;
            text-align: center;
            line-height: 1;
            font-weight: 400;
        }
        .thumbnail p {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/BootStrap网站实例.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/webpack.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/react.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/typescript.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/svelte.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/nextjs.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/babeljs.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/nodejs.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

14.1 源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .thumbnail h3 {
            color: #337ab7;
        }
        .thumbnail small {
            font-size: 65%;
            text-align: center;
            line-height: 1;
            font-weight: 400;
        }
        .thumbnail p {
            text-align: center;
        }
        .jumbotron {
            position: relative;
            color: #fff;
            text-align: center;
            background: linear-gradient(45deg, #020031, #6d3353);
            text-shadow: 0 1px 3px rgb(0 0 0 / 40%), 0 0 30px rgb(0 0 0 / 8%);
            box-shadow: inset 0 3px 7px rgb(0 0 0 / 20%), inset 0 -3px 7px rgb(0 0 0 / 20%);
        }
        .jumbotron h1 {
            font-size: 90px;
            font-weight: 700;
            line-height: 1;
        }
        .jumbotron h2 {
            font-size: 24px;
            font-weight: 200;
            line-height: 1.25;
        }
        .jumbotron:after {
            content: '';
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: block;
            background: url(./images/bootstrap-bgc.png) repeat 50%;
            position: absolute;
            opacity: .4;
            background-size: 150px 150px;
        }
        .masthead {
            padding: 90px 0 110px;
        }
        .projects-header {
            width: 60%;
            text-align: center;
            font-weight: 200;
            display: block;
            margin: 60px auto 40px;
        }
        .page-header {
            padding-bottom: 9px;
            /* margin: 40px 0 20px; */
            border-bottom: 1px solid #eee;
        }
        .page-header h2 {
            display: block;
            font-size: 42px;
            letter-spacing: -1px;
            margin-block-start: 0.83em;
            /* margin-block-end: 0.83em; */
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            /* font-weight: bold; */
        }
        .page-header p {
            margin: 0 0 10px;
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        }
    </style>
</head>
<body>
    <div class="jumbotron masthead">
        <div class="container">
            <h1>Bootstrap</h1>
            <h2>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</h2>
        </div>
    </div>
    <div class="container projects">
        <div class="projects-header page-header">
            <h2>Bootstrap相关优质项目推荐</h2>
            <p>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</p>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="thumbnail">
                    <a href="http://google.com" target="_blank"><img src="images/BootStrap网站实例.png" alt="..." ></a>
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/webpack.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/react.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/typescript.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/svelte.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/nextjs.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/babeljs.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/nodejs.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

一篇文章学会使用BootStrap

1：引入BootStrap的结构

2：基本模板

3：流体容器（.container-fluid）

4：固定容器（.container）

5：栅格系统

5.1 效果

5.2 列的阈值划分（lg,md,sm,xs的含义）

5.3 被两个列控制

5.4 列偏移

6：标题标签

7：常用标签

7.1 对齐

7.2 改变大小写

7.3 常用标签查询网址

8：表格（table)

8.1 把表格变成响应式表格

9：按钮

9.1 按钮模板

9.2 模板效果

10：图片

10.1 示例代码

10.2 效果展示

11：辅助类

11.1 关闭符号

11.2 三角符号

11.3 快速浮动

11.4 让内容块居中

11.5 清除浮动

12：响应式工具

12.1 隐藏或显示内容

13：缩略图

13.1 仿BootStrap官网缩略图源码

14.1 源代码

热门文章

最新文章

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

一篇文章学会使用BootStrap

1：引入BootStrap的结构

2：基本模板

3：流体容器（.container-fluid）

4：固定容器（.container）

5：栅格系统

5.1 效果

5.2 列的阈值划分（lg,md,sm,xs的含义）

5.3 被两个列控制

5.4 列偏移

6：标题标签

7：常用标签

7.1 对齐

7.2 改变大小写

7.3 常用标签查询网址

8：表格（table)

8.1 把表格变成响应式表格

9：按钮

9.1 按钮模板

9.2 模板效果

10：图片

10.1 示例代码

10.2 效果展示

11：辅助类

11.1 关闭符号

11.2 三角符号

11.3 快速浮动

11.4 让内容块居中

11.5 清除浮动

12：响应式工具

12.1 隐藏或显示内容

13：缩略图

13.1 仿BootStrap官网缩略图源码

14.1 源代码

热门文章

最新文章

相关电子书