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

编程问答

Bootstrap简介

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

生活随笔收集整理的這篇文章主要介紹了 Bootstrap简介小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1.使用準(zhǔn)備

1.1 Bootstrap的下載

http://www.bootcss.com，下載用于生產(chǎn)環(huán)境的Bootstrap即可。

1.2 Bootstrap包含的內(nèi)容

● 全局CSS：基本的 HTML 元素均可以通過 class 設(shè)置樣式并得到增強(qiáng)效果；還有先進(jìn)的柵格系統(tǒng)。

● 組件：無數(shù)可復(fù)用的組件，包括字體圖標(biāo)、下拉菜單、導(dǎo)航、警告框、彈出框等更多功能。

● JavaScript 插件：是jQuery插件，帶了一些其它的功能。如：輪播圖。

1.3 Bootstrap的目錄結(jié)構(gòu)

2.創(chuàng)建模板

2.1 Bootstrap模板文件創(chuàng)建步驟

只需要?jiǎng)?chuàng)建一次，以后可以直接復(fù)制這個(gè)模板使用

● 復(fù)制三個(gè)文件夾css、js、fonts到項(xiàng)目目錄下。

● 復(fù)制jQuery框架到j(luò)s目錄下。

● 復(fù)制“起步 ==> 基本模板"的代碼到HTML中。

2.2 模板說明

3.柵格系統(tǒng)

? 　　Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局，你的內(nèi)容就可以放入這些創(chuàng)建好的布局中。下面就介紹一下 Bootstrap 柵格系統(tǒng)的特點(diǎn)：

“行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適

的排列（aligment）和內(nèi)間距（padding）。
通過“行（row）”在水平方向創(chuàng)建一組“列（column）”。
你的內(nèi)容應(yīng)當(dāng)放置于“列（column）”內(nèi)，并且，只有“列（column）”可以作為行（row）”的直接子元素。
柵格系統(tǒng)中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個(gè)等寬的列可以使用三個(gè) .col-xs-4 來

創(chuàng)建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素將被作為一個(gè)整

體另起一行排列。

關(guān)注微信公眾號(hào)，隨時(shí)隨地學(xué)習(xí)

轉(zhuǎn)載于:https://www.cnblogs.com/dintalk/p/10880032.html

總結(jié)

以上是生活随笔為你收集整理的Bootstrap简介的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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