Bootstrap響應式佈局

時間 2019-11-17

原文原文鏈接

Bootstrap響應式佈局能夠使用柵格化系統，其實就是不一樣的列組合，配合起來便能組合出強大的功能，系統會自動分爲最多12列，超出12列會做爲一個總體另起一行，像製做表格table的合併列，功能跟colspan相似。css

使用方法：html

一、包含在.container或.container-fluid中bootstrap

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

二、建立柵格系統佈局

.col-lg-* 桌面柵格類，適合大屏幕大桌面顯示器 (≥1200px)ui

.col-md-* 桌面柵格類，適合中等屏幕桌面顯示器 (≥992px)spa

.col-xs-* 移動柵格類，適合超小屏幕手機 (<768px)code

.col-sm-* 平板柵格類，適合小屏幕平板 (≥768px)htm

<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <title>bootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        body{padding-top: 50px;}
        [class^="col"]{
            border:1px solid #000;
            height: 30px;
            background: #ccc;
            line-height: 30px;;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <!--12個 col-md-1 -->
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <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>
</body>
</html>

.col-xs-* 移動端適配blog

<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <title>bootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <!--移動適配-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body{padding-top: 50px;}
        [class^="col"]{
            border:1px solid #000;
            height: 30px;
            background: #ccc;
            line-height: 30px;;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-xs-6">col-xs-6</div>
        <div class="col-xs-6">col-xs-6</div>
    </div>
</div>
</body>
</html>

疊加使用：在移動端5:7 ，在PC端8:4get

<div class="container">
    <div class="row">
        <div class="col-xs-5 col-md-8">.col-xs-5 .col-md-8</div>
        <div class="col-xs-7 col-md-4">.col-xs-7 .col-md-4</div>
    </div>
</div>

疊加使用2：在移動端5：7，在平板端4：8，PC端8：4

    <div class="row">
        <div class="col-xs-5 col-sm-4 col-md-8">.col-xs-5 .col-sm-4 .col-md-8</div>
        <div class="col-xs-7 col-sm-8 col-md-4">.col-xs-7 .col-sm-8 .col-md-4</div>
    </div>

三、偏移，原理有多少*，就有多少*倍的margin-left

.col-md-* 對應.col-md-offset-*

.col-xs-* 對應.col-xs-offset-*

.col-sm-* 對應.col-sm-offset-*

.col-lg-* 對應.col-lg-offset-*

<div class="container">
    <div class="row" style="background: #ff0000">
        <div class="col-md-8 col-md-offset-2">col-md-8</div>
        <div class="col-md-2">col-md-2</div>
    </div>
</div>