免費(fèi)AI編程助手
Bootstrap 動(dòng)態(tài)布局
讓我們看看如何把網(wǎng)格系統(tǒng)付諸實(shí)踐，創(chuàng)造一個(gè)動(dòng)態(tài)布局，可根據(jù)要查看的設(shè)備的大小進(jìn)行調(diào)整。
臺(tái)式機(jī)的設(shè)計(jì)
下面的代碼顯示了如何使用 col-md-12 中等大小的列來為臺(tái)式機(jī)設(shè)計(jì)。
<!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個(gè)Bootstrap列。如果我們?cè)噲D超過這一點(diǎn)，其余的列將被調(diào)整進(jìn)入下一行。這個(gè)新行將再次具有12個(gè)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è)計(jì)
接下來我們將修改我們的代碼來實(shí)現(xiàn)平板電腦的布局。
平板電腦可以以兩種格式查看：縱向和橫向。
平板電腦的橫向視圖被視為中等大小的顯示（屏幕寬度>= 992px），我們使用col-md-*類來處理。
我們現(xiàn)在剩下的是縱向視圖，這是一個(gè)小尺寸的顯示。這可以使用 col-sm-* 類來實(shí)現(xiàn)。
由于我們必須在較小的顯示器中實(shí)現(xiàn)兩列布局，我們必須強(qiáng)制每列跨越6個(gè)Bootstrap列。這樣我們?cè)诿恳恍兄兄坏玫絻闪校?*6個(gè)Bootstrap列= 12個(gè)Bootstrap列）。因此，一旦所有的12個(gè)Bootstrap列被占用，其余列將出現(xiàn)在下一行中，用于每次創(chuàng)建新的行時(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 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)整瀏覽器窗口大小以查看更改。
手機(jī)的設(shè)計(jì)
像平板電腦一樣，手機(jī)也可以在橫向和縱向模式下查看。移動(dòng)設(shè)備中的橫向視圖使用col-sm-* 類的小尺寸顯示（屏幕寬度> = 768px）。
移動(dòng)設(shè)備中的縱向視圖采用超小尺寸顯示（屏幕寬度<768px）。
對(duì)于超小屏幕，我們必須使用col-xs 前綴的類。在這里，我們希望每個(gè)日志帖子列占用所有的12個(gè)Bootstrap列，以便我們有每行只有一個(gè)日志帖子。
我們的類將是 col-xs-12 ，所以讓我們繼續(xù)將這個(gè)類添加到我們的代碼：
<!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>
更多建議：