您的位置:首页 > Web前端 > BootStrap

bootstrap基础自我总结

2020-06-26 04:29 344 查看

今天自学了一些封装的css,看起来官网很强大,但是因为源码备注都是英文的情况下,还是感觉想深入有点力不从心,发现度娘没有中文手册,无奈,不过还好代码无国界,基本都是能看懂的,备注也影响不大(安慰自己)
自己的小总结

  1. 首先是引入,这个不用说了,link。
  2. 其次是js的引入,由于我上官网查找了一翻,发现bt的所有js,插件等等都是基于jQ写的,所以注意引入不管什么插件都要先引入jQ。
  3. 基于媒体查询

叨叨半天了,正题:

  1. row为行,col为列,一个row中有12等份的col,安排份数超过12行就换行。
  2. 默认居中
  3. 对应媒体查询:
    xs:超小屏幕(<768px)xs
    sm:小屏幕(>=768px<992px)sm
    md:中等屏幕(>=992px<1200px)md
    lg:大屏幕(>=1200px)lg
  4. row col 等份不能加小数点(亲测)。
  5. 样式因为是封装好的,调整源码需要翻几w甚至更多行代码(具体没看),所以我在测试阶段就赶紧试了样式微调,因为封装的虽多,但是毕竟多的不一定就是你想要的,然后发现!样式可控,简单来说就是可以在行内样式进行微调,最担心的就是因为封装的太多,怕微调后与其冲突,但是还好没有,亲测可行。但是影响了宽度。咳,具体自己在调试一下。
  6. offset为偏移量,也就是向右偏移,其实也就是增加了左margin,谁需要偏移直接在行内偏移。格式为:col-xx-offset-xx,第一个xx为对应的宽度,第二个为偏移了几份,还是以12为基准。
  7. 类名为container的盒子默认为居中占约70%的宽度,可以改为container-fluid,为居中占95%左右的宽度。
  8. 列嵌套式行内是列,列内不能是列,列内还得是行并且均分12份。
  9. push向右偏移,pull向左偏移
  10. 表格生成真的很好用,超级大的一个表格直接就生成了,关系式在脑子里。
  11. table为表格基础类,必须写,table-bordered:表格边框,table-striped:条纹状(也就是隔一个一条阴影),table-hover:也就是伪类的效果,颜色为暗灰色,亲测可控,通过类名覆盖。
  12. 按钮都挺好玩的。
  13. 响应式图片:img-responsive:图片多大都得充满父元素,边框:img-rounded(圆角)img-circle(椭圆=<个人感觉border-rodius50%>)img-thumbnail(给图片加个框)
  14. 该下课了。做一下微信登录登出界面。
  15. 晚安博客
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: