boostrap 学习笔记

时间:2019-09-16
本文章向大家介绍boostrap 学习笔记,主要包括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