BootStrap一款让后端到无比舒服的前端框架

快速掌握Bootstrap：栅格系统与响应式设计

最新推荐文章于 2025-10-02 09:12:18 发布

原创最新推荐文章于 2025-10-02 09:12:18 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #html #css #html5

文章目录

前言
一、bootstrap是什么？
二、bootstrap常用class
三、对bootstrap的其他推荐

前言

下载地址：https://getbootstrap.com/docs/3.4/getting-started/#download
下载请选择自己需要的版本，推荐3.的版本，比较稳定，教程也大多是3.，然后下载的话，最左边是编译文件不包含源代码占内存小适用于需要上线的，中间的是源代码文件比较全，最后的sass是css扩展语言，有需要的可以自行下载，链接打开就是3.版本，需要4.或最新5.版本，可以返回主页后自行选择版本。
学习bootstrap需要您具备HTML、CSS、JS的一些知识。

如果你想成为全栈工程师的话，那你就更应该点点赞，点点关注了

一、bootstrap是什么？

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

简单来说，bootstrap是一种前端框架，非常适合懒人，也非常适合初学者，开发者可以使用class属性给HTML标签添加各种bootstrap已经构建好的样式UI或者对网页的控制。

二、bootstrap常用class

1.bootstrap之无比重要的栅格系统

网格系统通过一系列包含内容的行和列来创建页面布局。
简单来说，栅格系统通过讲一行划分成12列，每一列占一个单位，你也可以在已经划分好的12列中再去进行一次划分，每一次划分都会将需要划分的单位划分为12列，即12个单位。
具体如图所示：
在这里插入图片描述
将栅格系统添加进你的HTML页面如：

<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>

在这个代码中，
row代表了一行，书写这个class的元素在这个块级元素内会占一行，而不需要开发者去书写浮动，大大简便了前端的开发过程
col是栅格系统必须有的，
sm代表响应式的一种形式，即小型
4代表了你想要将这一行分配好的12个元素占4个元素

这里需要说明一下，栅格系统是必须要满12个列的。
当这一行的列数不满12时，会自动分配空列
当这一行的列数超过12时，超过12的标签会换行到下一行（这里的超过12并不是超过12的部分，例如：当你前面已经分配好8个列了，最后一个标签你分配了5个列，这样就会有13个列，而最后你分配5个列的那个标签就会自动换行）

2.bootstrap第二好用的功能-响应式

bootstrap前端框架是以移动优先的，意思是，使用bootstrap框架开发的应用大多会是移动端的，但是bootstrap也同样支持PC端的开发。
为了便利移动端的不同分辨率都能正常显示，bootstrap提供了响应式的功能。
这里的响应式就是我们前面指的sm
xs—代表特表小型
sm—代表小型
md—代表中型
lg—代表大型

不同的响应式，能够提供在不同的分辨率上显示，当你需要在不同分辨率上显示正常内容时，就可以添加多个响应式
例如：

<div class="row">
<div class="col-sm-4 col-md-4"></div>
</div>

这样就能使开发的应用兼容不同的分辨率

3.bootstrap的其他

通过上面的了解，我们知道bootstrap是通过已经写好的class框架来对标签进行UI样式的设计和布局排版。
而除了bootstrap非常重要的栅格系统和响应式之外，bootstrap也提供了为其他标签使用的其他class

class	适用于	功能
text-center	p标签	居中对齐文本
small	p	小字号
h1	p	h1号的文字
table	table	为表格添加样式
success	tr、td、th	表示成功的操作
table-striped	table	为tbody添加条纹
btn	button	为按钮添加基本样式
img-circle	img	将添加的图片切割为圆形
pull-left	大多数	将元素浮动到左边
caret	span	按钮下拉菜单

这里我们只列举一些常用的bootstrap class，其他class的样式还请系统的学习bootstrap，每一种class都不止上面列举的那样，比如：pull-left会有对应的pull-right、h1也会有其他的h2-h6。

三、对bootstrap的其他推荐

而需要学习bootstrap的宝贝们，可以参考以下资源，我不是打广告的，只是推荐而已。
b站：https://www.bilibili.com/video/BV1TU4y1p7zU?p=7
（这个视频的讲解非常好，而且小姐姐讲解的声音也非常好听）

菜鸟：https://www.runoob.com/bootstrap/bootstrap-tutorial.html
菜鸟工具beta：https://www.runoob.com/try/bootstrap/layoutit/#
(这是一款非常好用的实时工具，大大简化了开发，如果你想要简便化开发的话，可以直接在网站上拖拖拽拽，形成基本结构，然后将代码复制下来然后在进行修改，得到自己想要的样式。)