Bootstrap 框架快速上手，这位阿里 P7 大牛分析总结的属实到位
[](
)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>
<pre class="pre-scrollable">
<ol>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
</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>
<table class="table table-bordered table-striped table-hover table-condensed">
<tr>
<th>JavaSE</th>
<th>数据库</th>
<th>JavaScript</th>
</tr>
<tr>
<td>面向对象</td>
<td>oracle</td>
<td>json</td>
</tr>
<tr>
<td>数组</td>
<td>mysql</td>
<td>ajax</td>
</tr>
<tr>
<td>面向对象</td>
<td>oracle</td>
<td>json</td>
</tr>
<tr>
<td>数组</td>
<td>mysql</td>
<td>ajax</td>
</tr>
</table>
</body>
[](
)4.10.3、tr、th、td 样式
提供了五种不同的类名，每种类名控制了行的不同背景颜色
| 类名 | 说明 |
| --- | --- |
| active | 将悬停的颜色应用在行或者单元格上 |
| success | 表示成功的操作 |
| info | 表示信息变化的操作 |
| warning | 表示一个警告的操作 |
| danger | 表示一个危险的操作 |
<body>
<table class="table table-bordered table-striped table-hover table-condensed">
<tr class="info">
<th>JavaSE</th>
<th>数据库</th>
<th>JavaScript</th>
</tr>
<tr class="active">
<td>面向对象</td>
<td>oracle</td>
<td>json</td>
</tr>
<tr class="danger">
<td>数组</td>
<td>mysql</td>
<td>ajax</td>
</tr>
<tr class="warning">
<td>面向对象</td>
<td>oracle</td>
<td>json</td>
</tr>
<tr class="success">
<td>数组</td>
<td>mysql</td>
<td>ajax</td>
</tr>
</table>
</body>
[](
)5、表单
======================================================================
表单主要功能是用来和用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：
文本输入框
下拉选择框
单选按钮
复选按钮
文本域和按钮等
[](
)5.1、表单控件
class="form-control"表单元素的样式class="input-lg"：表单控件较大class="input-sm"： 表单控件较小
[](
)5.1.1、输入框 text
添加
class = "form-controll"
<div class="container">
<div class="row">
<div class="col-sm-3">
<input type="text" name="" id="" />
<input type="text" name="" id="" class="form-control" />
<input type="text" name="" id="" class="form-control input-lg" />
<input type="text" name="" id="" class="form-control input-sm" />
</div>
</div>
</div>
[](
)5.1.2、下拉选择框 select
添加
class = "form-controll"多个选择设置
multiple="multuple"
<body>
<div class="container">
<select>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
<hr>
<hr>
<hr>
<select class="form-control">
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
<hr>
<hr>
<hr>
<select class="form-control" multiple="multuple">
<option >北京</option>
<option>上海</option>
<option>深圳</option>
</select>
</div>
</body>
[](
)5.1.3、文本域 textarea
添加
class = "form-controll"一般都是用栅格来控制文本域的大小
<div class="container">
<div class="row">
<div class="col-sm-3">
<textarea rows="3"></textarea>
</div>
<div class="col-sm-6">
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
</div>
[](
)5.1.4、复选框 checkbox
垂直显示(给 input 标签加)：
class="checkbox"水平显示(给 label 标签加)：
class="checkbox-inline"
<div class="container">
<div>
<div class="checkbox">
<label><input type="checkbox" >游戏</label>
</div>
<div class="checkbox">
<label><input type="checkbox" >学习</label>
</div>
</div>
<div>
<label class="checkbox-inline">
<input type="checkbox" >游戏
</label>
<label class="checkbox-inline">
<input type="checkbox" >学习
</label>
</div>
</div>
[](
)5.1.5、单选框 radio
垂直显示(给 input 标签加)：
class="radio"水平显示(给 label 标签加)：
class="radio-inline"
<div class="container">
<div class="row">
<div>
<div class="radio">
<label><input type="radio" >男</label>
</div>
<div class="radio">
<label><input type="radio" >女</label>
</div>
</div>
<div>
<label class="radio-inline">
<input type="radio" >男
</label>
<label class="radio-inline">
<input type="radio" >女
</label>
</div>
</div>
</div>
[](
)5.1.6、按钮
[](
)①基础样式
基础样式(给 button 标签加)：
class="btn"
<button class="btn">按钮</button>
[](
)②附加样式
| 类名 | 样式 |
| --- | --- |
| 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 |
<div class="container">
<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-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
<button type="button" class="btn btn-link">（链接）Link</button>
</div>
[](
)③多标签支持
多标签支持：使用 a div input 等制作按钮
<div class="container">
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
</div>
注意：
虽然按钮类可以应用到
<a>和<button>元素上，但是，导航和导航条组件只支持<button>元素。如果
<a>元素被作为按钮使用 – 并用于在当前页面触发某些功能 – 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置role="button"属性。我们总结的最佳实践是：强烈建议尽可能使用
<button>元素来获得在各个浏览器上获得相匹配的绘制效果。
[](
)④设置按钮大小
使用
.btn-lg、.btn-sm或.btn-xs就可以获得不同尺寸的按钮class="btn-lg"大按钮class="btn-sm"小按钮class="btn-xs"超小按钮
<div class="container">
<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"属性，使其表现出禁用状态。
<div class="container">
<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>
<form action="#" class="form-horizontal" role="form">
<h2 align="center">用户信息表</h2>
<div class="form-group">
<label for="uname" class="control-label col-md-2">姓名</label>
<div class="col-md-8">
<input type="text" id="uname" class="form-control" placeholder="请输入姓名" />
</div>
</div>
<div class="form-group">
<label for="upwd" class="control-label col-md-2">密码</label>
<div class="col-md-8">
<input type="password" id="upwd" class="form-control" placeholder="请输入密码" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">爱好</label>
<div class="col-md-8">
<label class="checkbox-inline">
<input type="checkbox" />敲代码
</label>
<label class="checkbox-inline">
<input type="checkbox" />跳舞
</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">城市</label>
<div class="col-md-8">
<select class="form-control">
<option>请选择城市</option>
<option>上海</option>
<option>北京</option>
<option>深圳</option>
</select>
</div>
</div>
<div class="form-group">
<label for="remark" class="control-label col-md-2">简介</label>
<div class="col-md-8">
<textarea id="remark" class="form-control"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-5">
<button class="btn btn-primary">提交</button>
</div>
</div>
</form>
</body>
[](
)5.2.1、内联表单
如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向
<form>标签添加class="form-inline"。
<body>
<div class="container">
<form action="#" class="form-inline" role="form">
<div class="form-group">
<label for="userName">姓名</label>
<input type="text" id="userName" class="form-control" placeholder="请输入姓名" />
</div>
<div class="form-group">
<label for="userPwd">密码</label>
<input type="text" id="userPwd" class="form-control" placeholder="请输入姓名" />
</div>
<div class="form-group">
<label for="userName">姓名</label>
<input type="text" id="userName" class="form-control" placeholder="请输入密码" />
</div>
<div class="form-group">
<button class="btn btn-warning">提交</button>
</div>
</form>
</div>
</body>
[](
)6、缩略图
=======================================================================
[](
)6.1、字体图标
在我们下载的 Bootstrap 加压文件中有 fonts 文件夹，里面就是我们的字体图标
只需将 fonts 文件夹复制到我们的项目红，我们就可以使用字体图标了
语法：
<span class="字体图标类名"> 字体图标 </span>
字体图标类名地址查看，需要时去复制即可：[https://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm](
)
[](
)6.2、缩略图使用
大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式
使用 Bootstrap 创建缩略图的步骤如下：
在图像周围添加带有
class="thumbnail"的<a>标签。这会添加四个像素的内边距（padding）和一个灰色的边框。
当鼠标悬停在图像上时，会动画显示出图像的轮廓。
<body>
<div class="container">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/timg.jpg" alt="通用的占位符缩略图">
</a>
</div>
</div>
</body>
[](
)6.3、自定义内容
现在我们有了一个基本的缩略图，我们可以向缩略图添加各种 HTML 内容，比如标题、段落或按钮。具体步骤如下：
把带有
class="thumbnail"的<a>标签改为<div>。在该
<div>内，您可以添加任何您想要添加的东西。由于这是一个<div>，我们可以使用默认的基于 span 的命名规则来调整大小。如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。
<div class="container">
<div class="col-md-3">
<div class="thumbnail">
<img src="img/timg.jpg" alt="...">
<h3>高圆圆</h3>
<p>出生于北京市，中国内地影视女演员、模特。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span>喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/timg.jpg" alt="...">
<h3>高圆圆</h3>
<p>出生于北京市，中国内地影视女演员、模特。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span>喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/timg.jpg" alt="...">
<h3>高圆圆</h3>
<p>出生于北京市，中国内地影视女演员、模特。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span>喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
....
....
</div>
[](
)6.4、面板
面板组件用于把 DOM 组件插入到一个盒子中
创建一个基本的面板，只需要向
<div>元素添加class="panel panel-default"即可
<div class="panel panel-default">
<div class="panel-body">
这是一个基本的面板
</div>
</div>
默认的 .panel 组件所做的只是设置基本的边框 border 和 內补 padding 来包含内容
[](
)6.4.1、面板
给盒子添加
class="panel-heading"可以很简单地向面板添加标题。给盒子添加
class="panel-body"可以向面板添加主题内容
<div class="panel panel-warning">
<div class="panel-heading">
<h2>明星合集</h2>
</div>
<div class="panel-body">
<div class="col-md-3">
<div class="thumbnail">
<img src="img/timg.jpg" alt="...">
<h3>高圆圆</h3>
<p>出生于北京市，中国内地影视女演员、模特。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span>喜欢</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
</div>
</div>
[](
)7、导航元素
========================================================================
[](
)7.1、标签式的导航菜单
给一个无序列表添加
class="nav nav-tabs"给任意一个 li 添加
class="active"（表示选中这个导航）
<body>
<div class="container">
<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
<li> <a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li class="active"><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>
</body>
[](
)7.2、胶囊式的导航菜单
给一个无序列表添加
class="nav nav-pills"给任意一个 li 添加
class="active"（表示选中这个导航）
<div class="container">
<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills">
<li><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li class="active"><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>
[](
)①垂直的胶囊式导航菜单
给一个无序列表添加
class="nav nav-pills"的同时添加class="nav-stacked"给任意一个 li 添加
class="active"（表示选中这个导航）
<div class="container">
<p>基本的垂直的胶囊式导航菜单</p>
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li class="active"><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>
[](
)7.3、两端对齐导航
让标签式导航两端对齐：给一个无序列表添加
class="nav nav-tabs nav-justified"让胶囊式导航两端对齐：给一个无序列表添加
class="nav nav-pills nav-justified"
<div class="container">
<p>两端对齐的标签导航元素</p>
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul><br><br><br>
<hr>
<p>两端对齐的胶囊导航元素</p>
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</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"（表示选中这一页）
<div class="container">
<p>分页导航</p>
<ul class="pagination">
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
[](
)8.2、翻页
给一个无序列表添加
class="pager"
<div class="container">
<p>翻页导航</p>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
[](
)9、插件
======================================================================
我们在使用 Bootstrap 插件时
引入 Bootstrap 的核心 CSS 文件
引入 jquery 的核心 js 文件,需要在 bootstrap 的 js 之前引入
引入 Bootstrap 的核心 js 文件
<head>
<meta charset="utf-8" />
<title>Document</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
[](
)9.1、下拉菜单
使用一个
class="dropdown"的div包裹整个下拉框使用一个
class="dropdown-toggle" data-toggle="dropdown"的按钮作为父菜单给父菜单后设置一个下拉箭头
使用一个
class="dropdown-menu"的 ul 列表作为下拉菜单项使用
class="dropdown-header"的 li 作为分组的标题使用
class="driver"的 li 作为下拉分割线
<body>
<!-- 1.使用一个类名为 dropdown 或 btn-group 的 div 包裹整个下拉框
<div class="dropdown"></div>
默认下拉框向上为 dropup ,向下为 dropdown
-->
<div class="dropdown">
<!--
使用 button 作为父菜单,使用类名: dropdown-toggle 和自定义 data-toggle 属性
-->
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
喜欢的频道
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">科普</li>
<li><a href="#">人与自然</a></li>
<li class="driver"></li>
<li class="dropdown-header">影视</li>
<li class="active"><a href="#">快乐大本营</a></li>
<li class="disabled"><a href="#">暴走大事件</a></li>
<li><a href="#">木鱼水心</a></li>
</ul>
</div>
</body>
[](
)9.2、模态框
使用方式一：通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性
data-toggle="modal"，同时设置data-target="#identifier"或href="#identifier"来指定要切换的特定的模态框(带有id ="identifier")使用方式二：通过 JavaScript：使用这种技术，可以通过简单的一行 JavaScript 来调用带有
id="identifier"的模态框：
[](
)9.2.1、方式一
还未添加个人签名 2021.03.18 加入
还未添加个人简介
评论