bootstrap详解（CSS）

来源：互联网发布：ip的数据报文格式编辑：程序博客网时间：2024/06/05 13:30

1、引用

<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">    <script src="jquery-3.2.1.min.js"></script>    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>

2、文档类型

需要是HTML5文档

<!DOCTYPE html>

3、移动设备优先

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

4、布局容器

自己根据视口确定容器框的大小，并将容器框居中，一般框宽=1170px

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

5、栅格系统

容器内一行分成12格，每行div的class=”row”,其中每个元素div占n格，则class=”col-md-n”

holder.js 自动生成一张图暂时占位

    <div class="container">        <h1>你好</h1>        <div class="row"><!--一行十二格，一个图片占4格-->            <div class="col-md-3">                <img src="holder.js/100%x200" alt="">            </div>            <div class="col-md-3">                <img src="holder.js/100%x200" alt="">            </div>            <div class="col-md-3">                <img src="holder.js/100%x200" alt="">            </div>            <div class="col-md-3">                <img src="holder.js/100%x200" alt="">            </div>        </div>        <div class="row"><!--一行十二格，一个图片占4格-->            <div class="col-md-3">                <img src="holder.js/100%x200" alt="">            </div>            <div class="col-md-3">                <img src="holder.js/100%x200" alt="">            </div>            <div class="col-md-3">                <img src="holder.js/100%x200" alt="">            </div>            <div class="col-md-3">                <img src="holder.js/100%x200" alt="">            </div>        </div>        <div class="row"><!--一行十二格，一个图片占4格-->            <div class="col-md-3">                <img src="holder.js/100%x200" alt="">            </div>            <div class="col-md-3">                <img src="holder.js/100%x200" alt="">            </div>            <div class="col-md-3">                <img src="holder.js/100%x200" alt="">            </div>            <div class="col-md-3">                <img src="holder.js/100%x200" alt="">            </div>        </div> </div>

col-lg-n:视口很大（）就开始折行
col-md-n:（建议）
col-sm-n:
col-xs-n:视口很小才开始折行

col-md-offset-n:元素左边空n个格子

若在一行包含的元素含有格子大于12个，则换行

6、排版

标题：.page-header
段落：.lead

表格：
.table:变表格有条纹
.table-bordered:变格子
.table-hover：鼠标放上

单元格样式：
.success :绿色
.active:灰色
.info:青色
.warning：黄色
.danger：红色

<table class="table table-bordered table-hover">            <tr class="warning">                <th>ID</th>                <th>用户名</th>                <th>密码</th>            </tr>            <tr class="active">                <td>111</td>                <td>111</td>                <td>111</td>            </tr>            <tr class="success">                <td>111</td>                <td>111</td>                <td>111</td>            </tr>            <tr class="info">                <td>111</td>                <td>111</td>                <td>111</td>            </tr>            <tr class="danger">                <td>111</td>                <td>111</td>                <td>111</td>            </tr>      </table>

阅读全文

0 0