BootStrap-CSS樣式_佈局元件_Well
阿新 • • 發佈:2019-01-01
Well
1.Well是一種會引起內容凹陷顯示或插圖效果的容器 <div>
2.建立 Well,只需要簡單地把內 容放在帶有 class .well 的 <div> 中即可
尺寸大小
使用可選類 well-lg 或 well-sm 來改變 Well 的尺寸大小。這兩個類是與 .well 類結合使用 的。這兩個類會影響內邊距(padding),根據使用的類,Well 會顯示得更大或者更小
程式碼例項:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Well</title> <!-- Bootstrap --> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <body style="padding:50px;"> <!-- .well-lg:大Well .well-md:小Well --> <h4>.well-lg:預設</h4> <div class="well">您好,我是BootStrip 預設Well!</div> <h4>.well-lg:大Well,預設</h4> <div class="well well-lg">您好,我是BootStrip 大Well!</div> <h4>.well-md:小Well</h4> <div class="well well-sm">您好,我是BootStrip 小Well!</div> <script src="../js/jquery-1.11.1.min.js"></script> <script src="../js/bootstrap.min.js"></script> </body> </html>
顯示效果: