「CSS/FRAMEWORK」- Bootstrap，学习笔记

问题描述

该笔记将记录：与 Bootstrap 相关的内容，以及相关问题的解决方案。

解决方案

官方站点：Bootstrap · The most popular HTML, CSS, and JS library in the world.

该部分的主要内容是我们学习《Bootstrap 用户手册：设计响应式网站》的笔记，我们将在各章节中记录感兴趣的内容，让我们形成对 Bootstrap 的整体认识，并简单了解其使用方法。

WIP Bootstrap 进一步学习页面布局方法。

Bootstrap 提供的网站框架

Bootstrap，2011 年 8 月发布，提供一套标准化的前端开发工具；
从最初 CSS 驱动的项目，发展到内置了很多 JavaScript 插件和图标，并且涵盖了表单和按钮元素；
Bootstrap 本身支持响应式 Web 设计，而且拥有一个非常稳健的 12 列、940 像素宽的网格布局系统。
Bootstrap 网站，还提供了一个构建工具，让你根据自己的需求选择 CSS 和 JavaScript 功能。

在网站中引入 bootstrap.css 这个 CSS 文件，或者再加上 bootstrap.js 这个 JavaScript 文件，整个项目的基础平台就搭建好了。

Bootstrap 的文件结构

下载：Download · Bootstrap 

# tree /tmp/bootstrap-4.3.1-dist
/tmp/bootstrap-4.3.1-dist
├── css
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   └── bootstrap-reboot.min.css.map
└── js
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map

2 directories, 20 files

基本的 HTML 模板

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap 101 Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>

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

</html>

全局样式

Bootstrap 1.0 使 用 的 是 以 前 的 重 置 样式 表， 但 Bootstrap 2.0 则 使 用 Nicolas Gallagher 写 的 Normalize.css

特别值得注意以下几种默认样式，它们专门针对排版和链接： 

从 body 中去掉了 margin ，这样内容就会紧贴浏览器窗口边缘；

为 body 应用了 background-color: white; ；

Bootstrap 以 @baseFontFamily 、@baseFontSize\@baseLineHeight 属性作为排版的基准，确保整个网站的标题及其他内容的行高一致；

Bootstrap 通过 @linkColor 设置全局链接颜色，只在 :hover 状态下给链接添加下划线。

默认网格系统

Bootstrap 默 认 的 网 格 布 局（ 图 1-1） 包 含 12 列，940 像 素 宽， 不支 持 响 应 式 布 局。

加 载 响 应 式 CSS 文 件 后， 网 格 布 局 会 根 据 视 口（viewport） 宽 度 在 724 像 素 到 1170 像 素 之 间 伸 缩。
视 口 宽 度 小 于767 像素时，说明是平板电脑或更小的设备，布局中的列会垂直堆叠起来。

默认宽度下，每列宽 60 像素，且向左平移 20 像素。

图展示了 12 列时的情况：

基本网格的 HTML

创建简单布局时，给作为行的 <div> 添加 .row 类，给作为列的 <div> 添加表示横跨多少列的 .span* 类即可。因为网格布局可以包含 12 列，所 以 .span* 中 的 * 加 起 来 必 须 等 于 12。 这 样， 可 以 设 计 出 3-6-3、4-8、3-5-4、2-8-2……布局

下面的代码使用了 .span8 和 .span4 ，总共横跨 12 列： 

<div class="row">
    <div class="span8">...</div>
    <div class="span4">...</div>
</div>

平移列

使用 .offset* 类可以向右平移列， * 用于指定平移的列数。比如，下面代码中的 .offset2 会导致 .span7 向右平移 2 列 

<div class="row">
    <div class="span2">...</div>
    <div class="span7 offset2">...</div>
</div>

嵌套列

要嵌套列，只要在相应的 .span* 中再增加一个 .row ，然后在其中包含与父容器列数相等的 .span* 即可 

<div class="row">
    <div class="span9">
        Level 1 of column
        <div class="row">
            <div class="span6">Level 2</div>
            <div class="span3">Level 2</div>
        </div>
    </div>
</div>

流式网格系统（%）

流式网格系统的列宽定义使用百分比，而不是像素。流式网格系统与固定网格系统一样都具有响应能力，可适应不同的屏幕和设备。只要把某一行的 .row 改为 .row-fluid ，这一行就会成为流式的。不改变列的类，是为了简化固定和流式网格的切换。想平移列？跟固定网格中一样，在要平移的列中添加 .offset* 类即可 

<div class="row-fluid">
    <div class="span4">...</div>
    <div class="span8">...</div>
</div>
<div class="row-fluid">
    <div class="span4">...</div>
    <div class="span4 offset2">...</div>
</div>

流式网格中的嵌套有点不一样。原因是在使用百分比的情况下，每个 .row 都会把列数重置为 12。举个例子，要想在一个 .span8 中嵌套两个等宽的列，不能使用两个 .span4 （尽管两个 4 平分 8），而应该使用两个类为 .span6 的 <div> （见图 1-4）。这是为保证内容具有响应性，因为我们希望内容 100% 填满容器： 

<div class="row-fluid">
    <div class="span8">
        <div class="row">
            <div class="span6">...</div>
            <div class="span6">...</div>
        </div>
    </div>
</div>

容器布局

要在页面中实现固定宽度、居中的布局，只要把内容统统放到 <divclass=”container”>…</div> 中即可。如果既想实现流式布局，又想把所有内容都封装到一个容器里，可以使用 <div class=”container-fluid”>…</div> 。流式布局适合很多应用、管理界面及其他项目。

响应式设计

要 让 Bootstrap 支 持 响 应 式 布 局， 必 须 在 <head> 标 签 中 添 加 一 个<meta> 标签。另外，如果你下载的文件中没有响应式 CSS 文件，也要单独下载。响应式布局必需的标签和文件如下所示： 

<head>
    <title>My amazing Bootstrap site!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/css/bootstrap.css" rel="stylesheet">
    <link href="/css/bootstrap-responsive.css" rel="stylesheet">
</head>

什么是响应式设计：
响应式设计是针对浏览设备优化页面中既有内容的一种方法。比如，在桌面浏览器中既可以看到网站的常规版本，也可以在用户接入更大的显示器时看到针对宽屏的布局。在平板电脑中看到的是针对其横屏和竖屏模式优化之后的布局。而在手机上，则是能够适应更窄宽度的布局。为了适用不同的屏幕宽度，Bootstrap 使用 CSS 的媒体查询（media query）来检测浏览器视口的宽度，然后再根据条件加载和应用调整布局的样式表。根据浏览器视口的宽度，Bootstrap 可以按照纵横比或宽度的范围来优化布局，但最主要还是使用 min-width 和 max-width 属性。

预定义的 CSS 样式

WIP

内置的布局组件

WIP

支持的 JavaScript 插件

WIP

常见问题处理

查看当前 Bootstrap 版本信息（Bootstrap: How do I identify the Bootstrap version?）： 

$.fn.tooltip.Constructor.VERSION                                                // 在 Console 中，直接运行

参考文献

Download · Bootstrap

Filed under: K4NZDROID - @ 12:30 AM