Bootstrap

参考:

环境:

  • 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 是移动设备优先的。




排版与链接