响应式框架Bootstrap

Posted 2021-04-29 小桃子的随笔

一、Bootstrap是什么？

进入 Bootstrap 的官方网站（http://getbootstrap.com/），我们可以看到这样一句话：Bootstrap is the most popular html, CSS, and JS framework for developing responsive, mobile first projects on the web。

这句话的意思是：Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的Web项目。

网址：https://www.bootcss.com/

二、Bootstrap优势有哪些？

• Bootstrap 出自 Twitter。由大公司发布，并且完全开源，自然久经考验，减少了测试的工作量。这也就是我们经常说到的站在巨人的肩膀上，不重复造轮子。

• Bootstrap 的代码有着非常良好的代码规范。在使用 Bootstrap 时也有助于我们去养成良好的编码习惯，在 Bootstrap 的基础之上创建项目，日后代码的维护也变得异常简单清晰。

• Bootstrap 是基于 Less 打造的，并且也有 Sass版本。Less/Sass是CSS的预处理技术，正因如此，它一经推出就包含了一个非常实用的 Mixin 库供我们调用，使得我们在开发过程中对CSS的处理更加简单。

• 响应式开发。Bootstrap响应式的栅格系统（Grid System）非常先进，它已经帮你搭建好了实现响应式设计的基础框架，并且非常容易修改，如果你是一个新手，Bootstrap 可以帮助你在非常短的时间内上手响应式布局的设计。

• 丰富的组件与插件。Bootstrap 的 HTML组件和 JS组件非常丰富，并且代码简洁，非常易于修改，如果你觉得它设计的样子不是你所想要的，你完全可以在其基础之上修改成自己想要的任何样子。由于 Bootstrap 的火爆，又出现了不少围绕 Bootstrap 而开发的JS插件，这就使得开发的工作效率得到极大提升。

• 以上这些都是使用 Bootstrap 所带来的优势。当然 Bootstrap 并不能帮你完成所有事情，它只是一个的框架，在这个框架上面你依旧可以任意的发挥，并且发挥得更好，但是前提是你要驾驭得了它。

  
  

  
  

三、基本模板

四、栅格系统

栅格系统按照一定规则把 div的的纵向排列 改成了类似表格的排列形式。

一定规则：把所有的屏幕( 4种-屏幕宽度) 分为了12份 每一列占一份，再进行排列。

五、4种宽度不同的屏幕

• 极小屏幕 xs 小于等于768px 手机设备

• 小屏幕 sm 768px ~992px 平板电脑

• 中等(普通)屏幕 md 992px~1200px - 老旧的电脑显示器

• 大屏 lg 大于1200px 大的电脑显示器

  
  

六、编写栅格系统步骤

• 版心容器 .container或者 .container-fluid

• 行 .row

• 栅格代码   col-(屏幕种类)-份数  如  col-xs-11

七、示例

八、常见组件

• 模版

• 栅格系统

• 导航条

• 轮播图-carousel

• 工具提示

• 按钮

• 媒体对象

• 进度条

• Glyphicons 字体图标

文章摘要：

https://www.bootcss.com/(Bootstrap中文网)