當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

IDEA中导入Bootstrap框架及入门教程

發布時間：2023/12/20 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 IDEA中导入Bootstrap框架及入门教程小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

BootStrap簡介

概念: 一個前端開發的框架.Bootstrap是美國Twitter公司的設計師Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 開發的簡潔、直觀、強悍的前端開發框架，使得 Web 開發更加快捷。

好處:

定義了很多css樣式和js插件。開發人員可以直接使用這些樣式和插件得到豐富的頁面效果。

響應式布局

*同一套頁面可以兼容不同分辨率的設備

Bootstrap快速入門

官方網站：https://www.bootcss.com/

1. 下載Bootstrap

官網下載或網盤中下載鏈接：https://pan.baidu.com/s/1vWGrYLGltn6-dXmk0iPfsA
提取碼：boo7

得到壓縮包，解壓后得到如圖三個文件夾

2. 在項目中將解壓后的三個文件夾（css，fonts，js)復制

3. 創建html文檔，引入必要的資源

在官網找到基本模板，將其復制到新建html頁面

由于bootstrap依賴jquery 因此需要去官網下載jquery.min.js的jar包

下載方式:

直接官網下載
https://jquery.com/ 官網地址，點擊download，其中compressed為壓縮版本，uncompressed為未壓縮版本，找到自己要的版本下載即可。

到我上面分享的百度網盤中下載鏈接：https://pan.baidu.com/s/1vWGrYLGltn6-dXmk0iPfsA
提取碼：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)

創建Bootstrap_柵格系統.html文件

<!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>Bootstrap HelloWorld</title><link rel="stylesheet" href="css/bootstrap.min.css"><script src="js/jquery-3.6.0.min.js" ></script><script src="js/bootstrap.min.js" ></script><style>.inner{border: 1px solid red;}</style> </head> <body><div class="container-fluid"><div class="row"><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"> <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 類可以改變導航條的外觀。黑色底

<nav class="navbar navbar-inverse"><div class="container-fluid"><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><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><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><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></div> </nav>

分頁

禁用和激活狀態

鏈接在不同情況下可以定制。你可以給不能點擊的鏈接添加 .disabled 類、給當前頁添加 .active 類。

JS插件 – Carousel 輪播圖

在Bootstrap官網中的js插件中 Carousel : 旋轉木馬

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><div class="carousel-inner" role="listbox"><div class="item active"><img src="image/外國風電1.jpg" alt="..."><div class="carousel-caption">風電1</div></div><div class="item"><img src="image/外國風電2.jpg" alt="..."><div class="carousel-caption">風電2</div></div><div class="item"><img src="image/外國風電3.jpg" alt="..."><div class="carousel-caption">風電3</div></div></div><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a> </div>

總結

以上是生活随笔為你收集整理的IDEA中导入Bootstrap框架及入门教程的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： wan状态dns服务器,路由器的wan口
下一篇：唯众云课堂