bootstrap

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>

（3）列的偏移 col-**-offset-n 整体向右偏移n

<div class="container">
        <div class="row">
            <div class="col-xs-6 col-xs-offset-3"></div>
        </div>
    </div>

（4）列的偏移 col-*-push-n 单个向右偏移n个偏移的是当前元素，不影响其他的元素

<div class="container">
        <div class="row">
            <div class="col-xs-5  col-xs-push-4"></div>
            <div class="col-xs-3 "></div>
        </div>
    </div>

（5）列的偏移 col-*-pull-n 单个向左偏移n个偏移的是当前元素，不影响其他的元素

    <div class="container">
        <div class="row">
            <div class="col-xs-6   "></div>
            <div class="col-xs-2 col-xs-pull-4"></div>
        </div>
    </div>

（6）列的嵌套

<div class="container">
        <div class="row">
            <div class="col-xs-6">
                <div class="col-xs-4"></div>
                <div class="col-xs-4"></div>
                <div class="col-xs-4"></div>
            </div>
        </div>
</div>

（7）响应式栅格

<div class="container">
        <div class="row">
            <div class="col-xs-1 col-sm-3 col-md-5 col-lg-4"></div>
            <div class="col-xs-10 col-sm-6 col-md-2 col-lg-4"></div>
            <div class="col-xs-1 col-sm-3 col-md-5 col-lg-4"></div>
        </div>
</div>

4.全局样式

（1）对齐方式

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

（2）表格

在table标签加类名table 加table-striped 为条纹状表格 table-bordered 类为表格和其中的每个单元格增加边框

<div class="container">
        <table class="table table-striped table-bordered">
            <tr>
                <td>呵呵</td>
                <td>呵呵</td>
                <td>呵呵</td>
                <td>呵呵</td>
            </tr>
            <tr>
                <td>呵呵</td>
                <td>呵呵</td>
                <td>呵呵</td>
                <td>呵呵</td>
            </tr>
            <tr>
                <td>呵呵</td>
                <td>呵呵</td>
                <td>呵呵</td>
                <td>呵呵</td>
            </tr>
        </table>
    </div>

（3）表单

.form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;

label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

<form>
                <div class="form-group">
                  <label for="exampleInputEmail1">Email address</label>
                  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">Password</label>
                  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>
                <div class="form-group">
                  <label for="exampleInputFile">File input</label>
                  <input type="file" id="exampleInputFile">
                  <p class="help-block">Example block-level help text here.</p>
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox"> Check me out
                  </label>
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
              </form>

（4）浮动

    <div class="container ">
        <div class="box clearfix">
            <div class="pull-left">左浮动</div>
            <div class="pull-right">右浮动</div>
        </div>
        <div>哈哈</div>
    </div>

（5）响应式隐藏或显示

.hidden-xs

.hidden-sm

.hidden-md

.hidden-lg

<div class="container ">
        <div id="box" class="col-xs-4 col-xs-offset-4 hidden-xs"></div>
 </div>

posted on 2019-10-08 16:03 宅到深夜阅读(142) 评论(0) 收藏举报

刷新页面返回顶部

公告