bootstrap　柵格系統

時間  2019-12-07
標籤 bootstrap 柵格 系統 欄目 Bootstarp 简体版
原文   原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- 768 992 1200
    小於768.col-xs-
    大於768　.col-sm-
    大於992 .col-md-
    大於1200　.col-lg- -->
    <style type="text/css">
    .row{
        margin-bottom: 20px;css

    }
    .row .row{
        margin-top: 10px;
        margin-bottom: 0;
    }
    [class*='col-']{
        padding-top: 15px;
        padding-bottom: 15px;
        background-color: #eee;
        background-color: rgba(86,61,124,0.5);
        border: 1px solid #ddd;
        border: 1px solid rgba(86,61,124,.2);
    }html

    </style>
<body>
    <div class="container"><!--class必須爲container-->
        <div class="row">
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
        bootstrap

        </div>
        <div class="row">
            <div class="col-md-3">col-md-3</div>　　<!--1個div佔三個格子，能夠放4個div-->
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-3">col-md-3</div>
        htm


        </div>
        <div class="row">
        <!--若是內容超出，超出部分會另起一行，不會影響原來的寬度-->
            <div class="col-md-3">col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3</div>
        
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-3">col-md-3</div>
        it


        </div>
        <div class="row">
        <!--格子能夠嵌套-->class

            <div class="col-md-4 col-md-offset-1">col-md-4</div>meta

        </div>
        <div class="row">
            <div class="col-sm-9">
                one
                <div class="row">
                    <div class="col-xs-8">
                        first
                    </div>
                    <div class="col-xs-4">
                        two
                    </div>margin

                </div>top

            </div>di

        </div>
        <div class="row">
            <div class="col-md-9 col-md-push-3">col-md-9</div>
            <div class="col-md-3 col-md-pull-9">col-md-3</div>
            <!--可讓3位於9的左邊-->

        </div>

    </div> </body> </html>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程