Bootstrap css3
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap css3
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
bootstrap的按鈕
1.各種按鈕樣式的實例:
1 <body> 2 <!--基本樣式的按鈕--> 3 <button type="button" class="btn">基本樣式按鈕</button> 4 <!--默認樣式的按鈕--> 5 <button type="button" class="btn btn-default">默認樣式的按鈕</button> 6 <!--原始樣式的按鈕--> 7 <button type="button" class="btn btn-primary">原始樣式的按鈕</button> 8 <!--看起來像連接的按鈕--> 9 <button type="button" class="btn btn-link">看起來像鏈接的按鈕</button> 10 <!--大的按鈕--> 11 <button type="button" class="btn btn-lg">大的按鈕</button> 12 <!--塊的按鈕--> 13 <button type="button" class="btn btn-block">塊的按鈕</button> 14 <!--被點擊后的按鈕--> 15 <button type="button" class="btn btn-default avtive">被點擊后的按鈕的按鈕</button> 16 </body>不建議在input下使用,不免跨瀏覽器的問題,盡量在button下使用。
?
bootstrap的圖片
Bootstrap提供了三個用來簡單修飾圖片的方式。
?
?
輔助類
文本輔助類:
1 <!--設置文本的輔助類--> 2 <!--還有很多文本輔助類這里就不一一列舉--> 3 <p class="text-muted">這是一段話</p> 4 <a href="#" class="text-muted">這是一段話</a>背景輔助類:
1 <!--設置背景的輔助類--> 2 <!--還有很多背景輔助類這里就不一一列舉--> 3 <p class="bg-info">這是一段話</p> 4 <a href="#" class="bg-info">這是一段話</a>其他輔助類:
1 <!--設置其他的輔助類--> 2 <!--還有很多其他輔助類這里就不一一列舉--> 3 <p class="pull-left">這是一段話</p> 4 <p class="pull-right">這是一段話</p> 5 <p class="center-block">這是一段話</p> 6 <p class="show">這是一段話</p> 7 <p class="close">這是一段話</p>?
響應式工具
響應式工具目前只適合塊和表的切換。
轉載于:https://www.cnblogs.com/comefuture/p/6797736.html
總結
以上是生活随笔為你收集整理的Bootstrap css3的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: ROS机器人程序设计(原书第2版)3.9
- 下一篇: poj 2186 强连通分量