bootstrap总结(暂时还不全)

最新推荐文章于 2023-02-03 23:00:48 发布

转载最新推荐文章于 2023-02-03 23:00:48 发布 · 93 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/QimiSun/p/10067313.html

本文介绍如何通过添加viewport元标签使网页适配移动端设备，并利用normalize.css清除浏览器默认样式。此外，还详细讲解了Bootstrap框架中的栅格系统布局方法，包括不同屏幕尺寸下的列数分配及偏移。

加上<meta name="viewport" content="width=device-width, initial-scale=1">网页就能适配移动端
加上<link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.1/normalize.min.css">就能清除浏览器自带的边缘8px
bootstrap需要为页面内容和栅格系统包裹一个.container容器
栅格系统
    想使用栅格系统，必须包裹在一个.container容器里边
    每一行均分成12列，每一个标签可以自定义占的列数(col-xx-xx)，必须放在.row中
    中间那个xx，如果是电脑用md，如果是手机用xs,如果是平板用sm,如果是超大屏幕用lg
    col-md-5 col-md-offset-2 占十二行的五列，并且前面空两列，相当于从第三列开始
    如果一行中有：col-md-5，col-md-5，col-md-5的话，最后五列就会跑下去，因为一行只能容纳12列
    col-md-5 col-md-push-7 占五列，然后往后推了7列