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一样了。。