Bootstrap

布局容器

<div class="container "></div>  左右有固定留白
<div class="container-fluid "></div>  全屏展示

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <style>
        .c1 {
            background-color: red;
            height: 50px;
            border: 3px solid black;
        }
        @media screen and(max-width: 600px){
            .c1{
                background-color: green;
                height: 50px;
                border: 3px solid black;
            }
        }

    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-xs-6 c1"></div>
        <div class="col-md-6 col-xs-6 c1"></div>
        <br>
        <div class="col-md-3 c1"></div>
        <div class="col-md-9 c1"></div>
        <br>
        <div class="col-md-1 c1">
            <div class="row">
                <div class="col-md-6 c1"></div>
                <div class="col-md-6 c1"></div>
            </div>
        </div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>

    </div>
    <div class="row">
        <div class="col-md-9 c1"></div>
    </div>
</div>


</body>
</html>
布局容器示例

 

栅格系统

　　一个row表示一行（这一行默认分成了12份，每一份你还可以人为的自定义分成12份）

<div class="container">  //左右两边留有空白
    <div class="row">  //一行
        <div class="col-md-6 "></div> // 控制你占当前行的多少列
    </div>
</div>

列偏移

<div class="col-md-offset-3"></div>

浮动

pull-left
pull-right

表格

 <table class="table table-hover table-bordered table-striped"></table>

按钮

<button class="btn btn-success">button</button>  //绿色
<button class="btn btn-info">button</button>  
<button class="btn btn-warning">button</button>
<button class="btn btn-danger">button</button>
<button class="btn btn-primary">button</button>

将a标签设置成按钮模式

<a href="http://www.xiaohuar.com" class="btn btn-primary">Link</a>
btn-block 占父标签100%

　　　　　　　　　　　　　　要不要试着去访问一下官方呢？https://v3.bootcss.com/

 

posted @ 2019-06-05 21:46  mcc61  阅读(162)  评论(0)    收藏  举报