專(zhuān)注Java教育14年
全國(guó)咨詢/投訴熱線：400-8080-105
更新時(shí)間：2022-04-01 09:51:20 來(lái)源：動(dòng)力節(jié)點(diǎn) 瀏覽936次
bootstrap是一個(gè)讓后端開(kāi)發(fā)人員相見(jiàn)恨晚的東西，我們了解下怎么使用的吧!
1.新建一個(gè)叫ubs的文件夾，把這個(gè)文件夾放到j(luò)ingyan下面。
2.在ubs下新建一個(gè)index.html文件，注意文件編碼一定要是utf8,不是的話你可以簡(jiǎn)單另存為的時(shí)候換一下，以免亂碼。
3.將準(zhǔn)備好的bootstrap-3.3.5包復(fù)制到ubs文件夾下，將準(zhǔn)備好的jquery-2.1.0.min.js復(fù)制到ubs文件夾下
4.雙擊用editplus編輯器打開(kāi)index.html文件，你也可以用別的編輯器，記事本也可以;接著便是重點(diǎn)，在head頭部寫(xiě)入引入bootstrap的內(nèi)容，見(jiàn)圖：
代碼如下
<html>
<head>
<title>怎么用bootstrap</title>
<script src="jquery-2.1.0.min.js"> </script>
<script src="bootstrap-3.3.5/js/bootstrap.js"> </script>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.5/css/bootstrap.css">
</head>
<body>
5.復(fù)制一段使用bootstrap的例子放進(jìn)body中
<div class="container" style="padding: 100px 50px 10px;" >
<button type="button" class="btn btn-default" title="Popover title"
data-container="body" data-toggle="popover" data-placement="left"
data-content="左側(cè)的 Popover 中的一些內(nèi)容">
左側(cè)的 Popover
</button>
<button type="button" class="btn btn-primary" title="Popover title"
data-container="body" data-toggle="popover" data-placement="top"
data-content="頂部的 Popover 中的一些內(nèi)容">
頂部的 Popover
</button>
<button type="button" class="btn btn-success" title="Popover title"
data-container="body" data-toggle="popover" data-placement="bottom"
data-content="底部的 Popover 中的一些內(nèi)容">
底部的 Popover
</button>
<button type="button" class="btn btn-warning" title="Popover title"
data-container="body" data-toggle="popover" data-placement="right"
data-content="右側(cè)的 Popover 中的一些內(nèi)容">
右側(cè)的 Popover
</button>
</div>
<script>
$(function (){
$("[data-toggle='popover']").popover();
});
</script>
6.右擊index.html使用你常用的瀏覽器打開(kāi)它。當(dāng)你點(diǎn)擊橙色按鈕的時(shí)候，就會(huì)出現(xiàn)彈出框;那么一個(gè)bootstrap的簡(jiǎn)單使用方法就講角完了;
通過(guò)上述相信大家對(duì)bootstrap使用方法已經(jīng)有了一定的了解，大家如果想了解更多相關(guān)知識(shí)，不妨來(lái)關(guān)注一下動(dòng)力節(jié)點(diǎn)的Java在線學(xué)習(xí)，里面的課程從淺到深，通俗易懂，很適合沒(méi)有基礎(chǔ)的小伙伴學(xué)習(xí)，希望對(duì)大家能夠有所幫助。
Java實(shí)驗(yàn)班
0基礎(chǔ) 0學(xué)費(fèi) 15天面授
Java就業(yè)班
有基礎(chǔ) 直達(dá)就業(yè)
Java夜校直播班
業(yè)余時(shí)間 高薪轉(zhuǎn)行
Java在職加薪班
工作1~3年，加薪神器
Java架構(gòu)師班
工作3~5年，晉升架構(gòu)
提交申請(qǐng)后，顧問(wèn)老師會(huì)電話與您溝通安排學(xué)習(xí)
京公網(wǎng)安備 11030102010736號(hào)