响应式布局与 Bootstrap 框架之 02-Bootstrap 样式
AI 摘要
文章系统梳理 Bootstrap 3 的核心用法：从引入 CSS/JS、响应式栅格（12 列、组合、偏移、嵌套、排序、多断点适配），到排版、列表、表单（基础/内联/水平、校验、尺寸）、按钮（7 种颜色、4 种尺寸）及图片（响应式、圆角、圆形、缩略图）的预定义类与实例代码，帮助开发者快速构建跨设备一致且美观的界面。
Bootstrap 初体验
Bootstrap 简介
Bootstrap 是美国 Twitter 公司的设计师 Mark Otto 和 Jacob Thornton 合作，基于 HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，让 Web 开发更加快捷。
Bootstrap 框架的优点：
- 开发方便快捷：Bootstrap 提供了丰富的预定义组件和样式，开发者可以迅速构建出美观的网页。
- 兼容处理：Bootstrap 对各种主流浏览器和设备都进行了兼容性优化，确保网页在各种环境下都能正常显示，为用户提供一致的浏览体验。
- 移动设备优先：Bootstrap 采用响应式设计理念，使得网站能够在不同屏幕尺寸的设备上自适应展示，提升用户体验。
- 使用广泛：Bootstrap 拥有广泛的社区支持和丰富的资源，开发者可以轻松找到解决方案和教程，从而加快开发速度。
- 自定义灵活：Bootstrap 提供了主题和样式定制功能，允许开发者根据项目需求对外观进行个性化调整。
Bootstrap 下载和使用
Bootstrap 3 文档：https://v3.bootcss.com/
用于生产环境的 Bootstrap 的基本结构：
在前端项目中，引入 Bootstrap 的 CSS 和 JS 文件，参照官方文档中的栅格系统与组件示例来构建页面，同时借助响应式工具类适配不同设备，即可快速上手使用 Bootstrap。
示例：Bootstrap 初体验
入口页面（index.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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.cn/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>示例效果：
Bootstrap 栅格系统
栅格系统简介
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或窗口尺寸的增加，系统会自动分为最多 12 列。
Bootstrap 栅格系统的工作原理：
- 行必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）的容器中。
- 通过行在水平方向创建 12 列。
- 通过预定义类（本质上是媒体查询）可以快速创建栅格布局。
Bootstrap 栅格系统的使用方式：列组合、列偏移、列嵌套、列排序。
列组合
列组合即使用 col-md-* 预定义类，更改数字来合并列。
示例：列组合
入口页面（index.html）：
<div class="container">
<div class="row" style="border: #000 2px solid">
<div class="col-md-1" style="border: red 2px solid">
.col-md-1
</div>
<!-- ... -->
</div>
<div class="row" style="border: #000 2px solid">
<div class="col-md-3" style="border: red 2px solid">
.col-md-3
</div>
<div class="col-md-9" style="border: red 2px solid">
.col-md-9
</div>
</div>
</div>示例效果：
列偏移
列偏移即使用 col-md-offset-* 预定义类，更改数字将列向右偏移。
示例：列偏移
入口页面（index.html）：
<div class="container">
<div class="row" style="border: #000 2px solid">
<div class="col-md-1" style="border: red 2px solid">
.col-md-1
</div>
<!-- ... -->
</div>
<div class="row" style="border: #000 2px solid">
<div class=" col-md-offset-1 col-md-3" style="border: red 2px solid">
.col-md-3
</div>
</div>
</div>示例效果：
列嵌套
列嵌套即一列嵌套一行，行内嵌套一系列类。
示例：列嵌套
入口页面（index.html）：
<div class="container">
<div class="row" style="border: #000 2px solid">
<div class="col-md-1" style="border: red 2px solid">
.col-md-1
</div>
<!-- ... -->
</div>
<div class="row" style="border: #000 2px solid">
<div class="col-md-6" style="border: red 2px solid">
第一行.col-md-6
</div>
<div class="col-md-6" style="border: red 2px solid">
第二行.col-md-6
<div class="row">
<div class="col-md-6" style="border: aqua 2px solid">
第一行.col-md-6
</div>
<div class="col-md-6" style="border: aqua 2px solid">
第二行.col-md-6
</div>
</div>
</div>
</div>
</div>示例效果：
列排序
列排序即使用 col-md-push- 和 col-md-pull- 预定义类，更改数字改变列的顺序。
示例：列排序
入口页面（index.html）：
<div class="container">
<div class="row" style="border: #000 2px solid">
<div class="col-md-1" style="border: red 2px solid">
.col-md-1
</div>
<!-- ... -->
</div>
<div class="row" style="border: #000 2px solid">
<div class="col-md-3 col-md-push-6" style="border: red 2px solid">
.col-md-3
</div>
<div class="col-md-6 col-md-pull-3" style="border: red 2px solid">
.col-md-6
</div>
</div>
</div>示例效果：
响应式栅格
Bootstrap 可以为不同的屏幕尺寸提供不同的栅格样式。
Bootstrap 栅格系统的基本类前缀：
| 栅格参数 | 超小屏幕 手机 | 小屏幕 平板电脑 | 中等屏幕 桌面显示器 | 大屏幕 大桌面显示器 |
|---|---|---|---|---|
| 窗口尺寸 | <768px | ≥768px | ≥992px | ≥1200px |
| 类前缀 | .col-xs | .col-sm | .col-md | .col-lg |
示例：响应式栅格系统
入口页面（index.html）：
<div class="container">
<div class="row" style="border: #000 2px solid">
<div class="col-md-1" style="border: red 2px solid">
.col-md-1
</div>
<!-- ... -->
</div>
<div class="row" style="border: #000 2px solid">
<div class="col-md-3 col-md-push-6" style="border: red 2px solid">
.col-md-3
</div>
<div class="col-md-6 col-md-pull-3" style="border: red 2px solid">
.col-md-6
</div>
</div>
</div>示例效果：
Bootstrap 排版
标题
在 Bootstrap 中，内容标题标签 h1~h6 均可使用，Bootstrap 对标题标签重新定义了样式，可以使用 .h1~.h6 预定义类为内联属性的文本赋予标题样式，还可以使用 small 标签或 .small 预定义类设置副标题。
示例：标题
入口页面（index.html）：
<h1>你好，世界！</h1>
<h2>你好，世界！</h2>
<span class="h1">你好，世界！</span>
<span class="h2">你好，世界！</span>
<h1>你好，世界！<small>hello, world</small></h1>示例效果：
页面主体
在 Bootstrap 中，全局字体大小 font-size 为 14px，行高 line-height 为 1.428 倍即 20px。
在 Bootstrap 中，使用 .lead 预定义类可以让一段文本突出显示。
示例：突出文本
入口页面（index.html）：
<p>你好，世界！</p>
<p class="lead">你好，世界！</p>示例效果：
对齐方式
在 Bootstrap 中，使用文本对齐预定义类，可以将文字重新对齐。
- .text-left：左对齐。
- .text-right：右对齐。
- .text-center：居中对齐。
- .text-justify：两端对齐。
示例：对齐方式
入口页面（index.html）：
<p class="text-left">居左对齐</p>
<p class="text-center">居中对齐</p>
<p class="text-right">居右对齐</p>示例效果：
列表
Bootstrap 为无序列表、有序列表、定义列表提供了一系列预定义类。
- .list-inline：内联列表，即列表中所有的元素放置于同一行。
- .list-unstyled：无样式列表，即移除列表中的子元素的默认样式。
- .dl-horizontal：水平定义列表，即列表中的短语及其描述放置于同一行。
示例：列表
入口页面（index.html）：
<ul class="list-inline">
<li>01</li>
<li>02</li>
<li>03</li>
</ul>
<ol class="list-unstyled">
<li>01</li>
<li>02</li>
<li>03</li>
</ol>
<dl class="dl-horizontal">
<dt>标题</dt>
<dd>01</dd>
<dt>标题</dt>
<dd>02</dd>
</dl>示例效果：
Bootstrap 表单
表单基本实例
Bootstrap 对基础表单没有做太多定制化效果设计，都是使用默认样式。
在 Bootstrap 中，单独的表单控件会被自动赋予一些全局样式。
- 设置了 .form-control 预定义类的 input、textarea 和 select 元素将被设置宽度为 100%。
- 将 label 元素和表单元素包裹在 .form-group 表单组元素中可以获得最好的排列。
示例：表单
入口页面（index.html）：
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>示例效果：
内联表单
在 Bootstrap 中，为 form 表单元素上添加 .form-inline 预定义类，表单元素将会横排展示在一行。
内联表单只适用于窗口至少在 768px 宽度的浏览器上。
示例：内联表单
入口页面（index.html）：
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>示例效果：
水平排列的表单
在 Bootstrap 中，为 form 表单元素添加 .form-horizontal 预定义类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。
示例：水平排列表单
入口页面（index.html）：
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>示例效果：
表单校验状态
Bootstrap 对表单控件的校验状态，如 error（错误）、warning（警告） 和 success（成功） 状态，都定义了样式，在使用时添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。
示例：表单校验状态
入口页面（index.html）：
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>示例效果：
表单控件尺寸
在 Bootstrap 中，可以自由设置表单控件的尺寸。
- 表单元素没有添加尺寸的预定义类时，默认尺寸。
- 表单元素添加 .input-lg 预定义类时，尺寸变大。
- 表单元素添加 .input-sm 预定义类时，尺寸变小。
示例：表单控件尺寸
入口页面（index.html）：
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>示例效果：
Bootstrap 按钮
按钮与定义样式
Bootstrap 提供了七种样式的按钮风格的预定义类。
- .btn-default：默认样式，灰色。
- .btn-primary：primary 表示首选项，深蓝色。
- .btn-success：success 表示成功，绿色。
- .btn-info：info 表示一般信息，天蓝色。
- .btn-warning：warning 表示警告，黄色。
- .btn-danger：danger 表示危险，红色。
- .btn-link：link 表示链接。
示例：按钮
入口页面（index.html）：
<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>示例效果：
按钮尺寸
在 Bootstrap 中，可以自由设置按钮的尺寸。
- 按钮元素没有添加尺寸的预定义类时，默认尺寸。
- 按钮元素添加 .btn-lg 预定义类时，尺寸变大。
- 按钮元素添加 .btn-sm 预定义类时，尺寸变小。
- 按钮元素添加 .btn-xs 预定义类时，尺寸变超小。
示例：按钮尺寸
入口页面（index.html）：
<div>
<button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
<button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</div>
<div>
<button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
<button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</div>
<div>
<button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
<button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</div>
<div>
<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>
</div>示例效果：
Bootstrap 图片
响应式图片
在 Bootstrap 中，通过为 img 图片元素添加 .img-responsive 预定义类可以让 img 图片元素支持响应式布局。
示例：响应式图片
入口页面（index.html）：
<img src="demo.png" class="img-responsive" alt="Responsive image">示例效果：
图片形状
在 Bootstrap 中，可以为 img 图片元素添加不同的预定义类呈现不同的形状。
- .img-rounded：圆角图片。
- .img-circle：圆形图片。
- .img-thumbnail：带边框的图片。
示例：图片形状
入口页面（index.html）：
<img src="demo.png" class="img-rounded" style="width: 100px" alt="Responsive image">
<img src="demo.png" class="img-circle" style="width: 100px" alt="Responsive image">
<img src="demo.png" class="img-thumbnail" style="width: 100px" alt="Responsive image">示例效果：
