W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗(yàn)值獎勵
Bootstrap有四種類型的前綴,用于為不同大小的顯示創(chuàng)建列:
當(dāng)我們指定類 col-xs-12
時,它表示元素應(yīng)在額外的小屏幕上跨越所有12個可用的Bootstrap列。
讓我們檢查下面的標(biāo)記:
<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6"> <h4>Column 1</h4> </div> <div class="col-xs-12 col-sm-6"> <h4>Column 2</h4> </div> </div> </div>
在這段代碼中,我們將col-xs-12
類用于超小顯示器和類 col-sm-6
用于較小的顯示器。 因此,超小型顯示器中的每一列將占用所有12個可用的Bootstrap列,這將顯示為列的堆棧。然而在較小的顯示器上,它們每個只占用6個Bootstrap列,實(shí)現(xiàn)兩列布局。
<!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-xs-12 col-sm-6">
<h4>Column 1</h4>
</div>
<div class="col-xs-12 col-sm-6">
<h4>Column 2</h4>
</div>
</div>
</div>
</body>
</html>
你可以調(diào)整瀏覽器窗口的大小以查看動態(tài)更改。
我們可以在布局中的任何列中創(chuàng)建一組新的12個Bootstrap列,以便創(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-6 col1">
<h3>Column 1</h3>
<!-- Nesting Starts -->
<div class="row">
<div class="col-md-6 col3">
<h3>Column 4</h3>
</div>
<div class="col-md-6 col4">
<h3>Column 5</h3>
</div>
</div>
</div>
<div class="col-md-6 col2">
<h3>Column 2</h3>
</div>
</div>
</div>
</body>
</html>
偏移用于增加列的左邊距。
例如,如果你有一個列出現(xiàn)在三個Bootstrap列之間,則可以使用偏移功能。
可用于偏移的類有:
假設(shè)我們要在超小顯示器中向右移動一列三個Bootstrap列,我們可以使用類“col-xs-offset-3”,例如:
<!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="row">
<div class="col-xs-6 col-xs-offset-3 col1">
<h1>Hello!</h1>
</div>
</div>
</body>
</html>
此代碼將產(chǎn)生一個跨越6個Bootstrap列的列,向右偏移三列。
我們可以使用偏移來使列居中。只需將相同數(shù)量的列放置在居中列的兩側(cè)。
<!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="row">
<div class="col-xs-6 col-xs-offset-3">
<h1 style="background:#EEE">Hello!</h1>
</div>
</div>
</body>
</html>
諸如col-xs-pull- *
和 col-xs-push- *
等的類用于將列向左和向右移動一定數(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="row">
<div class="col-xs-9 col-xs-push-3">
<h1>col-xs-push-3</h1>
</div>
<div class="col-xs-3 col-xs-pull-9">
<h1>col-xs-pull-9</h1>
</div>
</div>
</body>
</html>
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: