Bootstrap
練習對象：www.apple.com.tw
網頁看起來像是切成了三個區塊。
區塊1與區塊2的部份是container-fluid
區塊3的部份是container
接著，要確認在行動裝置的時候排版怎麼變的。
區塊1跟區塊3的部份在寬1000的時候不會動，所以他一直都是col-xs-12的滿版。
區塊2的部份排版變為2個，所以是col-md-6，col-lg-3
區塊2的部份排版變為2個，所以是col-md-6，col-lg-3
區塊2與區塊3的部份在寬調至600之後變為一列，所以是col-xs-12
所以掛起來的版本就是下面樣式
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="https://placehold.it/1920x300" class="img-responsive" alt="">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-3">
<img src="https://placehold.it/1920x300" class="img-responsive" alt="">
</div>
<div class="col-xs-12 col-md-6 col-lg-3">
<img src="https://placehold.it/1920x300" class="img-responsive" alt="">
</div>
<div class="col-xs-12 col-md-6 col-lg-3">
<img src="https://placehold.it/1920x300" class="img-responsive" alt="">
</div>
<div class="col-xs-12 col-md-6 col-lg-3">
<img src="https://placehold.it/1920x300" class="img-responsive" alt="">
</div>
</div>
<div class="row">
<div class="container">
<div class="col-xs-12">
<img src="https://placehold.it/1920x300" class="img-responsive" alt="">
</div>
</div>
</div>
</div>
</body>
再透過開發工具確認自適應的部份狀況
lg
md
xs
接著處理區塊3的部份，區塊3的部份可以再分成四個區塊
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="https://placehold.it/1920x300" class="img-responsive" alt="">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-3">
<img src="https://placehold.it/1920x300" class="img-responsive" alt="">
</div>
<div class="col-xs-12 col-md-6 col-lg-3">
<img src="https://placehold.it/1920x300" class="img-responsive" alt="">
</div>
<div class="col-xs-12 col-md-6 col-lg-3">
<img src="https://placehold.it/1920x300" class="img-responsive" alt="">
</div>
<div class="col-xs-12 col-md-6 col-lg-3">
<img src="https://placehold.it/1920x300" class="img-responsive" alt="">
</div>
</div>
<div class="row">
<div class="container">
<div class="col-xs-12">
12345
</div>
<div class="row">
<div class="col-xs-12 col-sm-3">row1</div>
<div class="col-xs-12 col-sm-3">row2</div>
<div class="col-xs-12 col-sm-3">row3</div>
<div class="col-xs-12 col-sm-3">row4</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">Nrow1</div>
<div class="col-xs-12 col-sm-4">Nrow2</div>
<div class="col-xs-12 col-sm-4">Nrow3</div>
</div>
</div>
</div>
</div>
</body>
沒有留言:
張貼留言