bootstrap

2021-12-06 12:34:45 作者：互联网

https://www.bootcss.com/

css框架

栅格布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
     .col-xs-6{
         /* height: 300px; */
     }
     .col-xs-6:first-child{
         background-color: red;
     }
     .col-xs-6:last-child{
         background-color: green;
     }
     .row div{
         border: 1px black solid;
     }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-md-3"></div>
            <div class="col-xs-6 col-md-3" ></div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
      </div>
      
      <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
      <div class="row">
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
      </div>
      
      <!-- Columns are always 50% wide, on mobile and desktop -->
      <div class="row">
        <div class="col-xs-6">.col-xs-6</div>
        <div class="col-xs-6">.col-xs-6</div>
      </div>.col-md-6</div>
      </div>
      <!-- ===============重置列========================= -->
      <div class="row">
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3 Resize your viewport or check it out on your phone for an example.</div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
      
        <!-- Add the extra clearfix for only the required viewport -->
        <div class="clearfix visible-xs-block"></div>
      
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
      </div>
       
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script>

    </script>
</body>
</html>

效果：

（大屏）

（小屏）

列偏移： (offset 不允许插入)

嵌套列：

列排序： push（允许插入） pull（允许插入）

字体：

对齐：

i 斜体 b加粗 s中线 u下划

表格：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
     <h1 class="text-danger">h1</h1>               
     <!-- 字体颜色 text-danger          字体背景bg-danger-->
     <h1 class="bg-danger">h1</h1>
     <a href="#" class="btn btn-danger">按钮</a>
    <!-- ============================================= -->
    <table class="table table-bordered table-striped table-hover">
        <thead>
            <tr>
                <th>列1</td>
                <th>列1</td>
                <th>列1</td>
            </tr>
        </thead>
        <tbody>
            <tr class="danger">
                <td>列1</td>
                <td>列1</td>
                <td>列1</td>
            </tr>
            <tr>
                <td>列1</td>
                <td>列1</td>
                <td>列1</td>
            </tr>
            <tr>
                <td>列1</td>
                <td>列1</td>
                <td>列1</td>
            </tr>
        </tbody>
    </table>
</body>
<html>

快捷：

标签：md,color,bootstrap,插入,sm,xs,col
来源： https://www.cnblogs.com/lin629/p/15649370.html