bootstrap

最新推荐文章于 2021-02-03 09:10:00 发布

记得要背单词

最新推荐文章于 2021-02-03 09:10:00 发布

阅读量190

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/nowchange/article/details/96909250

Bootstrap的CSS组件的核心就是选择器的定义以及在各自优先级上的处理

栅格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份，再调整内外边距，最后再结合媒体查询，就制作出了强大的响应式的栅格系统也就是列组合用法，就是通过更改数字来合并列，类似于表格里的colspan 。

<div class="container">
    <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <!--由于这12个div都一样,所以这里省略了其他10个-->
        <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
    </div>
</div>

列偏移

有的时候，我们不想让两个相邻的列挨在一起，这时候利用栅格系统的列偏移（offset）功能来实现，而不必再定义margin 值。使用.col-md-offset-*形式的样式就可以将列偏移到右侧。

列嵌套

栅格系统也支持列嵌套，即在一个列里再声明一个或者多个行（row）。但是注意，内部所嵌套的row的宽度为100% 时，就是当前外部列的宽。

媒体查询是进行响应式设计的核心要素，其功能非常强大

Bootstrap主要用到min-width、max-width，以及and语法，用于在不同的分辨率下设置不同的CSS样式

@media (max-width: 767px) {  
  /*在小于768像素的屏幕里,这里的样式才生效*/ }
 @media (min-width: 768px) and (max-width: 991px) {    /*在768和991像素之间的屏幕里,这里的样式才生效*/ } 
@media (min-width: 992px) and (max-width: 1199px) {  
  /*在992和1199像素之间的屏幕里,这里的样式才生效*/ } 
@media (min-width: 1200px) {  
  /*在大于1200像素的屏幕里,这里的样式才生效*/ }