bootstrap是怎么实现自适应的？

自适应： 不管屏幕多大，都尽量不换行，而只是横向缩放。而Boostrap是通过“栅栏系统”实现自适应的。

栅栏系统是通过定义容器大小，并将其等分12份，通过一系列行（row）与列（column)，结合媒体查询制作成强大的响应式栅格系统。

Boostrap自适应功能的基础就是“栅栏"模式，它是将浏览器以行列形式去划分：一共12列，行数自定义，根据你所要显示的元素，确定每个元素显示的大小即需要的列数，如果超过范围，就会自动转行。每列的大小是Boostrap根据当前浏览器的大小自动平均分配。

工作原理：

• 数据行（row）必须包含在 .container(固定宽度) 或 .container-fluid（100%宽度）中。以便为其赋予合适的排列（aligment）和内补（padding）。

• 通过行（row）在水平方向上创建一组列（column），随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。。

• 通过列（row）设置padding属性来创建列之间的间隔。通过.row设置负值margin从而抵消.container元素设置的padding（简介为行（row）所包含的列（column）抵消padding，也即后面实例中向外突出的原因）。

• 超过12列，多余的列另起一行

栅栏参数表：

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  @media (min-width: 768px) {
  .container {
    width: 750px;
  }
  @media (min-width: 992px) {
  .container {
    width: 970px;
  }
  @media (min-width: 1200px) {
  .container {
    width: 1170px;
  }

如上，栅栏系统最外层区分了四种宽度的浏览器：

基本用法：

创建一个响应式行：

<div class="container">
    <div class="row">...</div>
</div>

1.通过更改数字合并列(列总和<=12)

        <div class="container">
            <div class="row">
                <div class="col-md-4" style="border:1px solid #1B6D85;">.col-md-4</div>
                <div class="col-md-8" style="border:1px solid #1B6D85;">.col-md-8</div>
            </div>
            <div class="row">
                <div class="col-md-4" style="border:1px solid #1B6D85;">.col-md-4</div>
                <div class="col-md-4" style="border:1px solid #1B6D85;">.col-md-4</div>
                <div class="col-md-4" style="border:1px solid #1B6D85;">.col-md-4</div>
            </div>
            <div class="row">
                <div class="col-md-6" style="border:1px solid #1B6D85;">.col-md-6</div>
                <div class="col-md-6" style="border:1px solid #1B6D85;">.col-md-6</div>
            </div>

2.列排序

改变列的方向，就是改变左右浮动，并且设置浮动的距离。（通过添加类名“col-md-push-number”和“col-md-pull-number”）

<div class="container">
            <div class="row">
                <div class="col-md-4 col-md-push-8" style="border: 1px solid silver;">.col-md-4</div>
                <div class="col-md-8 col-md-pull-4" style="border: 1px solid silver;">.col-md-8</div>
            </div>
        </div>

3.列的嵌套

<div class="container">
    <div class="row" style="border: 1px solid red;">
        <div class="col-md-8">
            <!--嵌套,将父层宽度视为100%-->
            <div class="row">
                <div class="col-md-6" style="border: 2px dashed green;">col-md-6</div>
                <div class="col-md-6"style="border: 2px dashed green;">col-md-6</div>
            </div>
        </div>
        <div class="col-md-4">col-md-4</div>
    </div>
</div>

更多web开发知识，请查阅 万博manbetx平台中文网 ！！

以上就是bootstrap是怎么实现自适应的？的详细内容，更多请关注万博manbetx平台中文网其它相关文章！