使用Bootstrap設計響應式頁面


使用Bootstrap也非常簡單,你只需要把下面的鏈接添加到你需要使用Bootstrap來進行布局的應用的頭部:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap /3.3.1/css/bootstrap.min.css"/>



通過Bootstrap使圖片適配手機顯示

 <img class="img-responsive" src="/statics/codecamp/images/running-cat.jpg">

通過Bootstrap使文本居中

<h2 class="red-text text-center">your text</h2>//可以使用空格給標簽定義多個class

通過Bootstrap添加一個按鈕

<button type="submit" class="btn btn-default">Like</button>

//btn-primary  /

 btn-success
 btn-info
btn-warning
btn-danger
 btn-link

添加一個Bootstrap塊級元素按鈕

 btn-block
 text-danger

使用Bootstrap做頁面布局

<div class="row">//標簽設置了row 這個class屬性之后,按鈕便可並列排列了。
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</div>

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM