Bootstrap 框架快速上手

作者：Java高工P7

2021 年 11 月 10 日
本文字数：9779 字
阅读完需：约 32 分钟

</body>

我们让第二个盒子向右浮动 3 个列的距离

<body>

</div>

</body>

3.4、列嵌套

列嵌套：你可以在一个列中添加一个或者多个行(row) 容器，然后在这个行容器中插入列。

<body>

</div>

</div>

</body>

4、排版

======================================================================

4.1、标题

Bootstrap 和普通的 HTML 页面一样，定义标题都是使用标签 <h1> ~ <h6> ，只不过 Bootstrap 覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样，
为了让非标题元素和标题使用相同的样式，还特意定义了 .h1 ~ .h6 六个类名。同时后面可以紧跟着一行小的标题 <small></small> 或使用 .small

<h1>Bootstrap Heading<small>副标题</small></h1>

Bootstrap 标题 1

</div>

4.2、段落

段落是排版中的另一个重要元素之一。
通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和 margin 也做相应的处理)。可以使用以下标签给文本做突出样式处理。
<small> ：小号字
<b><strong>：加粗
<i><em>: 斜体

<p>以后的你会感谢现在努力的你</p>

<p class="lead">以后的你会感谢现在努力的你</p>

</p>

4.3、强调

定义了一套类名，这里称其为强调类名，这些强调嘞都是通过颜色来表示强调，具体说明如下：

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

</div>

4.4、对齐效果

在 CSS 中常常使用text-align 来实现文本的对齐风格的设置。

其中主要有四种风格

| 值 | 说明 |

| --- | --- |

| left | 左对齐 |

| right | 右对齐 |

| center | 居中对齐 |

| justify | 两端对齐 |

Bootstrap 中通过定义四个类名来控制文本的对齐风格

| 类名 | 说明 |

| --- | --- |

| text-left | 左对齐 |

| text-right | 右对齐 |

| text-center | 居中对齐 |

| text-justify | 两端对齐 |

<p class="text-justify">网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分 12 份(也有平分成 24 份或 32 份，但 12 份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap 框架中的网格系统就是将容器平分成 12 份

</p>

</div>

4.8、列表

4.8.1、无序列表

排列顺序无关紧要的一列元素。

<ul>

</ul>

4.8.2、有序列表

顺序至关重要的一组元素。

<ol>

</ol>

4.8.3、自定义列表

<dl>

<dd>超文本标记语言</dd>

<dd>层叠样式表是一种样式表语言</dd>

</dl>

4.8.3、水平定义列表

在原有的基础加入了一些样式，使用样式class="dl-horizontal" 制作水平定义列表，当标题宽度超过 160px 时，将会显示三个省略号。

<dt>HTML 超文本标记语言</dt>

<dd>HTML 称为超文本标记语言，是一种标识性的语言。</dd>

<dt>测试标题不能超过 160px 的宽度,否则 2 个点</dt>

<dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果。</dd>

</dl>

</div>

4.8.4、去点列表

移除了默认的 list-style 样式，也就是去掉了原无序列表前面的点 (去掉项目符号(编号))

</ul>

4.8.5、内联列表

给列表添加class="list-inline"，把垂直列表换成水平列表，而且去掉项目符号(编号)，将所有元素放置于同一行。也可以说内联列表就是为了制作水平导航而生的。

<ul>

</ul>

4.9、代码

一般在个人博客上使用的较为频繁，用于显示代码的风格。在 Bootstrap 主要提供了三种代码风格：

使用<code></code> 来显示单行内联代码
使用<pre></pre> 来显示多行块代码
样式pre-scrollable(height，max-height 高度固定为 340px，超过则存在滚动条)
使用<kbd></kbd> 来显示用户输入代码。如快捷键

4.9.1、单行内联代码

<code>this is a simple code</code>

4.9.2、快捷键

<p>

使用<kbd>ctrl+s</kbd>保存

</p>

4.9.2、多行块代码

<body>

<pre>

public class HelloWorld {

public static void main(String[] args){

System.out.println("helloworld...");

}

</pre>

<!--

2.显示 html 标签的代码需要适应字符实体

小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代

-->

<pre>

<h2>Hello World</h2>

</pre>

<pre>

<h2>Hello World</h2>

</pre>

<ol>

</ol>

</pre>

</body>

4.10、表格

Bootstrap 为表格提供了 1 种基础样式和 4 种附加样式以及 1 个支持响应式的表格。在使用 Bootstrap 得到表格过程种，只需要添加对应的类名就可以得到不同的表格风格。

4.10.1、基础样式

class = "table" ：基础表格

4.10.2、附加样式

| 类名 | 说明 |

| --- | --- |

| table-striped | 斑马线表格 |

| table-bordered | 带边框的表格 |

| table-hover | 鼠标悬停高亮的表格 |

| table-condensed | 紧凑型表格，单元格没内距或者内距较其他表格的内距小 |

<body>

<tr>

<th>JavaSE</th>

<th>JavaScript</th>

</tr>

<tr>

<td>oracle</td>

</tr>

<tr>

<td>mysql</td>

</tr>

<tr>

<td>oracle</td>

</tr>

<tr>

<td>mysql</td>

</tr>

</table>

</body>

4.10.3、tr、th、td 样式

提供了五种不同的类名，每种类名控制了行的不同背景颜色

| 类名 | 说明 |

| --- | --- |

| active | 将悬停的颜色应用在行或者单元格上 |

| success | 表示成功的操作 |

| info | 表示信息变化的操作 |

| warning | 表示一个警告的操作 |

| danger | 表示一个危险的操作 |

<body>

<th>JavaSE</th>

<th>JavaScript</th>

</tr>

<td>oracle</td>

</tr>

<td>mysql</td>

</tr>

<td>oracle</td>

</tr>

<td>mysql</td>

</tr>

</table>

</body>

5、表单

======================================================================

表单主要功能是用来和用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：

文本输入框
下拉选择框
单选按钮
复选按钮
文本域和按钮等

5.1、表单控件

class="form-control" 表单元素的样式
class="input-lg" ：表单控件较大
class="input-sm" ：表单控件较小

5.1.1、输入框 text

添加class = "form-controll"

</div>

5.1.2、下拉选择框 select

添加class = "form-controll"
多个选择设置multiple="multuple"

<body>

</select>

<hr>

</select>

<hr>

</select>

</div>

</body>

5.1.3、文本域 textarea

添加class = "form-controll"
一般都是用栅格来控制文本域的大小

</div>

</div>

5.1.4、复选框 checkbox

垂直显示(给 input 标签加)：class="checkbox"
水平显示(给 label 标签加)：class="checkbox-inline"

<div>

</div>

</div>

<div>

<input type="checkbox" >游戏

</label>

<input type="checkbox" >学习

</label>

</div>

5.1.5、单选框 radio

垂直显示(给 input 标签加)：class="radio"
水平显示(给 label 标签加)：class="radio-inline"

<div>

</div>

</div>

<div>

<input type="radio" >男

</label>

<input type="radio" >女

</label>

</div>

5.1.6、按钮

①基础样式

基础样式(给 button 标签加)：class="btn"

②附加样式

| 类名 | 样式 |

| --- | --- |

| class="btn btn-default" | 默认样式 Default |

| class="btn btn-primary" | 首选项 Primary |

| class="btn btn-success" | 成功 Success |

| class="btn btn-info" | 一般信息 Info |

| class="btn btn-warning" | 警告 Warning |

| class="btn btn-danger" | 危险 Danger |

| class="btn btn-link" | 链接 Link |

<button type="button" class="btn btn-default">（默认样式）Default</button>

<button type="button" class="btn btn-primary">（首选项）Primary</button>

<button type="button" class="btn btn-success">（成功）Success</button>

<button type="button" class="btn btn-warning">（警告）Warning</button>

<button type="button" class="btn btn-danger">（危险）Danger</button>

</div>

③多标签支持

多标签支持：使用 a div input 等制作按钮

<button class="btn btn-default" type="submit">Button</button>

</div>

注意：

虽然按钮类可以应用到 <a> 和 <button> 元素上，但是，导航和导航条组件只支持 <button> 元素。
如果 <a> 元素被作为按钮使用 – 并用于在当前页面触发某些功能 – 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性。
我们总结的最佳实践是：强烈建议尽可能使用 <button> 元素来获得在各个浏览器上获得相匹配的绘制效果。

④设置按钮大小

使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮
class="btn-lg" 大按钮
class="btn-sm" 小按钮
class="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>

</div>

⑤按钮禁用

为 <button> 元素添加 disabled="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>

</div>

5.2、表单布局

5.2.1、垂直表单

基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：

向父元素<form> 元素添加 role="form"
把标签和控件放在一个带有 class="form-group" 的<div> 中。这是获取最佳间距所必需的
向所有的文本元素 <input> 、<textarea> 、select 添加 class="form-control"

<body>

<h2 align="center">用户信息表</h2>

</div>

</div>

<input type="checkbox" />敲代码

</label>

<input type="checkbox" />跳舞

</label>

</div>

<option>请选择城市</option>

</select>

</div>

</div>

</div>

</form>

</body>

5.2.1、内联表单

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class="form-inline"。

<body>

</div>

</div>

</div>

</div>

</form>

</div>

</body>

6、缩略图

=======================================================================

6.1、字体图标

在我们下载的 Bootstrap 加压文件中有 fonts 文件夹，里面就是我们的字体图标
只需将 fonts 文件夹复制到我们的项目红，我们就可以使用字体图标了
语法：

字体图标类名地址查看，需要时去复制即可：https://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm

6.2、缩略图使用

大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式
使用 Bootstrap 创建缩略图的步骤如下：
在图像周围添加带有 class="thumbnail" 的 <a> 标签。
这会添加四个像素的内边距（padding）和一个灰色的边框。
当鼠标悬停在图像上时，会动画显示出图像的轮廓。

<body>

</a>

</div>

</body>

6.3、自定义内容

现在我们有了一个基本的缩略图，我们可以向缩略图添加各种 HTML 内容，比如标题、段落或按钮。具体步骤如下：

把带有 class="thumbnail" 的 <a> 标签改为 <div>。
在该 <div>内，您可以添加任何您想要添加的东西。由于这是一个 <div>，我们可以使用默认的基于 span 的命名规则来调整大小。
如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。

<p>出生于北京市，中国内地影视女演员、模特。</p>

<span class="glyphicon glyphicon-heart"></span>喜欢

</button>

<span class="glyphicon glyphicon-pencil"></span>评论

</button>

</div>

<p>出生于北京市，中国内地影视女演员、模特。</p>

<span class="glyphicon glyphicon-heart"></span>喜欢

</button>

<span class="glyphicon glyphicon-pencil"></span>评论

</button>

</div>

<p>出生于北京市，中国内地影视女演员、模特。</p>

<span class="glyphicon glyphicon-heart"></span>喜欢

</button>

<span class="glyphicon glyphicon-pencil"></span>评论

</button>

</div>

....

</div>

6.4、面板

面板组件用于把 DOM 组件插入到一个盒子中
创建一个基本的面板，只需要向 <div> 元素添加 class="panel panel-default" 即可

这是一个基本的面板

</div>

默认的 .panel 组件所做的只是设置基本的边框 border 和內补 padding 来包含内容

6.4.1、面板

给盒子添加 class="panel-heading" 可以很简单地向面板添加标题。
给盒子添加 class="panel-body" 可以向面板添加主题内容

</div>

<p>出生于北京市，中国内地影视女演员、模特。</p>

<span class="glyphicon glyphicon-pencil"></span>评论

</button>

</div>

7、导航元素

========================================================================

7.1、标签式的导航菜单

给一个无序列表添加 class="nav nav-tabs"
给任意一个 li 添加 class="active"（表示选中这个导航）

<body>

<p>标签式的导航菜单</p>

</ul>

</div>

</body>

7.2、胶囊式的导航菜单

给一个无序列表添加 class="nav nav-pills"
给任意一个 li 添加 class="active"（表示选中这个导航）

<p>基本的胶囊式导航菜单</p>

</ul>

</div>

①垂直的胶囊式导航菜单

给一个无序列表添加 class="nav nav-pills" 的同时添加class="nav-stacked"
给任意一个 li 添加 class="active"（表示选中这个导航）

<p>基本的垂直的胶囊式导航菜单</p>

</ul>

</div>

7.3、两端对齐导航

让标签式导航两端对齐：给一个无序列表添加 class="nav nav-tabs nav-justified"
让胶囊式导航两端对齐：给一个无序列表添加 class="nav nav-pills nav-justified"

<p>两端对齐的标签导航元素</p>

</ul><br><br><br>

<hr>

<p>两端对齐的胶囊导航元素</p>

</ul>

</div>

7.4、总结

| 类 | 描述 |

| --- | --- |

| .nav nav-tabs | 标签页 |

| .nav nav-pills | 胶囊式标签页 |

| .nav nav-pills nav-stacked | 胶囊式标签页以垂直方向堆叠排列的 |

| .nav-justified | 两端对齐的标签页 |

8、分页

======================================================================

8.1、默认的分页

给一个无序列表添加class="pagination"
给任意一个 li 添加 class="active"（表示选中这一页）

</ul>

</div>

发布于: 2021 年 11 月 10 日阅读数: 6

Java高工P7

关注

还未添加个人签名 2021.11.08 加入

还未添加个人简介

发布

暂无评论

创作场景

Bootstrap 框架快速上手

4.8.1、无序列表

4.8.2、有序列表

4.8.3、自定义列表

4.8.3、水平定义列表

4.8.4、去点列表

4.8.5、内联列表

4.9.1、单行内联代码

4.9.2、快捷键

4.9.2、多行块代码

4.10.2、附加样式

4.10.3、tr、th、td 样式

5.1.1、输入框 text

5.1.2、下拉选择框 select

5.1.3、文本域 textarea

5.1.4、复选框 checkbox

5.1.5、单选框 radio

5.1.6、按钮

①基础样式

②附加样式

③多标签支持

④设置按钮大小

⑤按钮禁用

5.2.1、垂直表单

5.2.1、内联表单

6.4.1、面板

①垂直的胶囊式导航菜单

Java高工P7

评论