當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時(shí)間：2023/12/20 编程问答 23 豆豆

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

BootStrap簡(jiǎn)介

概念: 一個(gè)前端開(kāi)發(fā)的框架.Bootstrap是美國(guó)Twitter公司的設(shè)計(jì)師Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 開(kāi)發(fā)的簡(jiǎn)潔、直觀、強(qiáng)悍的前端開(kāi)發(fā)框架，使得 Web 開(kāi)發(fā)更加快捷。

好處:

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

響應(yīng)式布局

*同一套頁(yè)面可以兼容不同分辨率的設(shè)備

Bootstrap快速入門

官方網(wǎng)站：https://www.bootcss.com/

1. 下載Bootstrap

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

得到壓縮包，解壓后得到如圖三個(gè)文件夾

2. 在項(xiàng)目中將解壓后的三個(gè)文件夾（css，fonts，js)復(fù)制

3. 創(chuàng)建html文檔，引入必要的資源

在官網(wǎng) 找到基本模板，將其復(fù)制到新建html頁(yè)面

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

下載方式:

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

到我上面分享的百度網(wǎng)盤中下載鏈接：https://pan.baidu.com/s/1vWGrYLGltn6-dXmk0iPfsA
提取碼：boo7

經(jīng)過(guò)調(diào)整基本模板頁(yè)面如下:

響應(yīng)式布局

柵格系統(tǒng)原理

柵格系統(tǒng)用于通過(guò)一系列的行（row）與列（column）的組合來(lái)創(chuàng)建頁(yè)面布局，你的內(nèi)容就可以放入這些創(chuàng)建好的布局中。下面就介紹一下 Bootstrap 柵格系統(tǒng)的工作原理：1.“行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內(nèi)補(bǔ)（padding）。2.通過(guò)“行（row）”在水平方向創(chuàng)建一組“列（column）”。3.你的內(nèi)容應(yīng)當(dāng)放置于“列（column）”內(nèi)，并且，只有“列（column）”可以作為行（row）”的直接子元素。4.類似 .row 和 .col-xs-4 這種預(yù)定義的類，可以用來(lái)快速創(chuàng)建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來(lái)創(chuàng)建語(yǔ)義化的布局。5.通過(guò)為“列（column）”設(shè)置 padding 屬性，從而創(chuàng)建列與列之間的間隔（gutter）。通過(guò)為 .row 元素設(shè)置負(fù)值 margin 從而抵消掉為 .container 元素設(shè)置的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。6.負(fù)值的 margin就是下面的示例為什么是向外突出的原因。在柵格列中的內(nèi)容排成一行。7.柵格系統(tǒng)中的列是通過(guò)指定1到12的值來(lái)表示其跨越的范圍。例如，三個(gè)等寬的列可以使用三個(gè) .col-xs-4 來(lái)創(chuàng)建。8.如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素將被作為一個(gè)整體另起一行排列。9.柵格類適用于與屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備，并且針對(duì)小屏幕設(shè)備覆蓋柵格類。因此，在元素上應(yīng)用任何 .col-md-* 柵格類適用于與屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備，并且針對(duì)小屏幕設(shè)備覆蓋柵格類。因此，在元素上應(yīng)用任何 .col-lg-* 不存在，也影響大屏幕設(shè)備。

同一套頁(yè)面可以兼容不同分辨率的設(shè)備。
實(shí)現(xiàn)：依賴于柵格系統(tǒng)：江一行平均分成12個(gè)格子，可以指定元素占幾個(gè)格子
步驟：
- 定義容器。相當(dāng)于table
  - 容器分類：
    - container:固定寬度 (兩邊會(huì)留白)
    - container-fluid：100% 寬度
- 定義行：相當(dāng)于tr 樣式：row
- 定義元素。指定該元素在不同的設(shè)備上所占的格子數(shù)目。樣式： col-設(shè)備代號(hào) - 格子數(shù)目
  - 設(shè)備代號(hào)
    - .col-xs-：超小屏幕手機(jī) (<768px) col-xs-12
    - .col-sm-：小屏幕平板 (≥768px)
    - .col-md-：中等屏幕 桌面顯示器 (≥992px)
    - .col-lg-：大屏幕 大桌面顯示器 (≥1200px)

創(chuàng)建Bootstrap_柵格系統(tǒng).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" ：響應(yīng)式圖片，在任意尺寸都占100% <img src="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"><img src="..." alt="..." class="img-thumbnail">

表格

為任意 <table> 標(biāo)簽添加 .table 類可以為其賦予基本的樣式 — 少量的內(nèi)補(bǔ)（padding）和水平方向的分隔線。
將任何 .table 元素包裹在 .table-responsive 元素內(nèi)，即可創(chuàng)建響應(yīng)式表格，其會(huì)在小屏幕設(shè)備上（小于768px）水平滾動(dòng)。當(dāng)屏幕大于 768px 寬度時(shí)，水平滾動(dòng)條消失。
通過(guò) .table-striped 類可以給 <tbody> 之內(nèi)的每一行增加斑馬條紋樣式。
添加 .table-bordered 類為表格和其中的每個(gè)單元格增加邊框。
通過(guò)添加 .table-hover 類可以讓 <tbody> 中的每一行對(duì)鼠標(biāo)懸停狀態(tài)作出響應(yīng)。
通過(guò)添加 .table-condensed 類可以讓表格更加緊湊，單元格中的內(nèi)補(bǔ)（padding）均會(huì)減半。

通過(guò)這些狀態(tài)類可以為行或單元格設(shè)置顏色。

Class描述

.active	鼠標(biāo)懸停在行或單元格上時(shí)所設(shè)置的顏色
.success	標(biāo)識(shí)成功或積極的動(dòng)作
.info	標(biāo)識(shí)普通的提示信息或動(dòng)作
.warning	標(biāo)識(shí)警告或需要用戶注意
.danger	標(biāo)識(shí)危險(xiǎn)或潛在的帶來(lái)負(fù)面影響的動(dòng)作

表單

基本實(shí)例

單獨(dú)的表單控件會(huì)被自動(dòng)賦予一些全局樣式。所有設(shè)置了 .form-control 類的 <input>、<textarea> 和 <select> 元素都將被默認(rèn)設(shè)置寬度屬性為 width: 100%;。將 label 元素和前面提到的控件包裹在 .form-group 中可以獲得最好的排列。

內(nèi)聯(lián)表單

為 <form> 元素添加 .form-inline 類可使其內(nèi)容左對(duì)齊并且表現(xiàn)為 inline-block 級(jí)別的控件。只適用于視口（viewport）至少在 768px 寬度時(shí)（視口寬度再小的話就會(huì)使表單折疊）。

水平排列的表單

通過(guò)為表單添加 .form-horizontal 類，并聯(lián)合使用 Bootstrap 預(yù)置的柵格類，可以將 label 標(biāo)簽和控件組水平并排布局。這樣做將改變 .form-group 的行為，使其表現(xiàn)為柵格系統(tǒng)中的行（row），因此就無(wú)需再額外添加 .row 了。

<table class="table table-bordered table-hover"> <tr><th>姓名</th><th>學(xué)號(hào)</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>

導(dǎo)航條

默認(rèn)樣式的導(dǎo)航條

navbar-defaul :白色底
反色的導(dǎo)航條

通過(guò)添加 .navbar-inverse 類可以改變導(dǎo)航條的外觀。黑色底

<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="#">首頁(yè)</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>

分頁(yè)

禁用和激活狀態(tài)

鏈接在不同情況下可以定制。你可以給不能點(diǎn)擊的鏈接添加 .disabled 類、給當(dāng)前頁(yè)添加 .active 類。

JS插件 – Carousel 輪播圖

在Bootstrap官網(wǎng)中的js插件中 Carousel : 旋轉(zhuǎn)木馬

<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/外國(guó)風(fēng)電1.jpg" alt="..."><div class="carousel-caption">風(fēng)電1</div></div><div class="item"><img src="image/外國(guó)風(fēng)電2.jpg" alt="..."><div class="carousel-caption">風(fēng)電2</div></div><div class="item"><img src="image/外國(guó)風(fēng)電3.jpg" alt="..."><div class="carousel-caption">風(fēng)電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>

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

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