Bootstrap框架的使用步驟

發(fā)布時間：2020-09-26 11:07:09 來源：億速云閱讀：283 作者：小新欄目：web開發(fā)

小編給大家分享一下Bootstrap框架的使用步驟，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

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

Bootstrap 是一個基于 html、css、JavaScript ，用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的開源web前端框架，由著名的社交網(wǎng)站、微博的先驅(qū)Twitter在2011年8月推出。集合html、css、JavaScript，使用了最新的瀏覽器技術(shù)，為快速web前端開發(fā)提供了一套前端工具包，包括布局、網(wǎng)格、表格、按鈕、表單、導(dǎo)航、提示等等組件。使用Bootstrap可以構(gòu)建出非常優(yōu)雅的前端界面，而且占用資源非常小。

關(guān)于Bootstrap的介紹就到這，想要更多的了解Bootstrap，可以訪問bootstrap教程！

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

Bootstrap框架的使用步驟：

1、下載Bootstrap

我們先要到Bootstrap官網(wǎng)（http://www.bootcss.com/）進(jìn)行下載：

Bootstrap框架的使用步驟

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

Bootstrap框架的使用步驟

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

Bootstrap框架的使用步驟

對于這些文件，我們來了解一下里面的一些文件：

bootstrap.css：完整的bootstrap樣式表，未經(jīng)壓縮過的，可供開發(fā)的時候進(jìn)行調(diào)試用。

bootstrap.min.css：是經(jīng)過壓縮后的bootstrap樣式表，內(nèi)容和bootstrap.css完全一樣，但是把中間不必要的空格之類的東西都刪掉了，所以文件大小會比bootstrap.css小，可以在部署網(wǎng)站的時候引用，如果引用了這個文件，就沒必要引用bootstrap.css了。

bootstrap.js：這個是bootstrap的靈魂所在，是bootstrap的所有js指令的集合，你看到bootstrap里面所有的js效果，都是由這個文件控制的，這個文件也是一個未經(jīng)壓縮的版本，可供開發(fā)的時候進(jìn)行調(diào)試用。

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

注意：bootstrap的環(huán)境至少需要3個文件，分別為：bootstrap.min.css、jQuery.min.js、bootstrap.min.js

2、使用bootstrap的方法（兩種方法）

①通過導(dǎo)入以上下載的文件

Bootstrap框架的使用步驟

②直接使用 BootCDN 提供的免費(fèi) CDN 加速服務(wù)（同時支持 http 和 https 協(xié)議），訪問速度更快、加速效果更明顯、沒有速度和帶寬限制、永久免費(fèi)。BootCDN 還對大量的前端開源工具庫提供了 CDN 加速服務(wù)，請進(jìn)入BootCDN 主頁查看更多可用的工具庫。

Bootstrap框架的使用步驟

注意：

bootstrap.min.css、jquery.min.js、bootstrap.min.js這三個文件的引入順序一定不能錯亂，一般是把jquery.min.js、bootstrap.min.js這兩個文件放入html網(wǎng)頁文檔的最底部，這么做是為了防止網(wǎng)頁未加載完畢而這兩個文件先加載可能產(chǎn)生的不必要的問題。

下面我們就通過一個例子來看看bootstrap的使用---使用bootstrap的字體圖標(biāo)

<!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文件 務(wù)必在bootstrap.min.css前引用-->
	<script type="text/javascript" src="js/jquery.min.js" ></script>
	<!--最新bootstrap 核心 javascript 文件-->
	<script type="text/javascript" src="js/bootstrap.min.js" ></script>
</html>

效果圖：

Bootstrap框架的使用步驟

看完了這篇文章，相信你對Bootstrap框架的使用步驟有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

Bootstrap框架的使用步驟

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽