2019-11-10

Bootstrap 基础知识

前言 🔗

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架，它简洁灵活，使得 Web 开发更加快捷。
Bootstrap 官网
Bootstrap 教程
Bootstrap4 教程
Bootstrap5 教程
Bootstrap 参考手册
Bootstrap 快速入门
swagger-bootstrap-ui 开发指南

1、Bootstrap

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
相关网站：

1.1 Bootstrap 特性

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
容易上手：只要具备 HTML 和 CSS 的基础知识，就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的。

1.2 Bootstrap 包内容

内容	描述
基本结构	Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构
CSS	Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统
组件	Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等
JavaScript 插件	Bootstrap 包含了十几个自定义的 jQuery 插件。可以直接包含所有的插件，也可以逐个包含这些插件
定制	可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到自己的版本

1.3 Bootstrap 文件结构

预编译的 Bootstrap，Bootstrap 已编译的版本的文件/目录结构如下所示：
- 已编译的 CSS 和 JS（bootstrap.），以及已编译压缩的 CSS 和 JS（bootstrap.min.）。同时也包含了 Glyphicons 的字体，这是一个可选的 Bootstrap 主题。
Bootstrap 源代码，文件结构如下所示：
- less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。
- ldist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。
- ldocs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。

2、安装

2.1 使用 CDN

在 HTML 页面的 <head> 部分中添加以下行。

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

<!-- Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
 
<!-- jQuery 文件。务必在 bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
 
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

海外推荐 cdnjs 上的库：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

2.2 直接下载到本地

下载地址：
- Bootstrap 官网
- Bootstrap v5.0.1
复制整个 bootstrap 文件夹到项目中。

在 HTML 的 <head> 中引用 bootstrap.min.css。

1
2
3

<link href="path/to/bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet" />

<link href="path/to/bootstrap/5.0.1/js/bootstrap.min.js" rel="stylesheet" />

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

3、使用

3.1 模板

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Bootstrap 模板</title>

    <!-- 包含头部信息用于适应不同设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- 引入 Bootstrap: Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

    <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5 元素和媒体查询 -->
    <!-- 注意：如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <h1>Hello, world!</h1>

    <!-- JavaScript 放置在文档最后面可以使页面加载速度更快 -->

    <!-- 可选: jQuery 文件。务必在 bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>

    <!-- 可选: Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>

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

3.2 实例

实例

<head>
    <meta charset="utf-8" />
    <title>Qian Chia 工作室</title>

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- 引入 Bootstrap -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
    <div class="container">
        <h2>表格</h2>
        <p>创建响应式表格 (将在小于768px的小型设备下水平滚动)。另外：添加交替单元格的背景色：</p>
        <div class="table-responsive">
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Street</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Anna Awesome</td>
                        <td>Broome Street</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Debbie Dallas</td>
                        <td>Houston Street</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>John Doe</td>
                        <td>Madison Street</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <h2>图像</h2>
        <p>创建响应式图片(将扩展到父元素)。另外：图片以椭圆型展示：</p>
        <img src="https://demo.qianchia.com/media/image/demo/demo21.png" class="img-responsive img-circle" alt="Cinque Terre" width="304" height="236">

        <h2>图标</h2>
        <p>插入图标:</p>
        <p>云图标: <span class="glyphicon glyphicon-cloud"></span></p>
        <p>信件图标: <span class="glyphicon glyphicon-envelope"></span></p>
        <p>搜索图标: <span class="glyphicon glyphicon-search"></span></p>
        <p>打印图标: <span class="glyphicon glyphicon-print"></span></p>
        <p>下载图标：<span class="glyphicon glyphicon-download"></span></p>
    </div>

    <!-- JavaScript 放置在文档最后面可以使页面加载速度更快 -->
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

效果

点击查看

4、浏览器 / 设备支持

Bootstrap 使用 Normalize 来建立跨浏览器的一致性。Normalize.css 是一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。
Bootstrap 可以在最新的桌面系统和移动端浏览器中很好的工作。旧的浏览器可能无法很好的支持。
下表为 Bootstrap 支持最新版本的浏览器和平台：

平台
Android	YES	不适用	YES	不适用	不适用
iOS	YES	不适用	不适用	YES	不适用
macOS	YES	不适用	YES	YES	YES
Windows	YES	YES	YES	不适用	YES

Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器。

5、UI 编辑器

编辑器	描述
Bootstrap Magic	这是一个 Bootstrap 主题生成器，使用最新的 Bootstrap 3 版本和 Angular JS 版本，提供一个鲜活的用户修改预览。它包括了各种各样的导入，一个颜色选择器和智能的预先输入。更神奇的是，Bootstrap 会根据用户的每个选择来重新建立框架，方便用户的下载和使用。
BootSwatchr	这是一个 Bootstrap 主题生成器，使用最新的 Bootstrap 3 版本和 Angular JS 版本，提供一个鲜活的用户修改预览。它包括了各种各样的导入，一个颜色选择器和智能的预先输入。更神奇的是，Bootstrap 会根据用户的每个选择来重新建立框架，方便用户的下载和使用。
Bootstrap Live Editor	Bootstrap Live Editor 是个所见即所得的构建 Bootstrap 的编辑器。在 Bootstrap 准备好的内容和代码片段的基础上提供一个又好又优雅的方法来编辑和美化 html，也因此它是个明智的选择。除此之外，它还包括高级的选项比如按钮配置，自定义标签和为用户做最明智最有益的选择。
Fancy Boot	Fancyboot 是个非常有用的 Bootstrap 自定义工具，允许用户编辑 Bootstrap 的配置，自动预览他们的修改结果。通过滑动菜单可以选择需要使用的插件和组件。当用户做好了相应的修改，可以下载一个包含用户所使用的 jQuery 插件的编译好的和简化后的 CSS 文件。
Style Bootstrap	Style Bootstrap 是个非常棒的内置浏览器的 GUI 实用工具，帮助用户自定义 Twitter Bootstrap 外观。它非常容易进行自定义操作。从 body 风格，字体排版，按钮，导航，格式，通知提示和其他用户很容易根据自己的意愿自定义的元素。除了强大的自定义功能，它还可以很容易生成可下载的 CSS 文件。
Lavish	Lavish 是个帮助用户从一个图像中定制自己喜欢的 Bootstrap 配色方案。用户可以从图像中选择各种颜色用在 body 背景，链接，头部，菜单，标签，文本，下拉菜单等等元素上。一旦你确定了 Bootstrap 配色方案，就可以很方便的下载相应的 Boostrap.css 文件。
Bootstrap ThemeRoller	Bootstrap ThemeRoller 是个直观的 web 应用程序，提供一个可视化的界面让用户按照自己的风格创建属于自己的 Bootstrap 主题。有了这个工具，用户可以自定义颜色，大小，字体，格式，表，按钮，警告信息，导航条，菜单等等元素。
LayoutIt!	LayoutIt！拥有拖拽接口的功能，能简单迅速的构建一个 Bootstrap 前端代码。LayoutIt！兼容任何的编程语言，允许用户下载 HTML ，在这里自由的进行编码设计。
Pingendo	Pingendo 是个可视化的桌面应用程序，允许用户给予流行的 Twitter Bootstrap 框架创建响应式 web 页面原型。Pingendo 还提供大量的现成的布局，拖拽元素的位置，调整大小和自定义的功能。用户可以自行优化他们的页面，插入他们自己的内容。
Kickstrap	Kickstrap 是个 Bootstrap UI 编辑器，使用 Firebase 作为一个后台服务。它无缝的接合了 Bootstrap 和顶级的 web 技术。更厉害的是，它可以运行一个已验证的，不需要本地后台支持，数据库驱动的 web 应用。
Bootply	Bootply 是一款很棒的 Bootstrap UI 编辑工具，尽可能简单的让用户编辑 Bootstrap 友好的 CSS ，HTML 和 Javascript 。同时也是一个可拖拽的可视化编辑器，用来设计，创建原型和测试 Bootstrap 框架。Bootply 有个代码存储库，里面包括了 Bootstrap 代码片段，示例和模板。除了以上这些，更吸引人的是它有个非常活跃的 Bootply 社区，用户可以很方便的发现，分享和展示相关的代码和片段。
X-editable	X-Editable 是一个扩展库，允许用户创建可编辑的元素，比如页面弹出和内联模式。她提供本地的 Bootstrap，jQuery UI 或者是纯 jQuery 编辑功能。此 Bootstrap UI 编辑器拥有许多很强大的功能，包括客户端，服务端验证，支持键盘，live 事件，可定制的容器空间等等。总而言之，它提供非常快速的开发功能，易于删除字段，一个用来更新数据的简简单后台脚本。
Jetstrap	不要错误的以为 Jetstrap 只是个简单的实体模型工具，它是 100% 基于 web 接口的 Twitter Bootstrap 构建工具。用户不需要下载任何类型的软件就可以使用 Jetstrap。用户只需要登录，然后构建自己的项目，就可以随时随地进行访问了。构建功能主要是提供给开发者和设计者的，用户很容易就可以通过 Jetstrap 生成漂亮的网站，而且运行速度非常快。
DivShot	DivShot 是个快速的，可视化的前端开发文本编辑器，跟 mockup 工具一样的简单整洁。包括各种框架需要的各种定制的组件库，这是它提供的最好的工具之一。除此之外还包括了一个主题转换器，允许用户修改主题。试验版本是免费的，过了试验期就需要自己付费维持原来的服务了。
PaintStrap	PaintStrap 使用 Adobe kuler/COLOURlovers 颜色组合来生成漂亮的 Twitter Bootstrap 主题。这个工具特别容易安装，同时很容易下载 CSS 文件并且也很容易替换成另一个标准的文件。
Bootstrap 可视化布局系统	菜鸟工具 Bootstrap 可视化布局系统

6、Bootstrap v2 教程

内容	描述	版本
Bootstrap 简介		v2.x
Bootstrap CSS 概览		v2.x
Bootstrap 网格系统		v2.x
Bootstrap 布局		v2.x
Bootstrap 响应式设计		v2.x
Bootstrap 排版		v2.x
Bootstrap Glyphicons		v2.x
Bootstrap 表格		v2.x
Bootstrap 表单		v2.x
Bootstrap 按钮		v2.x
Bootstrap 图像		v2.x
Bootstrap 图标		v2.x
Bootstrap 导航		v2.x
Bootstrap 导航条		v2.x
Bootstrap 内联标签和徽章		v2.x
Bootstrap 缩略图		v2.x
Bootstrap 进度条		v2.x
Bootstrap 面包屑导航		v2.x
Bootstrap 分页		v2.x
Bootstrap 警告和错误		v2.x
Bootstrap 清单组/价格表		v2.x
Bootstrap LESS		v2.x
Bootstrap 模态框		v2.x
Bootstrap 弹出框		v2.x
Bootstrap 下拉菜单		v2.x
Bootstrap 滚动监听		v2.x
Bootstrap 轮播		v2.x
Bootstrap Typeahead		v2.x
Bootstrap 按钮		v2.x
Bootstrap 折叠		v2.x

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-10 19:01

Qian Chia's Blog

赞助

搜索

分类

标签