欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何使用bootstrap框架 bootstrap入門必看!

 更新時(shí)間：2017年04月13日 16:50:17   作者：前程明亮  
如何使用bootstrap？這篇文章就是告訴大家如何使用bootstrap框架，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前言: 前幾天，本想做一個(gè)登陸界面，但自己寫form表單必然很丑，所以想用下bootstarp框架，之前聽(tīng)別人說(shuō)bootstrap很牛的樣子。但我完全不會(huì)bootstrap...

下載&目錄

看bootstrap官網(wǎng)，接著我下載了用于生產(chǎn)環(huán)境Bootstrap:

解壓出來(lái)是這樣的:

目錄結(jié)構(gòu)大概是這樣的，前幾天在官網(wǎng)有看到。下面這個(gè)目錄結(jié)構(gòu)你應(yīng)該先了解下:

bootstrap3
├── css
│├── bootstrap-theme.css //主題類型，生產(chǎn)上一般用不到
│├── bootstrap-theme.css.map //主題類型，生產(chǎn)上一般用不到
│├── bootstrap-theme.min.css //主題類型，生產(chǎn)上一般用不到
│ ├── bootstrap.css
│ ├── bootstrap.css.map //做映射的，可以理解為 shuaige = “l(fā)uotianshuai” 那么掉shuaige的時(shí)候就相當(dāng)于掉luotianshuai
│ └── bootstrap.min.css
├──fonts //包含了字體圖標(biāo)文件，他也是做的對(duì)應(yīng)。下面的文件包含了不同系統(tǒng)下的字體圖標(biāo)
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ └── glyphicons-halflings-regular.woff2
└── js
├── bootstrap.js
├── bootstrap.min.js

bootstrap做了很多美化過(guò)的css樣式在bootstrap.css中，js則放在bootstrap.js。注意了，bootstrap的js與Jquery的js是不一樣的。bootstrap的js必須依賴Jquery。所以在導(dǎo)入JS的時(shí)候，得先導(dǎo)入Jquery.

應(yīng)用

接下來(lái)看官網(wǎng)給我們推薦的入門級(jí)模版.

雖然不怎么好看，但我想在本地上也能有這么個(gè)HTML文件。怎么搞??
右擊鼠標(biāo)，點(diǎn)擊網(wǎng)頁(yè)另存為，保存到本地。

下載的除了HTML文件外，還有另外一個(gè)文件Starter Template for Boostrap_files，打開(kāi)后，顯示如下:是所需要的bootstrap的css與js,可在HTML中引入。

我已經(jīng)下載了bootstrap，所以我直接用我本地的bootstrap就好了，于是我刪除上面的Starter Template for Boostrap_files文件夾。

bootstrap_1.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">
 <!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
 <title>Bootstrap 101 Template</title>

 <!-- Bootstrap -->
 <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">


 </head>
 <body>
 <h1>你好，世界！</h1>

 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="bootstrap-3.3.7-dist/js/jquery-3.1.1.min.js"></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
 <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
 </body>
</html>
  • 11行從bootstrap導(dǎo)入css.
  • 19行導(dǎo)入jquery
  • 21行從bootstrap導(dǎo)入js

導(dǎo)入bootstrap的css與js注意路徑:

用瀏覽器打開(kāi)上面的html界面會(huì)出現(xiàn)"你好，世界"。很low，我不禁懷疑bootstrap真的有用嗎??說(shuō)好的美化效果呢

我在bootstrap官網(wǎng)隨便找下"巨幕"的組件

將組件的代碼貼到HTML的body中，便可以使用了。

<!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">
 <!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
 <title>Bootstrap 101 Template</title>

 <!-- Bootstrap -->
 <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">


 </head>
 <body>
 <h1>你好，世界！</h1>
 <div class="jumbotron container">
  <div >
   <h1>Hello, world!</h1>
   <p><a class="btn btn-primary btn-lg" href="#" rel="external nofollow" role="button">Learn more</a></p>
  </div>
 </div>

 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="bootstrap-3.3.7-dist/js/jquery-3.1.1.min.js"></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
 <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
 </body>
</html>

效果圖:

現(xiàn)在，你會(huì)使用bootstrap了吧，哈哈

建議好好看下官網(wǎng)，我可是看了整個(gè)下午……都沒(méi)看完……

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論