1、Make Images Mobile Responsive

用處： ? 使圖片適配你的頁面寬度。

操作： ? 給圖片添加 .img-responsive class屬性。

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

2、Center Text with Bootstrap

用處： ? 使文本居中。

操作： ? 給文本添加 center-text class屬性。

<p class="text-center">Hi, I'm Yamei.</p>

補充：? .text-right、.text-left、.text-primary（文本內容帶有個primary class）、.text-success、.text-muted（減弱）、.text-info、.text-warning、.text-danger

3、Create a Bootstrap Button

用處： ? 創建一個Bootstrap自己button風格的按鈕。

操作： ? 給文本添加 btn class屬性。

<button class="btn">Like</button>

?效果如下：

4、Create a Block Element Bootstrap Button

用處： ?塊級按鈕(拉伸至父元素100%的寬度)。 創建一個塊級的按鈕，按鈕將會伸展并填滿頁面，任何在塊之后的元素將會自動浮動到下一行（換行）。

原理如下圖（圖片來自fcc）：

操作： ? 保留 .btn class屬性，加入.btn-block。

<button class="btn btn-block">Like</button>

效果如下：

5、Taste the Bootstrap Button Color Rainbow

用處：? 添加一個class為.btn-primary的原始(藍色)按鈕。

操作： ? 保留 .btn .btn-block class屬性，加入.btn-primary。

<button class="btn btn-block btn-primary">Like</button>

效果如下：

補充： .btn-danger、.btn-warning（謹慎操作的按鈕）、.btn-info(用于要彈出信息的按鈕)、.btn-default、.btn-link（讓按鈕看起來像個鏈接，但仍然保持按鈕的行為）、.btn-success

????????? .btn-lg、.btn-sm、.btn-xs，分別為大、小、超小

????????? .disabled 禁用按鈕

????????? .active 呈現按鈕被點擊的樣子

???????

???????????????????????? (.active的效果圖)

?

?*以上是我個人在FCC學習中的整理的筆記，小白一枚，如有錯誤歡迎大家留言指出~

總結

以上是生活随笔為你收集整理的Bootstrap学习笔记01的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。