boostrap 学习笔记

bootstrap : 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。
用于项目样式的快速搭建，真的是。。特别快。。

随便找两个cdn引用就能使用了。

https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap-grid.css
https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.bundle.js

网格系统:

必须包含在.container类之中

基本结构
<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>

其中，col-m1-m2

m1值的是什么设备，一般有xs超小设备，sm小型平板电脑，md中型台式电脑，lg大型台式电脑
m2值的是列，这一列的长是多少，范围是lng1,lng12, 当其是12的时候，正好是扩展到整行。
col-md-offset-3 在m2前面加入offset，指示偏移，offset的范围是1到11

可以注意的是:行列，还可以嵌套使用。

常用类

bootstrap 已经为很多常用的html 标签，添加了基础的样式，其上更是有很多常用的类，直接写这些常用的类，可以大大地加快开发速度。
比如:

.table .btn .btn-default  .img-rounded

组件式地开发。。
现在已经有各种bootstrap在线化的定制工具了。。
比如

Layoutit,Bootstrap Magic,Fancyboot,Bootsnipp

前端。。真的快跟写ppt一样了。。

转载于:https://www.cnblogs.com/whyaza/p/11527310.html