bootstrap

时间：2019-10-08 16:49:48 阅读：72 评论：0 收藏：0 [点我收藏+]

1.基本模板

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 基本模板</title>
    <link href="../bootrap/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
      <script src="../bootrap/html5/html5.min.js"></script>
      <script src="../bootrap/respond/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <script src="../bootrap/jquery/jquery.min.js"></script>
    <script src="../bootrap/js/bootstrap.min.js"></script>
  </body>
</html>

2.布局容器

（1）container 类用于固定宽度并支持响应式布局的容器。

.container{
        height: 100px;
        background-color: red;
    }

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

（2）.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

.container-fluid{
        height: 100px;
        background-color: lime;
    }
<div class="container-fluid"></div>

3.栅格系统

（1）.row和.col-xs-4 预定义的类

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中

    .container{
        height: 100px;
        background-color: red;
    }
    .row{
        height: 50px;
        background-color: lime;
    }
    [class^="col-"]{
        padding: 10px;
    }
     [class^="col-"]:nth-child(odd){
        background-color: blue;
        height: 50px;
    }
    [class^="col-"]:nth-child(even){
        background-color: yellow;
        height: 50px;
    }
<div class="container">
          <div class="row">
          <div class="col-xs-3">1</div>
          <div class="col-xs-3">2</div>
          <div class="col-xs-3">3</div>
          <div class="col-xs-3">4</div>
          </div>
      </div>

（2）

.col-xs- :超小屏（<768px）; 适合所有屏幕

    <div class="container">
        <div class="row">
            <div class="col-xs-3">1</div>
            <div class="col-xs-3">2</div>
            <div class="col-xs-3">3</div>
            <div class="col-xs-3">4</div>
        </div>
    </div>

.col-sm-:小屏幕平板（>=768px）适合小屏中屏大屏

    <div class="container">
        <div class="row">
            <div class="col-sm-6">1</div>
            <div class="col-sm-6">2</div>
        </div>
    </div>

.col-md-:中等屏幕（>=992px）适配中屏和大屏

    <div class="container">
        <div class="row">
            <div class="col-md-6">1</div>
            <div class="col-md-6">2</div>
        </div>
    </div>

.col-lg-:大屏幕（>=1200px）只能适配大屏幕

    <div class="container">
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-6">2</div>
        </div>
    </div>

bootstrap

原文：https://www.cnblogs.com/zhaodz/p/11635937.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)