Bootstrap是什麼意思？ Bootstrap怎麼用？-css教學-PHP中文網

首頁

web前端

css教學

Bootstrap是什麼意思？ Bootstrap怎麼用？

青灯夜游

Oct 18, 2018 pm 05:42 PM

bootstrap

Bootstrap是什麼意思？ Bootstrap怎麼用？ 相信剛接觸前端開發的小白對於Bootstrap會有點陌生。那麼，這篇文章我們就來跟大家介紹Bootstrap的意思以及Bootstrap的用法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

首先我們來了解一下Bootstrap是什麼？

Bootstrap 是一個基於html、css、JavaScript ，用於快速開發Web 應用程式和網站的開源web前端框架，由著名的社交網站、微博的先驅Twitter在2011年8月推出。集合html、css、JavaScript，使用了最新的瀏覽器技術，為快速web前端開發提供了一套前端工具包，包括佈局、網格、表格、按鈕、表單、導航、提示等等元件。使用Bootstrap可以建立出非常優雅的前端介面，而且佔用資源非常小。

關於Bootstrap的介紹就到這，想要更多的了解Bootstrap，可以訪問bootstrap教程！

看完了Bootstrap是什麼後，我們接下來看一看Bootstrap該怎麼用吧。

Bootstrap框架的使用步驟：

#1、下載Bootstrap

我們先要到Bootstrap官網（http:/ /www.bootcss.com/）進行下載：

Bootstrap是什麼意思？ Bootstrap怎麼用？

#點擊紅線邊框處就可跳到下載頁面了，有三中方法可以供我們選擇。但，由於我們現在處於初級使用階段，所以說我們還是直接用在生成環境下的Bootstrap吧，我們下載第一個就好：

Bootstrap是什麼意思？ Bootstrap怎麼用？

##我們就會得到一個壓縮套件：bootstrap-3.3.7-dist.zip，解壓縮後，我們來看看裡面的文件有哪些：

Bootstrap是什麼意思？ Bootstrap怎麼用？ ##對於這些文件，我們來了解一下裡面的一些檔案：

bootstrap.css：完整的bootstrap樣式表，未經壓縮過的，可供開發的時候進行調試用。

bootstrap.min.css：是經過壓縮後的bootstrap樣式表，內容和bootstrap.css完全一樣，但是把中間不必要的空格之類的東西都刪除了，所以檔案大小會比bootstrap.css小，可以在部署網站的時候引用，如果引用了這個文件，就沒必要引用bootstrap.css了。

bootstrap.js：這個是bootstrap的靈魂所在，是bootstrap的所有js指令的集合，你看到bootstrap裡面所有的js效果，都是由這個檔案控制的，這個檔案也是一個未經壓縮的版本，可供開發的時候進行調試用。

bootstrap.min.js：它是bootstrap.js的壓縮版，內容和bootstrap.js一樣的，但是檔案大小會小很多，在部署網站的時候可以不引用bootstrap.js，而是換成引用這個文件就行

注意

：bootstrap的環境至少需要3個文件，分別為：bootstrap.min.css、jQuery.min.js、bootstrap.min .js2、使用bootstrap的方法（兩種方法）

①透過導入以上下載的檔案

Bootstrap是什麼意思？ Bootstrap怎麼用？

########################### ######②直接使用BootCDN 提供的免費CDN 加速服務（同時支援http 和https 協定），存取速度更快、加速效果更明顯、沒有速度和頻寬限制、永久免費。 BootCDN 也為大量的前端開源工具庫提供了 CDN 加速服務，請進入BootCDN 主頁查看更多可用的工具庫。 #####################注意######：######bootstrap.min.css、jquery.min.js、bootstrap.min .js這三個文件的引入順序一定不能錯亂，一般是把jquery.min.js、bootstrap.min.js這兩個文件放入html網頁文檔的最底部，這麼做是為了防止網頁未加載完畢而這兩個文件先載入可能產生的不必要的問題。 ######下面我們就透過一個例子來看看bootstrap的使用---使用bootstrap的字體圖示###

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!--最新bootstrap 核心 css 文件-->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		
		<!--可选的bootstrap主题文件(一般不引入)-->
		<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
		<style>
			ul{
				width: 200px;
				height: 500px;
				margin: 50px auto;
			}
			li{
				list-style: none;
				font-size: 50px;
				float: left;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><i class="glyphicon glyphicon-user"></i></li>
			<li><i class="glyphicon glyphicon-home"></i></li>
			<li><i class="glyphicon glyphicon-lock"></i></li>
			<li><i class="glyphicon glyphicon-qrcode"></i></li>
		</ul>
	</body>
	<!--jquery文件 务必在bootstrap.min.css前引用-->
	<script type="text/javascript"  ></script>
	<!--最新bootstrap 核心 javascript 文件-->
	<script type="text/javascript" src="js/bootstrap.min.js" ></script>
</html>

###效果圖：###

Bootstrap是什麼意思？ Bootstrap怎麼用？