閱讀(11.6k) 書簽贊(3) 我要糾錯

Bootstrap 動態(tài)布局

2018-03-03 16:33 更新

讓我們看看如何把網(wǎng)格系統(tǒng)付諸實踐，創(chuàng)造一個動態(tài)布局，可根據(jù)要查看的設(shè)備的大小進行調(diào)整。

臺式機的設(shè)計

下面的代碼顯示了如何使用 col-md-12 中等大小的列來為臺式機設(shè)計。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

</head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <h1>My  First  Bootstrap Blog</h1>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-4">
                <h3>Post Title  1</h3>
                <p>Lorem ipsum  dolor  sit amet,  consectetur adipisicing aliqua. </p>
            </div>
            <div class="col-md-4">
                <h3>Post Title  2</h3>
                <p>Lorem ipsum  dolor  sit amet,  consectetur adipisicing
                elit,  sed do eiusmod tempor  incididunt ut labore  et dolore  magna
                aliqua. </p>
            </div>
            <div class="col-md-4">
                <h3>Post Title  3</h3>
                <p>Lorem ipsum  dolor  sit amet,  consectetur adipisicing
                elit,  sed do eiusmod tempor  incididunt ut labore  et dolore  magna
                aliqua. </p>
            </div>
        </div>
    </div>
  </body>
</html>

更多內(nèi)容

接下來，我們將直接將列添加到之前代碼中列的現(xiàn)有行。

Bootstrap在一行中只允許12個Bootstrap列。如果我們試圖超過這一點，其余的列將被調(diào)整進入下一行。這個新行將再次具有12個Bootstrap列的容量。這樣我們可以將所有日志帖子列綁定到一行。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

</head>
  <body>
<div class="container">
    <div class="row">
        <div class="col-md-12 text-center">
            <h1>My  First  Bootstrap Blog</h1>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-4">
            <h3>Post Title  1</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4">
            <h3>Post Title  2</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4">
            <h3>Post Title  3</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4">
            <h3>Post Title  4</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4">
            <h3>Post Title  5</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4">
            <h3>Post Title  6</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
    </div>
</div>
  </body>
</html>

平板電腦的設(shè)計

接下來我們將修改我們的代碼來實現(xiàn)平板電腦的布局。

平板電腦可以以兩種格式查看：縱向和橫向。

平板電腦的橫向視圖被視為中等大小的顯示（屏幕寬度>= 992px），我們使用col-md-*類來處理。

我們現(xiàn)在剩下的是縱向視圖，這是一個小尺寸的顯示。這可以使用 col-sm-* 類來實現(xiàn)。

由于我們必須在較小的顯示器中實現(xiàn)兩列布局，我們必須強制每列跨越6個Bootstrap列。這樣我們在每一行中只得到兩列（2*6個Bootstrap列= 12個Bootstrap列）。因此，一旦所有的12個Bootstrap列被占用，其余列將出現(xiàn)在下一行中，用于每次創(chuàng)建新的行時。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

</head>
  <body>
<div class="container">
    <div class="row">
        <div class="col-md-12 text-center">
            <h1>My  First  Bootstrap Blog</h1>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-4 col-sm-6">
            <h3>Post Title  1</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6">
            <h3>Post Title  2</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6">
            <h3>Post Title  3</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6">
            <h3>Post Title  4</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6">
            <h3>Post Title  5</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6">
            <h3>Post Title  6</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
    </div>
</div>

  </body>
</html>

調(diào)整瀏覽器窗口大小以查看更改。

手機的設(shè)計

像平板電腦一樣，手機也可以在橫向和縱向模式下查看。移動設(shè)備中的橫向視圖使用col-sm-* 類的小尺寸顯示（屏幕寬度> = 768px）。

移動設(shè)備中的縱向視圖采用超小尺寸顯示（屏幕寬度<768px）。

對于超小屏幕，我們必須使用col-xs 前綴的類。在這里，我們希望每個日志帖子列占用所有的12個Bootstrap列，以便我們有每行只有一個日志帖子。

我們的類將是 col-xs-12 ，所以讓我們繼續(xù)將這個類添加到我們的代碼：

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body>
<div class="container">
    <div class="row">
        <div class="col-md-12 text-center">
            <h1>My  First  Bootstrap Blog</h1>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-4 col-sm-6 col-xs-12">
            <h3>Post Title  1</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <h3>Post Title  2</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <h3>Post Title  3</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <h3>Post Title  4</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <h3>Post Title  5</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <h3>Post Title  6</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
    </div>
</div>
  </body>
</html>

以上內(nèi)容是否對您有幫助：

在文檔使用的過程中是否遇到以下問題：