Bootstrap只求入门，不求精通！（未完待续）

最新推荐文章于 2020-12-06 23:44:28 发布

原创最新推荐文章于 2020-12-06 23:44:28 发布 · 381 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

前端设计专栏收录该内容

3 篇文章

订阅专栏

1. HTML模板

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap的HTML标准模板</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>

<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

2. 排版

2.1 标题

直接在HTML中定义<h1>到<h6>即可。Bootstrap覆盖了其默认的样式，具体定义的规则如下表所示：
在这里插入图片描述
在Bootstrap中为了让非标题元素和标题使用相同的样式，还定义了.h1 ~ .h6六个类名。以下是实例演示：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap的HTML标准模板</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<!--Bootstrap中的标题-->
<h1>Bootstrap标题一</h1>
<h2>Bootstrap标题二</h2>
<h3>Bootstrap标题三</h3>
<h4>Bootstrap标题四</h4>
<h5>Bootstrap标题五</h5>
<h6>Bootstrap标题六</h6>

<!--Bootstrap中让非标题元素和标题使用相同的样式-->
<div class="h1">Bootstrap标题一</div>
<div class="h2">Bootstrap标题二</div>
<div class="h3">Bootstrap标题三</div>
<div class="h4">Bootstrap标题四</div>
<div class="h5">Bootstrap标题五</div>
<div class="h6">Bootstrap标题六</div>

<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

在这里插入图片描述

2.1.1 副标题

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap的HTML标准模板</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<!--Bootstrap中的标题-->
<h1>Bootstrap标题一 <small>我是副标题</small></h1>
<h2>Bootstrap标题二 <small>我是副标题</small></h2>
<h3>Bootstrap标题三 <small>我是副标题</small></h3>
<h4>Bootstrap标题四 <small>我是副标题</small></h4>
<h5>Bootstrap标题五 <small>我是副标题</small></h5>
<h6>Bootstrap标题六 <small>我是副标题</small></h6>

<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

在这里插入图片描述

2.2 段落

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap的HTML标准模板</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<p>
    超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；
    服务及时贴心，内容专业、有趣易学。
    专注服务互联网工程师快速成为技术高手！
    超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；
    服务及时贴心，内容专业、有趣易学。
    专注服务互联网工程师快速成为技术高手！
</p>

<p>
    超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；
    服务及时贴心，内容专业、有趣易学。
    专注服务互联网工程师快速成为技术高手！
    超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；
    服务及时贴心，内容专业、有趣易学。
    专注服务互联网工程师快速成为技术高手！
</p>

<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

注意，在Bootstrap中特意设置了p元素的margin值，使得段落与段落之间有一定的间距：
在这里插入图片描述

2.3 强调内容

2.3.1 强调段落p

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap的HTML标准模板</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<p>我是普通文本，我的样子长成这样我是普通文本，我的样子长成这样我是普通文本，</p>
<p class="lead">我是特意要突出的文本，我的样子成这样。我是特意要突出的文本，我的样子长成这样。</p>

<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

在这里插入图片描述

2.3.2 强调文本

以下代码演示了粗体和斜体的强调文本：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap的HTML标准模板</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<p>
    超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；
    服务及时贴心，<small>内容专业</small>、<strong>有趣易学</strong>。
    专注服务互联网工程师快速成为技术高手！
    超酷的<em>互联网</em>、IT技术免费学习平台，创新的网络一站式学习、实践体验；
    服务及时贴心，<em>内容专业</em>、<cite>有趣易学</cite>。
    专注服务互联网工程师快速成为<cite>技术高手</cite>！
</p>

<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

在这里插入图片描述

2.3.3 强调不同的颜色

Bootstrap定义了一套类名，具体说明如下：

.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap的HTML标准模板</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="text-muted">.text-muted 效果</div>
<div class="text-primary">.text-primary 效果</div>
<div class="text-success">.text-success 效果</div>
<div class="text-info">.text-info 效果</div>
<div class="text-warning">.text-warning 效果</div>
<div class="text-danger">.text-danger 效果</div>
<p>我就是一个普通的段落orz</p>

<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

在这里插入图片描述

2.4 文本对齐风格

为了简化操作，Bootstrap通过定义四个类名来控制文本对齐风格：

.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}

2.5 列表

列表结构主要有三种：有序列表、无序列表、定义列表。
但是用Bootstrap风格的定义列表有点丑orz，不知道.jpg。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap的HTML标准模板</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<ul>
    <li>无序列表信息1</li>
    <li>无序列表信息2</li>
    <li>无序列表信息3</li>
</ul>
<ol>
    <li>有序列表信息1</li>
    <li>有序列表信息2</li>
    <li>有序列表信息3</li>
</ol>
<dl>
    <dt>定义列表标题</dt>
        <dd>定义列表信息1</dd>
        <dd>定义列表信息2</dd>
    <dt>定义列表标题2</dt>
        <dd>定义列表信息1</dd>
        <dd>定义列表信息2</dd>
</dl>

<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

在这里插入图片描述

2.5.1 去点列表

为了去掉无序列表的点，可以给无序列表加一个类名“.list-unstyled”，这样就可以去掉点。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap的HTML标准模板</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<ul>
    <li>无序列表信息1</li>
    <li>无序列表信息2</li>
    <li>无序列表信息3</li>
</ul>
<ul class="list-unstyled">
    <li>无序列表信息1</li>
    <li>无序列表信息2</li>
    <li>无序列表信息3</li>
</ul>

<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

在这里插入图片描述

2.5.2 内联列表

内联列表就是将垂直列表转换为水平列表，为制作水平导航而生。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap的HTML标准模板</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<ul class="list-inline">
    <li>W3cplus</li>
    <li>Blog</li>
    <li>CSS3</li>
    <li>jQuery</li>
    <li>PHP</li>
</ul>

<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

在这里插入图片描述

2.6 代码

为了在网页中显示代码，可以使用<code>、<pre>、<kbd>标签，其中：

<code>显示单行代码
<pre>显示多行块代码
<kbd>显示用户输入的代码，浏览器通常用等宽字体显示

代码中出现的大于号和小于号一定要使用转义！
效果示意：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap的HTML标准模板</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<code>
    &lt;b&gt;我变得粗壮！&lt;/b&gt;
    &lt;b&gt;我变得威猛！&lt;/b&gt;
</code>
<pre>
    &lt;b&gt;我变得粗壮！&lt;/b&gt;
    &lt;b&gt;我变得威猛！&lt;/b&gt;
</pre>
<kbd>
    &lt;b&gt;我变得粗壮！&lt;/b&gt;
    &lt;b&gt;我变得威猛！&lt;/b&gt;
</kbd>

<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

在这里插入图片描述

2.7 表格

表格分为：

基础表格
斑马线表格
带边框的表格
鼠标悬停高亮的表格
紧凑型表格
响应式表格

概览：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap的HTML标准模板</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<h1>基础表格</h1>
<table class="table">
    <thead>
    <tr>
        <th>表格标题</th>
        <th>表格标题</th>
        <th>表格标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    </tbody>
</table>
<h1>斑马线表格</h1>
<table class="table table-striped">
    <thead>
    <tr>
        <th>表格标题</th>
        <th>表格标题</th>
        <th>表格标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    </tbody>
</table>
<h1>带边框的表格</h1>
<table class="table table-bordered">
    <thead>
    <tr>
        <th>表格标题</th>
        <th>表格标题</th>
        <th>表格标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    </tbody>
</table>
<h1>鼠标悬浮高亮的表格</h1>
<table class="table table-striped table-bordered table-hover">
    <thead>
    <tr>
        <th>表格标题</th>
        <th>表格标题</th>
        <th>表格标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    </tbody>
</table>
<h1>紧凑型表格</h1>
<table class="table table-condensed">
    <thead>
    <tr>
        <th>表格标题</th>
        <th>表格标题</th>
        <th>表格标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    </tbody>
</table>
<h1>响应式表格</h1>
<div class="table-responsive">
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>表格标题</th>
            <th>表格标题</th>
            <th>表格标题</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>表格单元格</td>
            <td>表格单元格</td>
            <td>表格单元格</td>
        </tr>
        <tr>
            <td>表格单元格</td>
            <td>表格单元格</td>
            <td>表格单元格</td>
        </tr>
        <tr>
            <td>表格单元格</td>
            <td>表格单元格</td>
            <td>表格单元格</td>
        </tr>
        <tr>
            <td>表格单元格</td>
            <td>表格单元格</td>
            <td>表格单元格</td>
        </tr>
        </tbody>
    </table>
</div>

<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

在这里插入图片描述

2.7.1 表格行的类

Bootstrap为表格的行元素<tr>提供了五种不同的类名，每一个类控制了行的不同背景颜色，具体说明如下表所示：
在这里插入图片描述
示例演示：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap的HTML标准模板</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<table class="table table-bordered">
    <thead>
    <tr>
        <th>类名</th>
        <th>描述</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>对照组</td>
        <td>什么都不加，用于对照实验</td>
    </tr>
    <tr class="active">
        <td>.active</td>
        <td>表示当前活动的信息</td>
    </tr>
    <tr class="success">
        <td>.success</td>
        <td>表示成功或者正确的行为</td>
    </tr>
    <tr class="info">
        <td>.info</td>
        <td>表示中立的信息或行为</td>
    </tr>
    <tr class="warning">
        <td>.warning</td>
        <td>表示警告，需要特别注意</td>
    </tr>
    <tr class="danger">
        <td>.danger</td>
        <td>表示危险或者可能是错误的行为</td>
    </tr>
    </tbody>
</table>

<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

在这里插入图片描述

2.7.2 基础表格

以下演示了基本表格的使用，注意，如果不加“.class”类，表格的样式与Bootstrap无关，只有加了“.class”类才能得到Bootstrap的基础表格：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap的HTML标准模板</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<table class="table">
    <thead>
    <tr>
        <th>表格标题</th>
        <th>表格标题</th>
        <th>表格标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    </tbody>
</table>

<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

在这里插入图片描述

3. 表单

3.1 基础表单

以下是基础表单的模板：
（注：通过body的样式实现对表单大小的控制）

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap的HTML标准模板</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="padding: 50px 100px">

<form role="form">
    <div class="form-group">
        <label for="exampleInputEmail1">邮箱</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">密码</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> 记住密码
        </label>
    </div>
    <button type="submit" class="btn btn-default">进入邮箱</button>
</form>

<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

在这里插入图片描述

3.2 水平表单

Bootstrap框架默认的表单是垂直显示风格，但有时候我们需要水平表单风格。
如果想要实现水平表单效果，必须满足以下两个条件：

在<form>元素中使用类名“form-horizontal”
配合Bootstrap框架的网格系统

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap的HTML标准模板</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="padding: 50px 50px">

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox"> 记住密码
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">进入邮箱</button>
        </div>
    </div>
</form>

<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

在这里插入图片描述

3.3 内联表单

有时候我们需要将表单的控件都在一行内显示。为了实现这个效果，可以在<form>元素中添加类名“form-inline”即可。
注：在label标签中指定了类“sr-only”，表示不可见，其内容仅供屏幕阅读器（为残障人士服务）使用。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap的HTML标准模板</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="padding: 50px 50px">

<form class="form-inline" role="form">
    <div class="form-group">
        <!-- sr-only表示不可见，其内容仅供屏幕阅读器（为残障人士服务）使用 -->
        <label class="sr-only" for="exampleInputEmail2">邮箱</label>
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
    </div>
    <div class="form-group">
        <label class="sr-only" for="exampleInputPassword2">密码</label>
        <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> 记住密码
        </label>
    </div>
    <button type="submit" class="btn btn-default">进入邮箱</button>
</form>

<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

在这里插入图片描述

3.4 输入框input

单行输入框。注意在Bootstrap中使用input时必须添加type类型，如果不指定type类型将无法得到正确的样式。（实际上，当我去掉type以后貌似也能正常显示orz）

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap的HTML标准模板</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="padding: 50px 50px">

<form role="form">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Enter email">
    </div>
</form>

<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

在这里插入图片描述

3.5 下拉选择框select

下拉选择框的使用方法和非Bootstrap原始使用相一致。
设置“multiple”表示多行选择。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap的HTML标准模板</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="padding: 50px 50px">

<form role="form">
    <div class="form-group">
        <select class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
    <div class="form-group">
        <select multiple class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
</form>

<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

在这里插入图片描述

3.6 文本域textarea

文本域的使用方法和原始方法一样。但如果textarea元素中添加了类名“form-control”，则无需设置cols属性。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap的HTML标准模板</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="padding: 50px 50px">

<form role="form">
    <div class="form-group">
        <textarea class="form-control" rows="3"></textarea>
    </div>
</form>

<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

在这里插入图片描述

3.7 复选框checkbox和单选按钮radio

为了解决恼人的对齐问题，使用Bootstrap框架，不需要考虑太多，直接按如下方法使用即可：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap的HTML标准模板</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="padding: 50px 50px">

<form role="form">
    <h3>案例1</h3>
    <div class="checkbox">
        <label>
            <input type="checkbox" value="">
            记住密码
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
            喜欢
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
            不喜欢
        </label>
    </div>
</form>

<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

在这里插入图片描述

水平排列

如果复选框和单选按钮需要水平排列，只需要在label标签上添加类名“checkbox-inline”或“radio-inline”。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap的HTML标准模板</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="padding: 50px 50px">

<form role="form">
    <div class="form-group">
        <label class="checkbox-inline">
            <input type="checkbox" value="option1">游戏
        </label>
        <label class="checkbox-inline">
            <input type="checkbox" value="option2">摄影
        </label>
        <label class="checkbox-inline">
            <input type="checkbox" value="option3">旅游
        </label>
    </div>
    <div class="form-group">
        <label class="radio-inline">
            <input type="radio" value="option1" name="sex">男性
        </label>
        <label class="radio-inline">
            <input type="radio" value="option2" name="sex">女性
        </label>
        <label class="radio-inline">
            <input type="radio" value="option3" name="sex">中性
        </label>
    </div>
</form>

<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>