£轻描～淡写°
£轻描～淡写°

Bootstrap 一篇就够 快速入门&使用（中文文档）

目录

一、Bootstrap 简介

什么是 Bootstrap？

历史

为什么使用 Bootstrap？

Bootstrap 包的内容

在线实例

Bootstrap 实例

更多实例

Bootstrap 实例2

二、Bootstrap 环境安装

下载 Bootstrap

文件结构

预编译的 Bootstrap

Bootstrap 源代码

HTML 模板

实例

实例

实例

Staticfile CDN 推荐

三、关于Boostrap的中文文档

布局

Container容器

栅格系统

自动布局列

响应式的class选择器

对齐

重排序

列嵌套

禁用响应式

响应式的分界点

内容

排版

标题

显式标题

Lead中心内容

文本内联元素

abbr缩略语

blockquote 来源备注与引用

列表

代码

内联代码

代码块

Var变量

用户输入(键盘动作提示)

示例标注

图片

响应式图片&缩略图处理

图像对齐处理

Html 5 标准之Picture元素

图文框

表格

语义状态化

响应式表格

公共样式

边框

边框

圆角边框

浮动属性&清动浮动

颜色

颜色

背景颜色

Display显示属性

Display属性

隐藏元素

面向打印的显示属性控制处理

文本处理

文本对齐

文本包裹和溢出(换行)处理

字母大小写转换

粗细和斜体

等宽字体

垂直对齐

规格与尺寸

间隔

阴影

position固顶(底)及定位

通用属性

固定在顶(底)部

贴齐于top顶部

visibility显示或隐藏处理

关闭图标

嵌入(embed)

图像替换

读屏器

flex弹性布局

组件

警告提示框(Alert)

示例

关闭警告(小贴士效果)

JavaScript行为

徽章(Badge)

示例

情景变化

椭圆形胶囊标签

链接

面包屑导航(Breadcrumb)

按钮(Button)

示例

按钮标签

轮廓按钮

尺寸规格与大小定义

启用与禁用状态

按钮插件

JavaScript行为：

下拉菜单(Dropdowns)

示例

菜单

内容

下拉选项

JavaScript行为

按钮组(Btn-group)

基本示例

按钮工具栏

嵌套

垂直排列

Input输入框及输入框群组

基本示例

输入组插件

自定义表单

表单(Form)

表单控件

复选框与单选框

布局

禁用表单

验证

自定义表单

轮播效果(Carousel)

带控制器的效果

包含姿态指示器

包含字幕的轮播

交替变化

单个间隔

JavaScript行为

Hero广告大块屏幕(Jumbotron)

列表组(List-group)

基本示例

链接和按钮

Flush紧致贴齐

上下文语境颜色呈现样式

引入badge微章

自定义内容

JavaScript 行为

媒体对象/图文混排(Media-object)

示例

嵌套

对齐

列表呈现

弹出提示框(Toast)

JavaScript 行为

提示冒泡(Tooltip)

示例

禁用元素

JavaScript 行为

POP提示(Popover)

示例

禁用元素

在下次点击时收回

JavaScript 行为

弹出模态框(Modal)

示例

工具提示和弹出提示框

使用栅格

JavaScript 行为

导航/滑动门(nav)

基本导航样式

可用样式

使用Flex弹性布局

使用下拉菜单

滑动门

JavaScript 行为

导航栏(navbar)

支持的内容

Color颜色选择器(配色方案)

.Container主内容-容器

定位

卡片(Card)

内容类型

缩放_文本对齐

导航

卡片样式

卡片排版

折叠面板(Collapse)

示例

多目标控制

手风琴折叠范例

JavaScript 行为

分页(Pagination)

进度条(Progress)

示例

背景

多进度条进度（嵌套）

条纹进度指示

动画条纹进度指示

滚动监听(Scrollspy)

在navbar导航中的示例

嵌套的导航示例

列表组示例

JavaScript 行为

旋转特效(Spinners)

圆形旋转

渐变缩放

对准

大小

按钮类型

延伸(图标)

一、Bootstrap 简介

Bootstrap 一篇就够 快速入门&使用（中文文档）_第1张图片

什么是 Bootstrap？

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

历史

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

为什么使用 Bootstrap？

  • 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
  • 浏览器支持：所有的主流浏览器都支持 Bootstrap。

        

  • 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
  • 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。

    Bootstrap 一篇就够 快速入门&使用（中文文档）_第2张图片

  • 它为开发人员创建接口提供了一个简洁统一的解决方案。
  • 它包含了功能强大的内置组件，易于定制。
  • 它还提供了基于 Web 的定制。
  • 它是开源的。

Bootstrap 包的内容

  • 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
  • CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
  • 组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
  • JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。

  • 定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

在线实例

本站的 Bootstrap 教程包含了上百个实例。

你可以使用我们的在线编辑器在线编辑代码，并点击运行按钮查看结果。

Bootstrap 实例

 
 

我的第一个 Bootstrap 页面
 
重置窗口大小，查看响应式效果！
 
 

 
 
Column 1

 
学的不仅是技术，更是梦想！
 

再牛逼的梦想,也抵不住你傻逼似的坚持！
 
 

 
Column 2
 
学的不仅是技术，更是梦想！

 
再牛逼的梦想,也抵不住你傻逼似的坚持！
 

 
 
Column 3

 
学的不仅是技术，更是梦想！

 
再牛逼的梦想,也抵不住你傻逼似的坚持！

更多实例

Bootstrap 实例2


 

  
 # Name Street 
 
  
 1 Anna Awesome 
Broome Street 
 
 2 Debbie Dallas
 Houston Street 
 

 3 John Doe Madison Street

二、Bootstrap 环境安装

Bootstrap 安装是非常容易的。本章将讲解如何下载并安装 Bootstrap，讨论 Bootstrap 文件结构，并通过一个实例演示它的用法。

下载 Bootstrap

您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页：

您会看到两个按钮：

  • Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
  • Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。

如果您使用的是未编译的源代码，您需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件，Bootstrap 官方只支持 Recess，这是 Twitter 的基于 less.js 的 CSS 提示。

为了更好的了解和更方便的使用，我们将在本教程中使用 Bootstrap 的预编译版本。

由于文件是被编译过和压缩过的，在独立的功能开发中，您不必每次都包含这些独立的文件。

本教程编写时，使用的是最新版（Bootstrap 3）。

文件结构

预编译的 Bootstrap

当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：

Bootstrap 一篇就够 快速入门&使用（中文文档）_第3张图片

如上图所示，可以看到已编译的 CSS 和 JS（bootstrap.*），以及已编译压缩的 CSS 和 JS（bootstrap.min.*）。同时也包含了 Glyphicons 的字体，这是一个可选的 Bootstrap 主题。

Bootstrap 源代码

如果您下载了 Bootstrap 源代码，那么文件结构将如下所示：

Bootstrap 一篇就够 快速入门&使用（中文文档）_第4张图片

  • less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。
  • dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。
  • docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。

HTML 模板

一个使用了 Bootstrap 的基本的 HTML 模板如下所示：

实例


 
  Bootstrap 模板
 
        
Hello, world!

在这里，您可以看到包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件，用于让一个常规的 HTML 文件变为使用了 Bootstrap 的模板。

有关上面代码段中每个元素的细节将在 Bootstrap CSS 概览 章节详细讲解。

实例

现在让我们尝试使用Bootstrap输出"Hello, world!"：

实例

Hello, world!

Staticfile CDN 推荐

国内推荐使用 Staticfile CDN 上的库：

此外，你还可以使用以下的 CDN 服务：

  • 国际推荐使用：https://cdnjs.com/

三、关于Boostrap的中文文档

        Bootstrap是当前世界最受欢迎的响应式、移动设备优先的门户和应用前端框架。在其中，你将发现高质量的HTML、CSS以及JavaScript，使您的WEB工程项目变得无比简单，包括官方的CDN和启动器服务。

下载：

(1) Bootstrap: Bootstrap · The most popular HTML, CSS, and JS library in the world.

(2) jQuery: jQuery

(3.3.1: GitHub - jquery/jquery at 3.3.1)

(3) Popper.js: Releases · floating-ui/floating-ui · GitHub

(下拉菜单dropdowns、提示组件popovers、冒泡组件等都提依赖于Popper.js)

IE浏览器支持：

支持Internet Explorer 10及更高版本，不支持IE9（即使大多兼容，我们依然不推荐）。请注意，IE10中不完全支持某些CSS3属性和HTML5元素，或者需要前缀属性才能实现完整的功能。

如果您需要IE8-9支持，请使用Bootstrap 3 ，它是我们代码中最稳定的版本，官方不再发布新版，但仍然支持严重错误修复和文档维护。

(更多兼容性参考：Browsers and devices · Bootstrap)

重要提示：

1. 响应式meta标签

移动设备优先, Bootstrap 4 不同于历史版本，它首先为移动设备优化代码，然后用CSS媒体查询来扩展组件。为了确保所有的设备的渲染和触摸效果，必须在网页的区添加响应式的视图标签，简要的说就是优先引入下面一行。

2. HTML5 doctype头部规范

HTML5标准的 doctype 头部定义是首要的，否则会导致样式失真（对搜索引擎和浏览器友好）。

...

布局

Container容器

Container容器是窗口布局的最基本元素，我们推荐所有样式都定义在.container或.container-fluid容器之中-- 这是启用整个栅格系统必不可少的前置条件，它们分别对应选择一个响应式的、固定宽度的容器，或者选择一个流式自适应浏览器或容器最大合法宽度的窗口（意味着任何时候它的宽度总是100%）。

(1) .container容器可以被嵌套，但是大多数布局并不需要这么做（最少层次的嵌套构建出的网页更优雅）：

(2) .container-fluid 类，可以使div宽度扩展到整个宽度（如果没有被其它CSS容器包含，则应是浏览器运行时的宽度，否则应是父容器中允许的最大宽度，一般视为100%宽度）：

栅格系统

Bootstrap是基于移动优先的原则开发的，使用了一系列的媒体查询（media queries）方法，为我们的布局和界面创建自适应的的分界点。这些分界点主要是基于视口宽度的最小值，并且当窗口视图改变的时候允许元素缩放。

(分界点大小：576px、768px、992px、1200px)

Bootstrap包含了一个强大的移动优先的网格系统，它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕)。Bootstrap4是完全基于flexbox流式布局构建的，完全支持响应式标准。

Bootstrap 一篇就够 快速入门&使用（中文文档）_第5张图片

111

222

333

444

自动布局列

等宽布局

所有设备上都是等宽并占满一行，只要简单的应用.col就可以完成。

1-1

1-2

2-1

2-2

2-3

设置一列宽度

1-1

1-2(中间占6格,其余6格两边等分)

1-3

2-1

2-2(中间占5格,其余7格两边等分,奇偶都能)

2-3

可变宽度的弹性空间

用 .col-{breakpoint}-auto 断点方法，可以实现根据其内容的自然宽度来对列进行大小调整。

1-1

1-2

1-3

等宽多行

创建跨多个行的等宽列，方法是插入.w-100要将列拆分为新行。通过混合.w-100一些还可以影响一些显示状态效果,如按钮排序等。

1-1

1-2

2-1

2-2

响应式的class选择器

混合布局

111

222

333

444

555

666

777

888

对齐

垂直对齐

1. 在row上加 .align-items-start/center/end

111

222

333

2. 在col上加 .align-self-start/center/end

111

222

333

水平对齐

在row上加 .justify-content-start/center/end/around/between

111

222

间隙沟槽清除

在row上加 .no-gutters

111

222

重排序

Class顺序重定义

使用 .order-* class选择符，可以对DIV空间进行 可视化排序,系统提供了.order-1到.order-12 12个级别的顺序，在五种浏览器和设备宽度上都能生效。

还可以使用.order-first，快速更改一个顺序到最前面，同时其它元素也相应的获得了order:-1的属性，这个属性也可以与。.order-*混合使用。

111

222

333

列偏移

可以使用两种方式进行列偏应：

1、使用响应式的.offset-*栅格偏移方法。

2、使用边界处理实用程序，它内置了诸如.ml-*、.p-*、.pt-*等实用排工具。

1. class偏移选择器

使用.offset-md-*类可以使列向右偏移，通过定义*的数字，则可以实现列偏移，如.offset-md-4则是向右偏移四列。

111

222

2. Margin移动布局

在BootStrap V4中，你可以使用.ml-auto与.mr-auto来强制隔离两边的距离，实现类水平隔离的效果。

111

222

列嵌套

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

111

222

333

禁用响应式

(1) 设定容器宽度。如.container {width: 980px;}。

(2) 栅格布局使用 .col-*（最小设备栅格类）的样式来代替.col-sm-*、.col-md-*、.col-lg-*、.col-xl-*，这样就能确保栅格能够在所有设备中展开。

(3) 移除 此 CSS 文档中提到的设置浏览器视口（viewport）的标签：。

(4) 如果使用了导航条，需要移除所有导航条的折叠和展开行为。

响应式的分界点

Bootstrap是基于移动优先的原则开发的，使用了一系列的媒体查询（media queries ）方法，为我们的布局和界面创建自适应的的分界点。这些分界点主要是基于视口宽度的最小值，并且当窗口视图改变的时候允许元素缩放。

Bootstrap 一篇就够 快速入门&使用（中文文档）_第6张图片//Extra small devices (portrait phones, less than 576px)

// No media query since this is the default in Bootstrap

// Medium devices (tablets, 768px and up)

@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)

@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)

@media (min-width: 1200px) { ... }

偶尔也会使用其它方面的媒体查询（指定屏幕的尺寸或更小）：

Bootstrap 一篇就够 快速入门&使用（中文文档）_第7张图片

// Extra small devices (portrait phones, less than 576px)

@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)

@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)

@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)

@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)

// No media query since the extra-large breakpoint has no upper bound on its width

以及使用最小和最大断点宽度定位单个屏幕尺寸段的媒体查询和混合定义：

Bootstrap 一篇就够 快速入门&使用（中文文档）_第8张图片// Extra small devices (portrait phones, less than 576px)

@media (max-width: 575px) { ... }

// Small devices (landscape phones, 576px and up)

@media (min-width: 576px) and (max-width: 767px) { ... }

// Medium devices (tablets, 768px and up)

@media (min-width: 768px) and (max-width: 991px) { ... }

// Large devices (desktops, 992px and up)

@media (min-width: 992px) and (max-width: 1199px) { ... }

// Extra large devices (large desktops, 1200px and up)

@media (min-width: 1200px) { ... }

内容

排版

标题

兼容所有HTML标题集，涵括从

 到
,的六种标题展现。

CSS选择器也支持以.h1 -- .h6 方式引用，这样可以使字体样式呈现出标题效果，不同是引用.h1 -- .h6的文本段不会视作HTML的标题元素（往往SEO、读屏器和机器识别时对此很敏感）。

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

自定义标题备注

使用附带的实用类从Bootstrap 重新创建小的辅助标题文本。

主标题主标题

副标题副标题

显式标题

bootstrap可以传统的标题元素设计得更漂亮，以迎合你的网页内容。如果你想要一个标题醒目，考虑使用显示标题——一种更大型、鲜明的标题样式。

Display 1

Display 2

Display 3

Display 4

Lead中心内容

通过应用 .lead样式，可以定义一个中心段落，用于提示这是中心内容或重要内容。

苹果苹果苹果苹果

香蕉香蕉香蕉香蕉

橘子橘子橘子橘子

梨子梨子梨子梨子

文本内联元素

del能更形象的描述意思。ins 代表被插入的文字，u 代表有下划线。

strong、em等有强调作用，有利于seo(搜索引擎优化)。

看看我是不是高亮文本

看看我是不是高亮文本

小号字小号字小号字

小号字小号字小号字

删除线删除线删除线

删除线删除线删除线

下划线下划线下划线

下划线下划线下划线

粗体粗体粗体

粗体粗体粗体

斜体斜体斜体

斜体斜体斜体

abbr缩略语

email

blockquote 来源备注与引用

引用文档中另一个来源的内容块，请在一段HTML外面包裹

，作为引用。为了显示直接引用，我们推荐使用<p>作为子级包裹容器。

底部来源：