初步認(rèn)識(shí)Bootstrap3-響應(yīng)式網(wǎng)站設(shè)計(jì)
時(shí)間：2023-05-09 18:12:02 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-05-09 18:12:02 來源：網(wǎng)站運(yùn)營
初步認(rèn)識(shí)Bootstrap3-響應(yīng)式網(wǎng)站設(shè)計(jì)：
一、下載源碼 進(jìn)入Bootstrap中文網(wǎng)后，依次點(diǎn)擊導(dǎo)航中的“Bootstrap3中文文檔”—>“起步”->“下載Bootstrap”，在打開的頁面中選擇“Bootstrap源碼”，然后點(diǎn)擊“下載源碼”，根據(jù)提示下載解壓即可。
二、Cdn加速 <!--最新版本的Bootstrap核心CSS文件-->
<linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous">
<!--可選的Bootstrap主題文件（一般不用引入）-->
<linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"crossorigin="anonymous">
<!--最新的Bootstrap核心JavaScript文件-->
<scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script>
三、目錄結(jié)構(gòu) bootstrap/
├──less/
├──js/
├──fonts/
├──dist/
│├──css/
│├──js/
│└──fonts/
└──docs/
└──examples/
less/、js/和fonts/目錄分別包含了CSS、JS和字體圖標(biāo)的源碼。
dist/目錄包含了上面所說的預(yù)編譯Bootstrap包內(nèi)的所有文件。
docs/包含了所有文檔的源碼文件，examples/目錄是Bootstrap官方提供的實(shí)例工程。除了這些，其他文件還包含Bootstrap安裝包的定義文件、許可證文件和編譯腳本等。
四、基本模板 <!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1">
<!--上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！-->
<title>Bootstrap101Template</title>
<!--Bootstrap-->
<linkhref="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"rel="stylesheet">
<!--HTML5shim和Respond.js是為了讓IE8支持HTML5元素和媒體查詢（mediaqueries）功能-->
<!--警告：通過file://協(xié)議（就是直接將html頁面拖拽到瀏覽器中）訪問頁面時(shí)Respond.js不起作用-->
<!--[ifltIE9]>
<scriptsrc="
https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<scriptsrc="
https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，中醫(yī)師承學(xué)院！</h1>
<!--jQuery(Bootstrap的所有JavaScript插件都依賴jQuery，所以必須放在前邊)-->
<scriptsrc="
https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!--加載Bootstrap的所有JavaScript插件。你也可以根據(jù)需要只加載單個(gè)插件。-->
<scriptsrc="
https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
五、禁止響應(yīng)布局 禁止響應(yīng)式布局有如下幾步：
1.移除此CSS文檔中提到的設(shè)置瀏覽器視口（viewport）的標(biāo)簽：<meta>。
2.通過為.container類設(shè)置一個(gè)width值從而覆蓋框架的默認(rèn)width設(shè)置，例如width:970px!important;。請(qǐng)確保這些設(shè)置全部放在默認(rèn)的BootstrapCSS文件的后面。注意，如果你把它放到媒體查詢中，也可以略去!important。
3.如果使用了導(dǎo)航條，需要移除所有導(dǎo)航條的折疊和展開行為。
4.對(duì)于柵格布局，額外增加.col-xs-*類或替換掉.col-md-*和.col-lg-*。不要擔(dān)心，針對(duì)超小屏幕設(shè)備的柵格系統(tǒng)能夠在所有分辨率的環(huán)境下展開。
六、web前端常用的學(xué)習(xí)網(wǎng)站 w3cschool - 編程獅，隨時(shí)隨地學(xué)編程
Bootstrap中文網(wǎng)
關(guān)鍵詞：設(shè)計(jì),響應(yīng),認(rèn)識(shí),初步
在線咨詢