bootstrap初探

時間 2019-12-12

原文原文鏈接

bootstrap資源
- http://getbootstrap.com
- http://github.com/twbs
- http://www.bootcss.com

bootstrap柵格系統

容器：流體（container-fluid）、固定（container）
分12列，閾值分辨率>=1200,container固定尺寸爲1170px，若閾值在992到1200之間container固定尺寸爲970px，若分辨率在992如下778以上爲750px，778px如下爲自適應，沒有固定的寬度值

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>無標題文檔</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.css">
        <style>
            .container{ border:1px #000 solid;}
        </style>
    </head>
<body>
<!--<div class="container-fluid">
    aaaaaaaaa
</div>
-->
<div class="container">
    aaaaaaaaa
</div>

</body>
    <script src="js/jquery-2.1.3.js"></script>
    <script src="js/bootstrap.js"></script>
</html>

分爲12列，可根據列數肯定，demo以下

 1 <!DOCTYPE HTML>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5         <title>無標題文檔</title>
 6         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7         <meta name="viewport" content="width=device-width, initial-scale=1">
 8         <link rel="stylesheet" href="css/bootstrap.css">
 9         <style>
10             .container{ border:1px #000 solid; background: #CCC;}
11             div[class*=col-] { color: white; border: 1px solid red;}
12         </style>
13     </head>
14 <body>
15 
16 <div class="container">
17     <div class="col-lg-1">col-lg-1</div>
18     <div class="col-lg-11">col-lg-1</div>
19 </div>
20 
21 </body>
22     <script src="js/jquery-2.1.3.js"></script>
23     <script src="js/bootstrap.js"></script>
24 </html>

View Code

不一樣分辨率下，設置col-lg表示超大分辨率，col-md是中等分辨率，col-sm是pad相似大小，col-xs是移動設備，若是設置了col-*那麼會按照相應的分辨率顯示，若是小於相應的分辨率則會變爲幾行，demo以下，可自行運行，以及對應demo圖片

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>無標題文檔</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.css">
        <style>
            .container{ border:1px #000 solid; background: #CCC;}
            div[class*=col-] { color: white; border: 1px solid red;}
        </style>
    </head>
<body>

<!--div class="container">
    <div class="col-lg-1">col-lg-1</div>
    <div class="col-lg-11">col-lg-1</div>
</div-->

<div class="container">
    <div class="row">
        <div class="col-lg-4">col-lg-4</div>
        <div class="col-lg-4">col-lg-4</div>
        <div class="col-lg-4">col-lg-4</div>
    </div>
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
    </div>
    <div class="row">
        <div class="col-sm-4">col-sm-4</div>
        <div class="col-sm-4">col-sm-4</div>
        <div class="col-sm-4">col-sm-4</div>
    </div>
    <div class="row">
        <div class="col-xs-4">col-xs-4</div>
        <div class="col-xs-4">col-xs-4</div>
        <div class="col-xs-4">col-xs-4</div>
    </div>
</div>

</body>
    <script src="js/jquery-2.1.3.js"></script>
    <script src="js/bootstrap.js"></script>
</html>

View Code

組合佈局，可設置多個class，在分辨率爲一個值得時候按照某個class顯示，若是分辨率換成另一個按照另一個class顯示，以下面demo所示，當分辨率大於1200時，按照col-lg顯示四列，若是分辨率小於1200大於992，按照col-md顯示三列

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>無標題文檔</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.css">
        <style>
            .container{ border:1px #000 solid; background: #CCC;}
            div[class*=col-] { color: white; border: 1px solid red;}
        </style>
    </head>
<body>

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-4">col-lg-3 col-md-4</div>
        <div class="col-lg-3 col-md-4">col-lg-3 col-md-4</div>
        <div class="col-lg-3 col-md-4">col-lg-3 col-md-4</div>
        <div class="col-lg-3 col-md-4">col-lg-3 col-md-4</div>
    </div>
</div>

</body>
    <script src="js/jquery-2.1.3.js"></script>
    <script src="js/bootstrap.js"></script>
</html>

View Code

列偏移col-lg-offset-4，向右偏移4個網格距離，demo以下，代碼運行效果以下

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>無標題文檔</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.css">
        <style>
            .container{ border:1px #000 solid; background: #CCC;}
            div[class^=col-] { color: white; border: 1px solid red;}
        </style>
    </head>
<body>

<div class="container">
    <div class="row">
        <div class="col-lg-3">col-lg-3</div>
        <div class="col-lg-3">col-lg-3</div>
        <div class="col-lg-3">col-lg-3</div>
        <div class="col-lg-3">col-lg-3</div>
    </div>
    <div class="row">
        <div class="col-lg-4 col-lg-offset-3">col-lg-4</div>
    </div>
</div>

</body>
    <script src="js/jquery-2.1.3.js"></script>
    <script src="js/bootstrap.js"></script>
</html>

View Code

最多偏移爲12，若大於12則不起任何做用，demo以及代碼運行效果以下

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>無標題文檔</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.css">
        <style>
            .container{ border:1px #000 solid; background: #CCC;}
            div[class^=col-] { color: white; border: 1px solid red;}
        </style>
    </head>
<body>

<div class="container">
    <div class="row">
        <div class="col-lg-3">col-lg-3</div>
        <div class="col-lg-3">col-lg-3</div>
        <div class="col-lg-3">col-lg-3</div>
        <div class="col-lg-3">col-lg-3</div>
    </div>
    <div class="row">
        <div class="col-lg-4 col-lg-offset-13">col-lg-4 col-lg-offset-13</div>
    </div>
</div>

</body>
    <script src="js/jquery-2.1.3.js"></script>
    <script src="js/bootstrap.js"></script>
</html>

View Code

列排序col-lg-push日後（往右）移動若干個，col-lg-pull往前（往左）移動若干個

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>無標題文檔</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.css">
        <style>
            .container{ border:1px #000 solid; background: #CCC;}
            div[class^=col-] { color: white; border: 1px solid red;}
        </style>
    </head>
<body>

<div class="container">
    <div class="row">
        <div class="col-lg-2">col-lg-2</div>
        <div class="col-lg-10">col-lg-10</div>
    </div>
    <div class="row">
        <div class="col-lg-2 col-lg-push-10">col-lg-2</div>
        <div class="col-lg-10 col-lg-pull-2">col-lg-10</div>
    </div>
</div>

</body>
    <script src="js/jquery-2.1.3.js"></script>
    <script src="js/bootstrap.js"></script>
</html>

View Code

1. bootstrap初探2
2. 初探Bootstrap
3. bootstrap初探
4. React+ES6+Less+Bootstrap----webpack初探
5. BootStrap柵格佈局初探
6. 關於Bootstrap的初探索
7. python + django + bootstrap 快速web開發初探
8. 【Bootstrap】1.初識Bootstrap
9. AM335x bootstrap探索
10. bootstrap初試
更多相關文章...
• 探索Redis事務回滾 - Redis教程
• 使用TCP協議檢測防火牆 - TCP/IP教程
• 適用於PHP初學者的學習線路和建議
• Github 簡明教程

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。