Bootstrap（一）脚手架

必须使用HTML5文档类型

Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 doctype。因此这一文档类型必须出现在项目的每个页面的开始部分。

使用前需要引入相关css js 以及jquery

<link href="../css/bootstrap.css" rel="stylesheet"/>
<script src="../jquery/jquery.js"></script>
<script src="../js/bootstrap.js"></script>

栅格系统（基本和流动栅格）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/bootstrap.css" rel="stylesheet"/>
    <script src="../jquery/jquery.js"></script>
    <script src="../js/bootstrap.js"></script>
    <style type="text/css">
        .row,[class*="span"]{
            background-color: #eee;
            text-align: center;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            min-height: 40px;
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div>
        <h2>基本栅格</h2>
        <div>
            <div class="row">
               <div class="span1">1个栅格</div>
               <div class="span3">3个栅格</div>
               <div class="span8">8个栅格</div>
               <div class="span12">总共:12个栅格</div>
            </div>
        </div>
        <div>
            <h4>偏移列</h4>
            <div class="row">
                <div class="span1">1个栅格</div>
                <div class="span3">3个栅格</div>
                <div class="span8 offset1">8个栅格</div>
            </div>
        </div>
        <div>
            <h4>嵌套列</h4>
            <div class="row">
                <div class="span10">10个栅格
                    <div class="row">
                        <div class="span4">4个栅格</div>
                        <div class="span6">6个栅格</div>
                    </div>
                </div>
            </div>
        </div>
        <hr/>
        <h2>流式栅格布局</h2>
        <div>
            <div class="row-fluid">
                <div class="span1">1个栅格</div>
                <div class="span3">3个栅格</div>
                <div class="span8">8个栅格</div>
                <div class="span12">总共:12个栅格</div>
            </div>
        </div>
        <div>
            <h4>嵌套列</h4>
            <div class="row-fluid">
                <div class="span6">6个栅格
                    <div class="row">
                        <div class="span4">4个栅格</div>
                        <div class="span8">8个栅格</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

流式布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/bootstrap.css" rel="stylesheet"/>
    <script src="../jquery/jquery.js"></script>
    <script src="../js/bootstrap.js"></script>
    <style type="text/css">
        .row,[class*="span"]{
            background-color: #eee;
            text-align: center;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            min-height: 40px;
            line-height: 40px;
        }
        .container-fluid [class*="span"]{
            height: 500px;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <h2>流式布局</h2>
            <div class="container-fluid" style="height: 500px;">
                <div class="row-fluid">
                    <div class="span3">span3</div>
                    <div class="span9">span9</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

响应式设计

启用响应式特性

通过在文档中的 <head> 标签里添加合适的meta标签并引入一个额外的样式表即可启用响应式CSS。如果你已经在定制页面编译好一个Bootstrap, 那么只需添加一个meta标签。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Bootstrap（一）脚手架

必须使用HTML5文档类型

栅格系统（基本和流动栅格）

流式布局

响应式设计

启用响应式特性

猜你喜欢