Bootstrap文档-起步

发表于 | 更新于: | 分类于 ， ， | 阅读次数:
字数统计: 73 | 阅读时长 ≈ 1

简要介绍 Bootstrap，以及如何下载、使用，还有基本模版和案例，等等。
https://v3.bootcss.com/getting-started/

2018.3.3 星期六 09:08

学习总结：

  1. 多种下载/安装，使用方式，最好定制
  2. 文件结构，及使用
  3. 源码less，也有sass
  4. grunt编译
  5. 一些简单的模版，实例，帮助理解Bootstarp
  6. Bootlint 工具，帮助检测页面
  7. 禁止响应式布局
  8. 浏览器和设备支持（开发中再查），还有浏览器bug列表
  9. 第三方组件支持，比如：google地图
  10. 可访问性，针对屏幕阅读器
  11. 版本迁移，社区，许可证等未实现

一 下载

用于生产环境的 Bootstrap
编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。

Bootstrap 源码
Less、JavaScript 和 字体文件的源码，并且带有文档。需要 Less 编译器和一些设置工作。

Sass
这是 Bootstrap 从 Less 到 Sass 的源码移植项目，用于快速地在 Rails、Compass 或 只针对 Sass 的项目中引入。

使用 BootCDN 提供的免费 CDN 加速服务（同时支持 http 和 https 协议）
通过 Bower 进行安装
通过 npm 进行安装
通过 npm 进行安装
编译 Less/Sass 源码需要注意的事项

二 包含的内容

Bootstrap 插件全部依赖 jQuery
请注意，Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入，就像在基本模版中所展示的一样。在 bower.json 文件中 列出了 Bootstrap 所支持的 jQuery 版本。

三 编译 CSS 和 JavaScript 文件

预编译版

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

Bootstrap 源码

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
除了这些，其他文件还包含 Bootstrap 安装包的定义文件、许可证文件和编译脚本等。

编译 CSS 和 JavaScript 文件

Bootstrap 使用 Grunt 作为编译系统，并且对外提供了一些方便的方法用于编译整个框架。
下面讲解的就是如何编译源码、运行测试用例等内容。

四 基本模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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 href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

五 实例精选

以下实例全部基于前面所讲的基本模板并配合 Bootstrap 的众多组件开发而成。
我们鼓励你根据自身项目的需要对 Bootstrap 进行定制和修改。

Bootstrap 框架的基本用法

  1. 入门级模板
    只有基本的东西：引入了预编译版的 CSS 和 JavaScript 文件，页面只包含了一个 container 元素。
  2. Bootstrap 主题
    加载可选的 Bootstrap 主题，获得增强的视觉体验。
  3. 栅格
    多个关于栅格布局方面的实例，涉及到层级（tier）、嵌套（nesting）等等。
  4. Jumbotron ($_self:超大屏幕)
    Build around the jumbotron with a navbar and some basic grid columns.
  5. Narrow jumbotron ($_self:狭窄的壮观)
    Build a more custom page by narrowing the default container and jumbotron.

    导航条实例

  6. 导航条
    包含导航条和一起附加内容的超级基础的模板。
  7. 静态导航条
    包含一个静态导航条以及一些附加内容的超级基础的模板。
  8. 固定位置的导航条
    这是一个超简单的页面，拥有一个固定在顶部的导航条和一些演示内容。

    自定义组件

  9. 封面图
    一个简单、漂亮的首页。
  10. Carousel
    Customize the navbar and carousel, then add some new components.
  11. 博客页面
    简单的两列式博客布局，还包含了自定义的导航、页头、分类等元素。
  12. 控制台
    包含基本结构的后台管理模板，还有固定的侧边栏和导航条。
  13. 登录页
    自定义的表单布局以及经过简单设计的登录表单。
  14. Justified nav
    Create a custom navbar with justified links. Heads up! Not too Safari friendly.
  15. Sticky footer
    Attach a footer to the bottom of the viewport when the content is shorter than it.
  16. Sticky footer with navbar
    Attach a footer to the bottom of the viewport with a fixed navbar at the top.

    Experiments（实现性案例）

  17. 非响应式 Bootstrap 布局
    Easily disable the responsiveness of Bootstrap per our docs.
  18. Offcanvas
    Build a toggleable off-canvas navigation menu for use with Bootstrap.

六 工具

Bootlint

Bootlint 是 Bootstrap 官方所支持的 HTML 检测工具。在使用了 Bootstrap 的页面上（没有对 Bootstrap 做修改和扩展的情况下），它能自动检查某些常见的 HTML 错误。纯粹的 Bootstrap 组件需要固定的 DOM 结构。Bootlint 就能检测你的页面上的这些“纯粹”的 Bootstrap 组件是否符合 Bootstrap 的 HTML 结构规则。建议将 Bootlint 加入到你的开发工具中，这样就能帮你在项目开发中避免一些简单的错误影响你的开发进度。

七 社区

八 禁止响应式布局

禁止响应式布局有如下几步：

  1. 移除 此 CSS 文档中提到的设置浏览器视口（viewport）的标签：。
  2. 通过为 .container 类设置一个 width 值从而覆盖框架的默认 width 设置，例如 width: 970px !important; 。请确保这些设置全部放在默认的 Bootstrap CSS 文件的后面。注意，如果你把它放到媒体查询中，也可以略去 !important 。
  3. 如果使用了导航条，需要移除所有导航条的折叠和展开行为。
  4. 对于栅格布局，额外增加 .col-xs- 类或替换掉 .col-md- 和 .col-lg-*。 不要担心，针对超小屏幕设备的栅格系统能够在所有分辨率的环境下展开。

针对 IE8 仍然需要额外引入 Respond.js 文件（由于仍然利用了浏览器对媒体查询（media query）的支持，因此还需要做处理）。这样就禁用了 Bootstrap 对移动设备的响应式支持。

禁止响应式特性的 Bootstrap 模版

我们已经按照上面的步骤制作了一份案例。仔细阅读其源码并对照上面的步骤实践一下吧。

九 从 2.x 版本升级到 3.0 版本

https://v3.bootcss.com/migration/

十 对浏览器和设备的支持情况

Bootstrap 的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。

被支持的浏览器

特别注意，我们坚决支持这些浏览器的最新版本。

Mobile devices

Chrome Firefox Safari
Android Supported Supported N/A
iOS Supported Supported Supported

Desktop browsers

Chrome Firefox Internet Explorer Opera Safari
Mac Supported Supported N/A Supported Supported
Windows Supported Supported Supported Supported Not supported

On Windows, we support Internet Explorer 8-11.

For Firefox, in addition to the latest normal stable release, we also support the latest Extended Support Release (ESR) version of Firefox.

Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, as well as Microsoft Edge, though they are not officially supported.

浏览器 bug 列表中列出了影响 Bootstrap 正常功能的浏览器 bug。

Internet Explorer 8-9

Internet Explorer 8 和 9 是被支持的，然而，你要知道，很多 CSS3 属性和 HTML5 元素 – 例如，圆角矩形和投影 – 是肯定不被支持的。
另外， Internet Explorer 8 需要 Respond.js 配合才能实现对媒体查询（media query）的支持。

Internet Explorer 8 与 Respond.js

在开发环境和生产（线上）环境需要支持 Internet Explorer 8 时，请务必注意下面给出的警告。

Respond.js 与 跨域（cross-domain） CSS 的问题

如果 Respond.js 和 CSS 文件被放在不同的域名或子域名下面（例如，使用CDN）时需要一些额外的设置。请参考 Respond.js 文档 获取详细信息。

Respond.js 与 file:// 协议

由于浏览器的安全机制，Respond.js 不能在通过 file:// 协议（打开本地HTML文件所用的协议）访问的页面上发挥正常的功能。如果需要测试 IE8 下面的响应式特性，务必通过 http 协议访问页面（例如搭建 apache、nginx 等）。请参考 Respond.js 文档获取更多信息。

Respond.js 与 @import 指令

Respond.js 不支持通过 @import 指令所引入的 CSS 文件。例如，Drupal 一般被配置为通过 @import 指令引入CSS文件，Respond.js 对其将无法起到作用。请参考 Respond.js 文档获取更多信息。

IE8 与 box-sizing 属性

当 box-sizing: border-box; 与 min-width、max-width、min-height 或 max-height 一同使用时，IE8 不能完全支持 box-sizing 属性。由于此原因，从 Bootstrap v3.0.1 版本开始，我们不再为 .container 赋予 max-width 属性。

IE8 and @font-face

当 @font-face 与 :before 在 IE8 下共同使用时会出现问题。由于 Bootstrap 对 Glyphicons 的样式设置使用了这一组合方式，如果某个页面被浏览器缓存了，并且此页面不是通过点击“刷新”按钮或通过 iframe 加载的，那么就会导致字体文件尚未加载的情况下就开始绘制此页面。当鼠标滑过页面（body）时，页面上的某些图标就会显现，鼠标滑过其他没有显现的图标时，这些图标就能显示出来了。请参考 (issue #13863](https://github.com/twbs/bootstrap/issues/13863) 了解详细信息。

IE 兼容模式

Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，建议将此 \ 标签加入到你的页面中：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

国产浏览器高速模式

国内浏览器厂商一般都支持兼容模式（即 IE 内核）和高速模式（即 webkit 内核），不幸的是，所有国产浏览器都是默认使用兼容模式，这就造成由于低版本 IE （IE8 及以下）内核让基于 Bootstrap 构建的网站展现效果很糟糕的情况。幸运的是，国内浏览器厂商逐渐意识到了这一点，某些厂商已经开始有所作为了！

将下面的 \ 标签加入到页面中，可以让部分国产浏览器默认采用高速模式渲染页面：

<meta name="renderer" content="webkit">

目前只有360浏览器支持此 标签。希望更多国内浏览器尽快采取行动、尽快进入高速时代！

IE10 和 Windows (Phone) 8

Internet Explorer 10 并没有对 屏幕的宽度 和 视口（viewport）的宽度 进行区分，这就导致 Bootstrap 中的媒体查询并不能很好的发挥作用。为了解决这个问题，你可以引入下面列出的这段 CSS 代码暂时修复此问题：

@-ms-viewport       { width: device-width; }

然而，这样做并不能对 Windows Phone 8 Update 3 (a.k.a. GDR3) 版本之前的设备起作用，由

Safari 对百分比数字凑整的问题

模态框、导航条和虚拟键盘

超出范围和滚动

\ 元素在 iOS 和 Android 上对 overflow: hidden 的支持很有限。结果就是，在这两种设备上的浏览器中，当你滚动屏幕超过模态框的顶部或底部时，\ 中的内容将开始随着滚动。See Chrome bug #175502 (fixed in Chrome v40) and WebKit bug #153852.

iOS text fields and scrolling

虚拟键盘

还有，如果你正在使用 fixed 定位的导航条或在模态框上面使用输入框，还会遇到 iOS 在页面绘制上的 bug，当触发虚拟键盘之后，其不会更新 fixed 定位的元素的位置。这里有几种解决方案，包括将 fixed 定位转变为 position: absolute 定位，或者启动一个定时器手工修正组件的位置。这些没有加入 Bootstrap 中，因此，需要由你自己选择最好的解决方案并加入到你的应用中。

导航条上的下拉菜单

浏览器的缩放功能

Sticky :hover/:focus on mobile (移动设备上应用 :hover/:focus)

尽管在大多数触摸屏上没有真正的悬停状态，大部分移动设备浏览器模拟了悬停（hover）状态并让 :hover 状态”多展现一会儿”。
换句话说，轻触元素后开始应用 :hover 样式，并且在用户轻触其他的元素之后停止应用 :hover 样式。
在这些浏览器中，Bootstrap 的 :hover 状态可能不是你所预期的。某些移动浏览器中的 :focus 状态也存在同样的问题。

对于这些问题，除了完全清除这些样式，目前还没有简单的解决方法。

打印

即便是在某些很现代的浏览器中，打印页面功能也还是存在很多陷阱。

举个例子，从 Chrome v32 开始，打印一个支持媒体查询的页面时，

Android stock browser (Android 系统默认浏览器)

Android 4.1 （甚至某些较新版本）系统的默认浏览器被设置为默认打开页面的应用程序（不同于 Chrome）。不幸的是， 一般情况下，这些浏览器有很多bug以及和CSS标准不一致的地方。

选项菜单

Validators (W3C 页面源码校验)

一 对第三方组件的支持

虽然我们并不官方支持任何第三方插件，我们还是提供一些建议，帮你避免可能在你的项目中会出现的问题。

box-sizing 属性

某些第三方软件，包括 Google 地图和 Google 定制搜索引擎都会由于 * { box-sizing: border-box; } 的设置而产生冲突，这一设置使 padding 不影响页面元素最终宽度的计算。更多信息请参考 盒模型与尺寸计算 - CSS Tricks。

根据不同情况，你可能需要根据情况覆盖（第1种选择）或为所有区域设置（第2种选择）。

二 可访问性

Bootstrap 遵循统一的 web 标准，另外，通过做一些少量的修改，还可以让使用 辅助设备（AT - ASSISTIVE TECHNOLOGY）上网的人群访问你的站点。

跳过导航区

如果你的导航部分包含很多链接，并且在 DOM 结构上也是排在主内容之前，那么，建议在导航前面添加一个 Skip to main content（直接进入主内容区） 的链接（这篇文章 A11Y Project article on skip navigation links给了简要的解释）。 通过使用 .sr-only 类可以让 “Skip to main content（直接进入主内容区）” 链接在视觉上是不可见的，而 .sr-only-focusable 类可以让这个链接在获得焦点的时候变为可见（对于使用键盘导航的用户）。

1
2
3
4
5
6
7
<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

标题嵌套

当标题嵌套时 (

-

)，你的文档的主标题应该是

标签。随后的标题逻辑上就应该使用

-

，这样，屏幕阅读器就可以构造出页面的内容列表了。

色彩对比

当前，Bootstrap 使用的默认颜色组合的对比度（例如各种 styled button 类；一些 基本代码块高亮代码所用的颜色；.bg-primary 上下文背景色 辅助类；和白色背景下默认的链接颜色）都比较低（低于 推荐比例 4.5:1）。

这会导致视力低下和色盲用户在使用时产生困难。这些默认颜色可能需要进行修改，以增强对比度和清晰度。

扩展阅读

三 许可证 FAQ

Bootstrap 遵守 MIT 许可证进行发布，2018 Twitter 版权所有。归结为以下几点：

10:23

B 全局CSS样式

C 组件

D Javascript插件

E 定制

F 网站实例

knowledge is no pay,reward is kindness
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多
0%