Bootstrap

Zhang21 收录于 programming

2018-09-18 约 1660 字预计阅读 4 分钟

参考：

Bootstrap中文文档: https://v3.bootcss.com/

环境：

CentOS7x86_64
Bootstrap v3

概述

Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。 Bootstrap让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。

起步

安装

包含的内容

Bootstrap 提供了两种形式的压缩包，在下载下来的压缩包内可以看到以下目录和文件，这些文件按照类别放到了不同的目录内，并且提供了压缩与未压缩两种版本。

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

预编译版，预编译文件可以直接使用到任何 web 项目中。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


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源码，源码包含了预先编译的 CSS、JavaScript 和图标字体文件，并且还有 LESS、JavaScript 和文档的源码。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

编译CSS和JS文件

基本模板

这份超级简单的 HTML 模版，我们强烈建议你对这些实例按照自己的需求进行修改，而不要简单的复制、粘贴。

 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="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
  </body>
</html>

实例精选

我们鼓励你根据自身项目的需要对 Bootstrap 进行定制和修改。

框架基本用法

入门级模板(starter template) 只有基本的东西：引入了预编译版的 CSS 和 JavaScript 文件，页面只包含了一个 container 元素。

Bootstrap主题(theme) 加载可选的 Bootstrap 主题，获得增强的视觉体验。

栅格(grids) 多个关于栅格布局方面的实例，涉及到层级（tier）、嵌套（nesting）等等。

Jumbotron Build around the jumbotron with a navbar and some basic grid columns.

Narrow jumbotron Build a more custom page by narrowing the default container and jumbotron.

导航条实例(navbars)

导航条(navbar) 包含导航条和一起附加内容的超级基础的模板。

静态导航条(static top navbar) 包含一个静态导航条以及一些附加内容的超级基础的模板。

固定位置的导航条(fixed navbar) 这是一个超简单的页面，拥有一个固定在顶部的导航条和一些演示内容。

自定义组件(customed Components)

封面图(cover) 一个简单、漂亮的首页。

Carousel Customize the navbar and carousel, then add some new components.

博客页面(blog) 简单的两列式博客布局，还包含了自定义的导航、页头、分类等元素。

控制台(dashboard) 包含基本结构的后台管理模板，还有固定的侧边栏和导航条。

登录页(sign-in) 自定义的表单布局以及经过简单设计的登录表单。

Justified nav Create a custom navbar with justified links.

Sticky footer Attach a footer to the bottom of the viewport when the content is shorter than it.

Sticky footer with navbar Attach a footer to the bottom of the viewport with a fixed navbar at the top.

实现性案例(Experiments)

非响应式Bootstrap布局(Non-responsive) Easily disable the responsiveness of Bootstrap per our docs.

Offcanvas Build a toggleable off-canvas navigation menu for use with Bootstrap.

工具

Tools

CSS

docs: https://getbootstrap.com/docs/3.3/css/ docs-cn: https://v3.bootcss.com/css/

概览

设置全局CSS样式；基本的HTML元素均可以通过class设置样式并得到增强效果；还有先进的栅格系统。

深入了解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。

HTML5文档类型

HTML5 DOCTYPE

Bootstrap使用到某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。在你项目的每个页面下都要参照下面的格式进行设置。

1
2
3
4


<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>

移动设备优先

Bootstrap 是移动设备优先的。

目录