bootstrap入门bootstrap_css

最新推荐文章于 2022-11-15 21:36:07 发布

说与风听

最新推荐文章于 2022-11-15 21:36:07 发布

阅读量736

点赞数

分类专栏： bootstrap 文章标签： html bootstrap css

本文链接：https://blog.csdn.net/XUForVic/article/details/108427539

版权

bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Bootstrap CSS样式

Bootstrap下载

生产环境的Bootstrap(官方)

网盘：https://haitao1115.lanzous.com/iuIXHejkutc

Bootstrap 源码

网盘：https://haitao1115.lanzous.com/ieAFQejkuqj

由于笔记是在学习过程中编写，导致图片没法正常显示
笔记存在个人网盘：点这里

入门例子

根据官网例子模拟出一个相似的

官网示例：

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 响应式布局自适应宽高 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        body{
            padding-top: 40px;
        }
        .starter{
            padding: 40px 15px;
            text-align: center;
        }
    </style>
    <title>bootstrap</title>
</head>
<body>
    <!-- 导航 使用bootstrap他的一些写好的样式可直接实现导航栏的效果 -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation" >
        <div class="container">
            <div class="navbar-header">
                <a href="#" class="navbar-brand" >hello</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse" >
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">帮助</a></li>
                    <li><a href="#">关于</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 内容写好之后 需要调整边距 与导航空出间隔 -->
    <div class="container">
        <div class="starter">
            <h1>hello bootstrap</h1>
            <p class="lead">
                欢迎开始学习bootstrap欢迎开始学习bootstrap
                欢迎开始学习bootstrap欢迎开始学习bootstrap
            </p>
        </div>
    </div>
</body>
</html>

class="active"：表示被选中的状态

运行结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rru4FlJC-1599352093103)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200712092435595.png)]

全局CSS样式-排版

`class="container"`

如果我们不带class="container"这个属性值那么我们写出来的内容将是：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L0LJrIvu-1599352093104)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200712093312120.png)]

内容紧贴左侧

我们加上class=“container”：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w7OVNzUU-1599352093109)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200712093411460.png)]

这时的内容就离左侧有一些空隙

bootstrap将全局的字体大小设置成14px，行高设置成1.248，p标签还被设置了等高为1/2行高就是10px的底部外边距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aQvVdGn0-1599352093114)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200712093823737.png)]

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

`class="lead"`

突出显示：class="lead"

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

效果：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qTdUCbBq-1599352093117)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200712094144804.png)]

删除文本标签del

<del>bootstrap</del>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cn8SKnI6-1599352093121)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200712094434202.png)]

居中、居左、居右，大小写的切换

        <!-- 居左 -->
        <p class="text-left">hello</p>
        <!-- 居右 -->
        <p class="text-right">hello</p>
        <!-- 居中 -->
        <p class="text-center">hello</p>
        <!-- 小写 -->
        <p class="text-lowercase">hello</p>
        <!-- 全部大写 -->
        <p class="text-uppercase">hello</p>
        <!-- 首字母大写 -->
        <p class="text-capitalize">hello</p>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8euZuFIV-1599352093124)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200712095542334.png)]

缩略语

<abbr title="电话">1-111-888-999</abbr>，地址标签·<address></address>

		<!-- 缩略语 -->
        <p>在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。
            而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。
            这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。
            也就是说，
            <abbr title="attribute">
                Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，
                而不是增加一个额外的文件
            </abbr>
            </p>
        <!-- 地址 -->
        <address>
            <strong>郑职院</strong> <br>
            郑州市荥阳市<br>
            豫龙镇，御龙湾
            <abbr title="电话">1-111-888-999</abbr>
        </address>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R91pwWPL-1599352093126)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200712100408372.png)]

`class="list-unstyled"`

无样式列表：class="list-unstyled"

在ul标签中添加class="list-unstyled"属性值，移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。

栅格系统

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0RTHdYVC-1599352093129)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200712101530653.png)]

实例：从堆叠到水平排列

使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        [class*="col-"]{
            border: 1px blueviolet solid;
            
        }
    </style>
    <title>栅格系统</title>
</head>
<body>
    <div class="container">
        <!-- 栅格必须 放在.row 内 -->
        <div class="row">
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
        </div>
        <div class="row">
            <div class="col-md-8">.col-md-8</div>
            <div class="col-md-4">.col-md-4</div>
        </div>
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4">.col-md-4</div>
        </div>
        <div class="row">
            <div class="col-md-6">.col-md-6</div>
            <div class="col-md-6">.col-md-6</div>
        </div>
    </div>
</body>
</html>

效果图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rkm85clW-1599352093133)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200712104927199.png)]

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        [class*="col-"]{
            border: 1px blueviolet solid;
            margin-top: 5px;
            margin-bottom: 5px;
        }
    </style>
    <title>栅格系统</title>
</head>
<body>
    <div class="container">
        <!-- 栅格必须 放在.row 内 -->
        <div class="row">
            <div class="col-md-4 col-md-offset-4">.col-md-4</div>
            
        </div>
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
        </div>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
    </div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9sjPMRWb-1599352093136)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200712111112702.png)]

嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

<div class="row">
            <div class="col-sm-8">
                外层
                <div class="row">
                    <div class="col-xs-4">
                        Mei1
                    </div>
                    <div class="col-xs-8">
                        Mei1
                    </div>
                </div>
            </div>
        </div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LHKJhHaZ-1599352093138)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200712113306910.png)]

可以看出内层的是根据外层为12分割的

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序

        <!-- col-md-push-8前面  col-md-pull-4 后面 -->
        <div class="row">
            <div class="col-md-4 col-md-push-8">col-md-4</div>
            <div class="col-md-8 col-md-pull-4">col-md-8</div>
        </div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JVaS87GH-1599352093143)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200712114843020.png)]

代码

内联代码

通过使用<code>标签包裹内联样式的代码片段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.css">
    <title>code</title>
</head>
<body>
    <div class="container">
        <div>
            小明来看我的代码：<code>&lt;p&gt;</code>是一个p标签
        </div>
    </div>
</body>
</html>

结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sTV3PBrB-1599352093145)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200712154432121.png)]

用户输入

通过<kdb>标签标记用户通过键盘输入的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.css">
    <title>code</title>
</head>
<body>
    <div class="container">
        <!-- 代码 -->
        <div>
            小明来看我的代码：<code>&lt;p&gt;</code>是一个p标签
        </div>
        <!-- 用户输入 -->
        <div>
            用户输入 <kbd>Hello Java</kbd> 打开秃头的大门
        </div>
        </div>
       
    </div>
</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LVfVVA3Q-1599352093148)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200712161239099.png)]

代码块

多行代码可以使用<pre>标签。为了正确的展示代码，注意将尖括号做转义处理。还可以使用.pre-scrollable类，作用为控制最大的高度为350px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.css">
    <title>code</title>
</head>
<body>
    <div class="container">
        <!-- 代码 -->
        <div>
            小明来看我的代码：<code>&lt;p&gt;</code>是一个p标签
        </div>
        <!-- 用户输入 -->
        <div>
            用户输入 <kbd>Hello Java</kbd> 打开秃头的大门
        </div>
        <!-- 代码块 -->
        <div>
            怎么显示代码块呢？
            <p>
                <pre>
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                </pre>
            </p>
            还能直接设置代码块的最大高度为350px使用.per-scrollable
            <p>
                <pre class="pre-scrollable">
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                    &lt;p&gt;这是p标签显示的效果/&lt;p&gt;
                </pre>
            </p>
        </div>
        

    </div>
</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-weaAvWwD-1599352093153)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200712161619679.png)]

变量

通过<var>标签标记变量。

 <!-- 变量 -->
        <div>
            <p>
                <var>y</var>=
                <var>x</var>+
                <var>b</var>
            </p>
        </div>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TU5oZOcU-1599352093156)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200712163015286.png)]

程序输出

使用<samp>标签标记程序输出的内容。

<!-- 程序输出 -->
<div>
    Java中Systme.out.println("Hello Java");将在控制台怎么显示：
    <p>
        <samp>
            Hello Java
        </samp>
    </p>
</div>

结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hQahhlIP-1599352093159)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200712163839745.png)]

表格

基本表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.css">
    <title>表格</title>
</head>
<body>
    <div class="container">
          <div>
            <h3>基本表格</h3>
            <table class="table">
                <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>
                    <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>
    </div>
             
</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-62IqA8oB-1599352093162)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200712171130715.png)]

条纹状表格

通过 .table-striped 类可以给之内的每一行增加斑马条纹样式。

跨浏览器兼容性

条纹状表格是依赖 :nth-child CSS 选择器实现的，而这一功能不被 Internet Explorer 8 支持。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.css">
    <title>表格</title>
</head>
<body>
    <div class="container">
		<div>
            <h3>条纹表格</h3>
            <table class="table table-striped">
                <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>
                    <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>
    </div>      
</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Ifk0TGH-1599352093164)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200712171503814.png)]

带边框表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.css">
    <title>表格</title>
</head>
<body>
    <div class="container">
		<div>
     		<table class="table table-bordered">
                <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>
                    <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>
    </div>      
</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jpa2Ru0h-1599352093167)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200712171653903.png)]

鼠标悬停

通过添加 .table-hover 类可以让中的每一行对鼠标悬停状态作出响应。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.css">
    <title>表格</title>
</head>
<body>
    <div class="container">
		<div>
     		<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>
                    <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>
    </div>      
</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v4k8kv6V-1599352093168)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200712171940058.png)]

紧缩表格

通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.css">
    <title>表格</title>
</head>
<body>
    <div class="container">
		<div>
     		<table class="table table-condensed">
                <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>
                    <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>
    </div>      
</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F9pqgITc-1599352093170)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200712172117357.png)]

状态

状态有悬停、成功、提示、警告、危险

Class	描述
`.active`	鼠标悬停在行或单元格上时所设置的颜色
`.success`	标识成功或积极的动作
`.info`	标识普通的提示信息或动作
`.warning`	标识警告或需要用户注意
`.danger`	标识危险或潜在的带来负面影响的动作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.css">
    <title>表格</title>
</head>
<body>
    <div class="container">
		<div>
            <table class="table">
                <thead>
                    <tr>
                        <th>标题1</th>
                        <th>标题2</th>
                        <th>标题3</th>
                        <th>标题4</th>
                        <th>标题5</th>
                        <th>标题6</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="active">鼠标悬停效果</td>
                        <td class="success">标识成功或积极的动作</td>
                        <td class="info">标识普通的提示信息或动作</td>
                        <td class="warning">标识警告或需要用户注意</td>
                        <td class="danger">标识危险或潜在的带来负面影响的动作</td>
                        <td>没有任何状态</td>
                    </tr>
                </tbody>
            </table>
        </div> 
    </div>      
</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OIMJrEYd-1599352093171)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200712172345071.png)]

响应式

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.css">
    <title>表格</title>
</head>
<body>
        <!-- 响应式表格将任何 .table 元素包裹在 .table-responsive 元素内，
        即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。
        当屏幕大于 768px 宽度时，水平滚动条消失。 -->
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>标题1</th>
                    <th>标题2</th>
                    <th>标题3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>内1内容1内容1内容1内容容1</td>
                    <td>内1内容1内容1内容1内容容2</td>
                    <td>内1内容1内容1内容1内容容3</td>
                </tr>
                <tr>
                    <td>内容1</td>
                    <td>内容1内容1内容1内容1内容1内v容2</td>
                    <td>内容3</td>
                </tr>
                <tr>
                    <td>内容容11内1</td>
                    <td>内容1内容1内容2</td>
                    <td>内1内容1内容1内容1内容容3</td>
                </tr>
                <tr>
                    <td>内1内容1内容1内容1内容容1</td>
                    <td>11内容1内容1内容1内容11</td>
                    <td>内1内容1内容1内容1内容容3</td>
                </tr>
                <tr>
                    <td>内容1内容1内容1内容1内容1</td>
                    <td>内1内容1内容1内容1内容容2</td>
                    <td>内容1内容1内容1内容1内容3</td>
                </tr>
            </tbody>
        </table>
    </div>    
</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ScCXGdAJ-1599352093173)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200712172609077.png)]

表单

基本表单

单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度属性为width:100%;。将<label>元素和前面提到的控件包裹在.form-group中可以获得最好的排列

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"/>
	<title>bootstarp表单</title>
</head>
<body>
	<div class="container">
		<form action="" method="">
			<div class="form-group">
				<label>email</label>
				<input type="email" class="form-control" placeholder="email" />
			</div>
			<div class="form-group">
				<label>password</label>
				<input type="password" class="form-control" placeholder="password" />
			</div>
			<div class="form-group">
				<label>userID</label>
				<input type="text" class="form-control" placeholder="userID" />
			</div>
			<div class="form-group">
				<label>日期</label>
				<input type="date" class="form-control" placeholder="date" />
			</div>
			<div class="form-group">
				<label>选择文件</label>
				<input type="file" />
			</div>
			<div class="form-group">
				
				<input type="checkbox" class="form-group" />
				<label>记住我</label>
			</div>
		</form>
		
	</div>
</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3kWVtzed-1599352093175)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200818171243711.png)]

内联表单

为 `` 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"/>
	<title>bootstarp表单</title>
</head>
<body>
	<div class="container">
		<form action="" method="" class="form-inline">
			<div class="form-group">
				<label class="sr-only">email</label>
				<input type="email" class="form-control" placeholder="email" />
			</div>
			<div class="form-group">
				<label>password</label>
				<input type="password" class="form-control" placeholder="password" />
			</div>
			<div class="form-group">
				<label>userID</label>
				<input type="text" class="form-control" placeholder="userID" />
			</div>
			<div class="form-group">
				<label>日期</label>
				<input type="date" class="form-control" placeholder="date" />
			</div>
			<div class="form-group">
				<label>选择文件</label>
				<input type="file" />
			</div>
			<div class="form-group">
				
				<input type="checkbox" class="form-group" />
				<label>记住我</label>
			</div>
		</form>
		
	</div>
</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z178ebKX-1599352093177)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200818171804547.png)]

可能需要手动设置宽度，在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单，我们将这些元素的宽度设置为 width: auto;，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。

一定要添加 label 标签如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为 label 设置 .sr-only 类将其隐藏。还有一些辅助技术提供label标签的替代方案，比如 aria-label、aria-labelledby 或 title 属性。如果这些都不存在，屏幕阅读器可能会采取使用 placeholder 属性，如果存在的话，使用占位符来替代其他的标记，但要注意，这种方法是不妥当的。

水平排列的表单

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"/>
	<title>bootstarp表单</title>
</head>
<body>
	<div class="container">		
		<form class="form-horizontal" >
			<div class="form-group">
				<label class="col-sm-2 control-label">userID</label>
				<div class="col-sm-10">
					<input type="text" class="form-control"  placeholder="userID">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">password</label>
				<div class="col-sm-10">
					<input type="password" class="form-control"  placeholder="password">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">email</label>
				<div class="col-sm-10">
					<input type="email" class="form-control"  placeholder="email">
				</div>
			</div>
			<div class="form-group">
				<div class="checkbox col-sm-offset-2 col-sm-10">
					<label class="control-label">
						<input type="checkbox"  />记住我
					</label>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<label class="sr-only"></label>
						<input type="button" class="form-group" value="提交" />
				</div>
			</div>
		</form>
	</div>
</body>
</html>

被支持的控件

输入框

包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

必须添加类型声明

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"/>
	<title>bootstarp表单</title>
</head>
<body>
	<div class="container">		
		<form >
			<div class="form-group">
					<input type="text" class="form-control"  placeholder="text">
			</div>
			<div class="form-group">
					<input type="password" class="form-control"  placeholder="password">
			</div>
			<div class="form-group">
					<input type="datetime" class="form-control"  placeholder="datetime">
			</div>
			<div class="form-group">
					<input type="date" class="form-control"  placeholder="date">
			</div>
			<div class="form-group">
					<input type="datetime-local" class="form-control"  placeholder="datetime-local">
			</div>
			<div class="form-group">
					<input type="email" class="form-control"  placeholder="email">
			</div>
			<div class="form-group">
					<input type="time" class="form-control"  placeholder="time">
			</div>
		</form>
	</div>
</body>
</html>

输入组件组

如需在文本输入域 <inupt> 前面或后面添加文本内容或按钮控件，请参考输入控件组

文本域

支持多行文本的表单控件。可根据需要改变rows属性。

<textarea rows="4" class="form-control"></textarea>

单选框和复选框

多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。

<div class="checkbox">
				<label><input type="checkbox">篮球</label>
			</div>
			<div class="checkbox">
				<label><input type="checkbox">足球</label>
			</div>
			<div class="radio">
				<label><input name="bootstrapRadio" type="radio" checked="">男</label>
			</div>
			<div class="radio">
				<label><input name="bootstrapRadio" type="radio">女</label>
			</div>

内联单选和多选框

通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

<label class="checkbox-inline">
			  <input type="checkbox" > 1
			</label>
			<label class="checkbox-inline">
			  <input type="checkbox" > 2
			</label>
			<label class="checkbox-inline">
			  <input type="checkbox"> 3
			</label>

			<label class="radio-inline">
			  <input type="radio" name="bootstrapRadio" > 1
			</label>
			<label class="radio-inline">
			  <input type="radio" name="bootstrapRadio" > 2
			</label>
			<label class="radio-inline">
			  <input type="radio" name="bootstrapRadio"> 3
			</label>

下拉列表

注意，很多原生选择菜单 - 即在 Safari 和 Chrome 中 - 的圆角是无法通过修改 border-radius 属性来改变的。

<select  class="form-control">
    <option >1</option>
    <option >2</option>
    <option >3</option>
    <option >4</option>
</select>

静态控件

如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 P 元素添加 .form-control-static 类即可。

<p class="form-control-static">纯文本</p>

禁用状态

为输入框设置 disabled 属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了 not-allowed 鼠标状态。

<div class="form-group">
	<label class="sr-only"></label>
	<input type="text" class="form-control"  value="input被禁用" disabled />
</div>

被禁用fieldset

为fieldset 设置 disabled 属性,可以禁用 fieldset 中包含的所有控件。

	<div class="container">		
		<form >
			<fieldset disabled>
			<p class="form-control-static">纯文本</p>
			<select  class="form-control">
				<option >1</option>
				<option >2</option>
				<option >3</option>
				<option >4</option>
			</select>
			<div class="form-group">
				<label class="sr-only"></label>
				<input type="text" class="form-control"  value="input被禁用" disabled />
			</div>
		</form>
		</fieldset>
	</div>

a 标签的链接功能不受影响

默认情况下，浏览器会将 <fieldset disabled> 内所有的原生的表单控件（input、select 和 button 元素）设置为禁用状态，防止键盘和鼠标与他们交互。然而，如果表单中还包含 a 元素，这些元素将只被赋予 pointer-events: none 属性。正如在关于禁用状态的按钮章节中（尤其是关于锚点元素的子章节中）所描述的那样，该 CSS 属性尚不规范，并且在 Opera 18 及更低版本的浏览器或 Internet Explorer 11 总没有得到全面支持，并且不会阻止键盘用户能够获取焦点或激活这些链接。所以为了安全起见，建议使用自定义 JavaScript 来禁用这些链接。

只读状态

为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。

<div class="form-group">
    <label class="sr-only"></label>
    <input type="text" class="form-control"  value="input为只读" readonly />
</div>

校验状态

Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。

<div class="form-group has-error">
    <label class="sr-only"></label>
    <input type="text" class="form-control"   />
</div>
<div class="form-group has-success">
    <label class="sr-only"></label>
    <input type="text" class="form-control"   />
</div>
<div class="form-group has-warning">
    <label class="sr-only"></label>
    <input type="text" class="form-control" />
</div>

ng)]

按钮

可作为按钮使用的标签或元素

为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"/>
	<title>按钮</title>
</head>
<body>
	<div class="container">
		<a href="#" class="btn btn-default">a btn btn-default</a>
		<button class="btn btn-default">btn btn-default</button>
		<input type="button" class="btn btn-default" value="input button btn btn-default" />
		<input type="submit" class="btn btn-default" value="input submit btn btn-default" />
	</div>
</body>
</html>

针对组件的注意事项

虽然按钮类可以应用到 <a> 和 <buton> 元素上，但是，导航和导航条组件只支持 <buton> 元素。

链接被作为按钮使用时的注意事项

如果 <a> 元素被作为按钮使用 – 并用于在当前页面触发某些功能 – 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性。

预定义样式

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"/>
	<title>按钮</title>
</head>
<body>
	<div class="container">
		<!-- 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>
	</div>
</body>
</html>

尺寸

需要让按钮有不同的尺寸使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

<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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xq7Z8tZt-1599352093194)(C:\Users\xuhaitao\AppData\Roaming\Typora\typora-user-images\image-20200819150842083.png)]

通过给按钮添加.btn-block类可以将其拉伸至父元素100%宽度，而且按钮也变为了块级（block）元素。

<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>

激活状态

当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于 <button> 元素，是通过 :active 状态实现的。对于 <a> 元素，是通过 .active 类实现的。然而，你还可以将 .active 应用到 <button> 上（包含 aria-pressed="true" 属性)），并通过编程的方式使其处于激活状态。

禁用状态

通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果。

button元素

为 <button> 元素添加 disabled 属性，使其表现出禁用状态。

<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>

a元素

为基于 <a> 元素创建的按钮添加 .disabled 类。

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

链接的原始功能不受影响

上面提到的类只是通过设置 pointer-events: none 来禁止 <a> 元素作为链接的原始功能，但是，这一 CSS 属性并没有被标准化，并且 Opera 18 及更低版本的浏览器并没有完全支持这一属性，同样，Internet Explorer 11 也不支持。In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. 因此，为了安全起见，建议通过 JavaScript 代码来禁止链接的原始功能。

Bootstrap 组件

下拉菜单

实例

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	<title>下拉菜单</title>
</head>
<body>
	<div class="container">
		<div class="dropdown">
		  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
		    下拉菜单
		    <span class="caret"></span>
		  </button>
		  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
		    <li><a href="#">1</a></li>
		    <li><a href="#">2</a></li>
		    <li><a href="#">3</a></li>
		    <li role="separator" class="divider"></li>
		    <li><a href="#">4</a></li>
		  </ul>
		</div>
	</div>
	<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

对齐

默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。

<div class="dropdown  pull-right">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu  dropdown-menu-right" aria-labelledby="dropdownMenu1">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">4</a></li>
    </ul>
</div>

标题

在任何下拉菜单中均可通过添加标题来标明一组动作。

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
        <li class="dropdown-header">小写数字</li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li class="dropdown-header">字母</li>
        <li><a href="#">a</a></li>
        <li><a href="#">b</a></li>
        <li><a href="#">c</a></li>
    </ul>  
</div>

效果：

分割线

为下拉菜单添加一条分割线，用于将多个链接分组。class="divider"

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
        <li class="dropdown-header">小写数字</li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li class="divider">字母</li>
        <li><a href="#">a</a></li>
        <li><a href="#">b</a></li>
        <li><a href="#">c</a></li>
    </ul>  
</div>

禁用的菜单项

为下拉菜单中的 li 元素添加 .disabled 类，从而禁用相应的菜单项。

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
        <li class="dropdown-header">小写数字</li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li class="divider">字母</li>
        <li><a href="#">a</a></li>
        <li class="disabled"><a href="#">b</a></li>
        <li><a href="#">c</a></li>
    </ul>  
</div>

说与风听

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap入门bootstrap_css

Bootstrap CSS样式Bootstrap下载生产环境的Bootstrap(官方)网盘：https://haitao1115.lanzous.com/iuIXHejkutcBootstrap 源码网盘：https://haitao1115.lanzous.com/ieAFQejkuqj由于笔记是在学习过程中编写，导致图片没法正常显示笔记存在个人网盘：点这里入门例子根据官网例子模拟出一个相似的官网示例：代码实现：<!DOCTYPE html><html
复制链接

扫一扫