Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架, 是一个用于快速开发 Web 应用程序和网站的前端框架。就是说你只需要写HTML标签调用它的类你就可以很快速的做一个高大上的网页,你不用担心兼容问题,提供了很多样式供你选择!
比如你需要做一个网站的导航对吧,你自己写的话你需要写很多代码,但是如果你使用bootstrap框架来写的话,只需要写好HTML标签然后调用类名就可以了!
在现代 Web 开发中,有几个几乎所有的 Web 项目中都需要的组件。
Bootstrap 为您提供了所有这些基本的模块 – Grid、Typography、Tables、Forms、Buttons 和 Responsiveness。
此外,还有大量其他有用的前端组件,比如 Dropdowns、Navigation、Modals、Typehead、Pagination、Carousal、Breadcrumb、Tab、Thumbnails、Headers 等等。
有了这些,你可以搭建一个 Web 项目,并让它运行地更快速更轻松。
此外,由于整个框架是基于模块的,您可以通过您自己的 CSS 位,甚至是项目开始后的一个大整改,来进行自定义。
上述太官方
Bootstrap是一个做网页的框架(目前最流行的WEB前端框架之一),
就是说你只需要写HTML标签调用它的类你就可以很快速的做一个高大上的网页,你不用担心兼容问题,提供了很多样式供你选择!
比如你需要做一个网站的文本显示对吧,你自己写的话你需要写很多代码,但是如果你使用bootstrap框架来写的话,只需要写好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 1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="utf-8">
5 <title>Bootstrap 实例 - 强调</title>
6 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
7 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
8 <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
9</head>
10<body>
11
12<small>本行内容是在标签内</small><br>
13<strong>本行内容是在标签内</strong><br>
14<em>本行内容是在标签内,并呈现为斜体</em><br>
15<p class="text-left">向左对齐文本</p>
16<p class="text-center">居中对齐文本</p>
17<p class="text-right">向右对齐文本</p>
18<p class="text-muted">本行内容是减弱的</p>
19<p class="text-primary">本行内容带有一个 primary class</p>
20<p class="text-success">本行内容带有一个 success class</p>
21<p class="text-info">本行内容带有一个 info class</p>
22<p class="text-warning">本行内容带有一个 warning class</p>
23<p class="text-danger">本行内容带有一个 danger class</p>
24
25</body>
26</html>
27
效果如下:
作用:
用它提供的样式和组件快速写网站
你
只需要引用一些定义好的类,也就是class名字,就可以创建出已经有非常漂亮的样式的网页,而且支持自适应,是一个很不错的框架。
简而言之:你只需要了解相关的class、标签名称等所代表的意思,然后在构建页面的时候,导入bootstrap的JS、css等,它就会去表现相应的效果出来。