IDEA中导入Bootstrap框架及入门教程
生活随笔
收集整理的這篇文章主要介紹了
IDEA中导入Bootstrap框架及入门教程
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
BootStrap簡介
概念: 一個前端開發的框架.Bootstrap是美國Twitter公司的設計師Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 開發的簡潔、直觀、強悍的前端開發框架，使得 Web 開發更加快捷。
好處:
定義了很多css樣式和js插件。開發人員可以直接使用這些樣式和插件得到豐富的頁面效果。
響應式布局
*同一套頁面可以兼容不同分辨率的設備
Bootstrap快速入門
官方網站：https://www.bootcss.com/
1. 下載Bootstrap
提取碼：boo7
得到壓縮包，解壓后得到如圖三個文件夾
2. 在項目中將解壓后的三個文件夾（css，fonts，js)復制
3. 創建html文檔，引入必要的資源
由于bootstrap依賴jquery 因此需要去官網下載jquery.min.js的jar包
下載方式:
https://jquery.com/ 官網地址，點擊download，其中compressed為壓縮版本，uncompressed為未壓縮版本，找到自己要的版本下載即可。
提取碼：boo7
響應式布局
柵格系統原理
柵格系統用于通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中。下面就介紹一下 Bootstrap 柵格系統的工作原理：1.“行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。2.通過“行（row）”在水平方向創建一組“列（column）”。3.你的內容應當放置于“列（column）”內，并且，只有“列（column）”可以作為行（row）”的直接子元素。4.類似 .row 和 .col-xs-4 這種預定義的類，可以用來快速創建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來創建語義化的布局。5.通過為“列（column）”設置 padding 屬性，從而創建列與列之間的間隔（gutter）。通過為 .row 元素設置負值 margin 從而抵消掉為 .container 元素設置的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。6.負值的 margin就是下面的示例為什么是向外突出的原因。在柵格列中的內容排成一行。7.柵格系統中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個等寬的列可以使用三個 .col-xs-4 來創建。8.如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列。9.柵格類適用于與屏幕寬度大于或等于分界點大小的設備 ， 并且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何 .col-md-* 柵格類適用于與屏幕寬度大于或等于分界點大小的設備 ， 并且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何 .col-lg-* 不存在， 也影響大屏幕設備。- 同一套頁面可以兼容不同分辨率的設備。
- 實現：依賴于柵格系統：江一行平均分成12個格子，可以指定元素占幾個格子
- 步驟：
- 定義容器。相當于table
- 容器分類：
- container:固定寬度 (兩邊會留白)
- container-fluid：100% 寬度
- 容器分類：
- 定義行：相當于tr 樣式：row
- 定義元素。指定該元素在不同的設備上所占的格子數目。 樣式： col-設備代號 - 格子數目
- 設備代號
- .col-xs-：超小屏幕 手機 (<768px) col-xs-12
- .col-sm-：小屏幕 平板 (≥768px)
- .col-md-：中等屏幕 桌面顯示器 (≥992px)
- .col-lg-：大屏幕 大桌面顯示器 (≥1200px)
- 設備代號
- 定義容器。相當于table
創建Bootstrap_柵格系統.html文件
<!doctype html> <html lang="zh-CN"> <head><!--三個meta標簽 固定的寫法--><meta charset="utf-8"> <!--編碼--><meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--IE的支持--><meta name="viewport" content="width=device-width, initial-scale=1"> <!--視圖窗口--設備寬度--縮放比例(1:1)--><!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --><title>Bootstrap HelloWorld</title><!-- Bootstrap --><!--使用本地下載好的bootstrap.min.css文件--><link rel="stylesheet" href="css/bootstrap.min.css"><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) --><!--使用本地已下載好的jquery-3.6.0.min.js文件--><script src="js/jquery-3.6.0.min.js" ></script><!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 --><!--使用本地下載好的bootstrap.min.js文件--><script src="js/bootstrap.min.js" ></script><style>.inner{border: 1px solid red;}</style> </head> <body><!--1.定義容器--><div class="container-fluid"><!--2.定義行--><div class="row"><!--3.定義元素 在大顯示器上一行12個格子 在pad上一行6個格子--><div class="col-lg-1 col-sm-2 inner">柵格</div><div class="col-lg-1 col-sm-2 inner">柵格</div><div class="col-lg-1 col-sm-2 inner">柵格</div><div class="col-lg-1 col-sm-2 inner">柵格</div><div class="col-lg-1 col-sm-2 inner">柵格</div><div class="col-lg-1 col-sm-2 inner">柵格</div><div class="col-lg-1 col-sm-2 inner">柵格</div><div class="col-lg-1 col-sm-2 inner">柵格</div><div class="col-lg-1 col-sm-2 inner">柵格</div><div class="col-lg-1 col-sm-2 inner">柵格</div><div class="col-lg-1 col-sm-2 inner">柵格</div><div class="col-lg-1 col-sm-2 inner">柵格</div></div></div> </body> </html>大屏幕顯示效果
pad屏幕顯示效果
CSS樣式和js插件
全局CSS樣式
按鈕：class=“btn btn-default”
圖片
- class="img-responsive" ：響應式圖片，在任意尺寸都占100% <!--圖片形狀：--><img src="..." alt="..." class="img-rounded"> <!--圖片方的--><img src="..." alt="..." class="img-circle"><!--圖片圓的--><img src="..." alt="..." class="img-thumbnail"><!--圖片相框形式-->
表格
-
為任意 <table> 標簽添加 .table 類可以為其賦予基本的樣式 — 少量的內補（padding）和水平方向的分隔線。
-
將任何 .table 元素包裹在 .table-responsive 元素內，即可創建響應式表格，其會在小屏幕設備上（小于768px）水平滾動。當屏幕大于 768px 寬度時，水平滾動條消失。
-
通過 .table-striped 類可以給 <tbody> 之內的每一行增加斑馬條紋樣式。
-
添加 .table-bordered 類為表格和其中的每個單元格增加邊框。
-
通過添加 .table-hover 類可以讓 <tbody> 中的每一行對鼠標懸停狀態作出響應。
-
通過添加 .table-condensed 類可以讓表格更加緊湊，單元格中的內補（padding）均會減半。
-
通過這些狀態類可以為行或單元格設置顏色。
-
Class描述 .active 鼠標懸停在行或單元格上時所設置的顏色 .success 標識成功或積極的動作 .info 標識普通的提示信息或動作 .warning 標識警告或需要用戶注意 .danger 標識危險或潛在的帶來負面影響的動作
-
表單
- 基本實例
單獨的表單控件會被自動賦予一些全局樣式。所有設置了 .form-control 類的 <input>、<textarea> 和 <select> 元素都將被默認設置寬度屬性為 width: 100%;。 將 label 元素和前面提到的控件包裹在 .form-group 中可以獲得最好的排列。
- 內聯表單
為 <form> 元素添加 .form-inline 類可使其內容左對齊并且表現為 inline-block 級別的控件。只適用于視口（viewport）至少在 768px 寬度時（視口寬度再小的話就會使表單折疊）。
- 水平排列的表單
通過為表單添加 .form-horizontal 類，并聯合使用 Bootstrap 預置的柵格類，可以將 label 標簽和控件組水平并排布局。這樣做將改變 .form-group 的行為，使其表現為柵格系統中的行（row），因此就無需再額外添加 .row 了。
<!--表格模板--><table class="table table-bordered table-hover"> <!--table:默認表格模板 table-bordered 邊線 -hover 鼠標懸停--><tr><th>姓名</th><th>學號</th><th>年齡</th></tr><tr><td>王宇</td><td>2020001</td><td>23</td></tr><tr><td>王宇1</td><td>2020002</td><td>25</td></tr><tr><td>王宇2</td><td>2020003</td><td>22</td></tr></table><hr><!--表單模板--><form><div class="form-group"><label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div><div class="form-group"><label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"></div><div class="form-group"><label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile"><p class="help-block">Example block-level help text here.</p></div><div class="checkbox"><label><input type="checkbox"> Check me out</label></div><button type="submit" class="btn btn-default">Submit</button></form>導航條
-
默認樣式的導航條
navbar-defaul :白色底
-
反色的導航條
通過添加 .navbar-inverse 類可以改變導航條的外觀。黑色底
<!--navbar-default:默認導航條白色 .navbar-inverse : 黑色的導航條--> <nav class="navbar navbar-inverse"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><!--定義漢堡按鈕--><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">首頁</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li><li><a href="#">Link</a></li><!--下拉列表dropdown--><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><!--搜索框Search--><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --> </nav>分頁
- 禁用和激活狀態
鏈接在不同情況下可以定制。你可以給不能點擊的鏈接添加 .disabled 類、給當前頁添加 .active 類。
<nav aria-label="Page navigation"><ul class="pagination"><!--.disabled : 禁用狀態 .active : 激活狀態--><li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li><li class="active"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li></ul> </nav>JS插件 – Carousel 輪播圖
- 在Bootstrap官網中的js插件中 Carousel : 旋轉木馬
總結
以上是生活随笔為你收集整理的IDEA中导入Bootstrap框架及入门教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： wan状态dns服务器,路由器的wan口
- 下一篇： 唯众云课堂