大白话讲解Bootstrap是什么

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<!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等,它就会去表现相应的效果出来。

下一篇:Bootstrap入门

代码交流 2021