bootstrap

2021-12-06 12:34:45 阅读：229 来源： 互联网

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

bootstrap