• 技术文章 >web前端 >Bootstrap教程

    bootstrap的原理是什么

    藏色散人藏色散人2019-07-23 13:41:29原创3805

    网格系统的实现原理,是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

    bootstrap的原理是什么

    bootstrap的实现原理

    通过定义容器的大小,平分为12份(也有24份,23份的,取12份是一打,表示进阶完美的意思),再调整内外边距,最后结合媒体查询,制作出了强大的响应式网格系统。(可以通过重新编译LESS码源来修改12这个数值)。

    1.数据行(.row)必须包含在容器(.container)中,以便赋予合适的对其方式和内边距(padding)。

    2.在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如:12.

    3.通过设置内边距(padding)从而创建列于列之间的间距。然后通过为第一列和最后一列设置负值的外距(margin)来抵消内距(padding)的影响。

    4.不希望相邻的两个列紧靠近在一起,就用offset功能来实现。

    相关推荐:《bootstrap教程

    以上就是bootstrap的原理是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:bootstrap
    上一篇:bootstrap怎么更改主题 下一篇:bootstrap为什么是12栅格
    大前端线上培训班

    相关文章推荐

    • 用npm下载bootstrap后怎么引入• bootstrap方法是什么• 为什么要使用bootstrap框架• bootstrap怎么更改主题

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网