官网:https://getbootstrap.com/
中文网:http://www.bootcss.com/
![93c7819f40e58301485d02f5d0805828.png](https://i-blog.csdnimg.cn/blog_migrate/1f39dbe89a64e4e9b25490794f461bd5.png)
一:什么是Bootstrap?
![2aedec9d48aef0bee399fe18fc107f17.png](https://i-blog.csdnimg.cn/blog_migrate/7b32f012b65ff9535fd666bc3528befa.png)
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。
![93c7819f40e58301485d02f5d0805828.png](https://i-blog.csdnimg.cn/blog_migrate/1f39dbe89a64e4e9b25490794f461bd5.png)
二:Bootstrap的概念:
![2aedec9d48aef0bee399fe18fc107f17.png](https://i-blog.csdnimg.cn/blog_migrate/7b32f012b65ff9535fd666bc3528befa.png)
包含jquery.js、bootstrap.min.js、bootstrap.min.css文件,可将常规的html文件改为使用bootstrap模版。
jquery.js需在bootstrap.min.js前引入。
优点:支持主流浏览器。响应式布局。开发快。
缺点:不兼容低版本浏览器,如果定制的话,会产生大量冗余代码。违背了内容与表现分离原则。
![93c7819f40e58301485d02f5d0805828.png](https://i-blog.csdnimg.cn/blog_migrate/1f39dbe89a64e4e9b25490794f461bd5.png)
三:为什么要使用Bootstrap?
![2aedec9d48aef0bee399fe18fc107f17.png](https://i-blog.csdnimg.cn/blog_migrate/7b32f012b65ff9535fd666bc3528befa.png)
Bootstrap为我们写好测试了各种兼容、疑难问题,并构建了一套非常优秀成熟的响应式类,并及时提供了移动端优先的响应式系统,我们只需使用Bootstrap已经封装好的class。
![93c7819f40e58301485d02f5d0805828.png](https://i-blog.csdnimg.cn/blog_migrate/1f39dbe89a64e4e9b25490794f461bd5.png)
四:Bootstrap如何帮助我们?
![2aedec9d48aef0bee399fe18fc107f17.png](https://i-blog.csdnimg.cn/blog_migrate/7b32f012b65ff9535fd666bc3528befa.png)
举个例子:响应式导航栏
如果没有Bootstrap,我需要知道移动端、平板设备等屏幕尺寸,然后通过@media不同尺寸引入不同样式,来完成一个响应式,其中还要考虑IE8等浏览器是否兼容,等一些列的问题都可能存在,不仅项目开发的周期会很长,一些潜在的BUG也可能存在,每次开发,都要重复造轮子。
![93c7819f40e58301485d02f5d0805828.png](https://i-blog.csdnimg.cn/blog_migrate/1f39dbe89a64e4e9b25490794f461bd5.png)
五:下载Bootstrap
![2aedec9d48aef0bee399fe18fc107f17.png](https://i-blog.csdnimg.cn/blog_migrate/7b32f012b65ff9535fd666bc3528befa.png)
(1)用于生产环境(项目开发)
less文件编译并压缩后的 CSS、JavaScript 和字体文件,不包含文档和源码文件,大小相对于源码包减少一些,用于项目开发生产环境中使用。
(2)源码(学习或更改再次封装)
文件都是源码,未经过压缩,可以在编辑器或记事本等直接打开,供学习其思路及更改自己所需样式,再者基于Bootstrap源码封装项目所需类,其包含Less、JavaScript 和 字体文件的源码,并且带有清晰的文档,但需要 Less 编译器和一些设置工作。
(3)sass(针对 Sass 的项目中引入)
从 Less 到 sass 的源码移植项目,用于快速地在 Rails、Compass 或 只针对 Sass 的项目中引入,一般情况下用不到此包。
了解了各包的介绍,我们下载Bootstrap压缩版,下载后会得到一个文件夹,包含以下文件树:
压缩版文件树:
源码包文件树:
下载后,我们先放在一边备用。
![93c7819f40e58301485d02f5d0805828.png](https://i-blog.csdnimg.cn/blog_migrate/1f39dbe89a64e4e9b25490794f461bd5.png)
六:了解CDN
![2aedec9d48aef0bee399fe18fc107f17.png](https://i-blog.csdnimg.cn/blog_migrate/7b32f012b65ff9535fd666bc3528befa.png)
即内容分发网络(Content Delivery Network),CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率,其关键技术主要有内容存储和分发技术,其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。
我们不难发现,简单来说只是换了一种方式支持Bootstrap,从本地文件方式,换到了网页方式。
BootstrapCDN
推荐一款稳定、快速、免费的前端开源项目 CDN 加速服务,同样是Bootstrap项目。
BootCDN:https://www.bootcdn.cn/
![93c7819f40e58301485d02f5d0805828.png](https://i-blog.csdnimg.cn/blog_migrate/1f39dbe89a64e4e9b25490794f461bd5.png)
七:引入Bootstrap
![2aedec9d48aef0bee399fe18fc107f17.png](https://i-blog.csdnimg.cn/blog_migrate/7b32f012b65ff9535fd666bc3528befa.png)
我们需要引入的文件有以下:
(1).css/bootstrap.min.css
CDN:
(2).js/bootstrap.min.js
CDN:
(3).还需要有JQuery的支持:js/JQuery.min.js
CDN:
注意:Bootstrap 所提供的许多组件都依赖 JavaScript 才能运行。具体来说,这些组件都依赖 jQuery、Popper.js 以及我们自己的 JavaScript 插件。所以我们还需要下载jquery.js和popper.js文件来运行Bootstrap的js代码。
Jquery下载:https://jquery.com/download/
Popper下载: https://unpkg.com/@popperjs/core@2.5.4/dist/umd/popper.min.js
基本的模板如下:
引入一个按钮布局后如下图:
这样你的Bootstrap环境就搭建好了。
接下来就简单的介绍下Bootstrap布局方式和几个组件:
一、响应式布局:
步骤:
1:定义容器:相当于之前的table。
容器的分类:
container(固定宽度):两边有空白,除了最小的屏幕。
container-fluid(全屏宽度) :每一种设备都是100%宽度。
2:定义行:相当于之前的 tr 样式:row
3:定义元素:指定该元素在不同的设备上,所占的格子数目。
样式:col-设备代号-格子数目。
设备代号:
.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
注意事项:
响应式布局可以将一行平均分为12个格子,可以指定元素占几个格子
一行中如果格子数目超出12,那么就会自动换行
栅格类属性可以向上兼容
如果真实设备的宽度小于了设置栅格属性的设备代码的最小值,会一个元素占满一整行。
代码显示如下:
代码实现的效果如下图:
二、CSS组件:
本部分内容以一个登录—注册页面来简单的介绍CSS组件
代码如下:
所呈现的内容如下:
首先,就是搭建一个响应式布局,这里为了呈现的更加清楚特意添加了1px的边框来分辨响应式布局的区域划分,所有的内容都在 div.container 中进行编辑。
界面内主要有标题,表单和按钮三个,这里主要江表单和按钮。
账号和密码所涉及的便是Bootstrap里的表单组件,账号(密码类似)处的代码主要在 .form-group 的div 里面进行编辑,然后利用 创建文本框上的标题,在下面添加表单元素(.form-control 类:表单宽度设置为 100%。)这样就创建好了一个表单。
“记住我的密码”处主要利用了复选框组件,创建一个 .form-check 的一个div。在里面添加一个 .form-check-label 的一个label框,内部写一个 type="checkbox" 的表单。复选框的制作就完成了。
最后就是登录和注册按钮,这两个都是利用的button来创建的,共同创建一个 type="submit" class="btn btn-default” 的button按钮,在里面写入一个a标签,作为点击时跳转的链接。
这样一个简单的登录—注册静态界面就制作好了。
![93c7819f40e58301485d02f5d0805828.png](https://i-blog.csdnimg.cn/blog_migrate/1f39dbe89a64e4e9b25490794f461bd5.png)
结语:
![2aedec9d48aef0bee399fe18fc107f17.png](https://i-blog.csdnimg.cn/blog_migrate/7b32f012b65ff9535fd666bc3528befa.png)
本篇博客主要介绍了如何使用Bootstrap以及简单介绍了Bootstrap的几个组件,如果需要更深入的学习Bootstrap,小编建议请移步到菜鸟教程上或者Bootstrap官网上学习。希望各位学有所获,做出代码更少,内容更丰富的网页出来。
![8305bfec7f5f7d957a74c015e912c0da.png](https://i-blog.csdnimg.cn/blog_migrate/26fc3ea7919ed8c0d90a12d3277f886c.png)
本期编辑:廖逸行