第一次接觸Bootstrap框架
關(guān)于Bootstrap，話不多說，直接進(jìn)入主題：
安裝
可以通過bootstrap官方網(wǎng)站下載安裝
可以通過Bower安裝（關(guān)于bower一種包管理器，本文不做詳解）
bower install bootstrap
可以通過npm安裝（關(guān)于npm可以閱讀）
npm install bootstrap
項(xiàng)目中引入Bootstrap
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BootstrapDemo</title> <!--step1:設(shè)置viewport--> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <!--step2:引入Bootstrap--> <link rel="stylesheet" href="css/bootstrap.css"> </head>
布局容器
.container 類用于固定寬度并支持響應(yīng)式布局的容器
<div class="container"> </div>
.container-fluid 類用于100%寬度，占據(jù)全部視口（viewport）的容器
<div class="container-fluid"> </div>
柵格系統(tǒng)
Bootstrap提供了一套響應(yīng)式的, 移動(dòng)優(yōu)先的流式柵格系統(tǒng), 隨著屏幕或視口(viewport)尺寸的不同, 系統(tǒng)會(huì)自動(dòng)的分成12份；
柵格系統(tǒng)是通過一系列的行（row）和列(column)的組合來創(chuàng)建頁面布局；
“行（row）”必須包含在.container或.container-fluid容器中，
柵格系統(tǒng)中的媒體查詢
柵格系統(tǒng)中的參數(shù)
案例代碼
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--step1:設(shè)置viewport-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<!--step2:引入Bootstrap-->
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.container .row div {
background-color: grey;
border:1px solid red;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">1</div>
<div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">2</div>
<div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">3</div>
<div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">4</div>
<div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">5</div>
<div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">6</div>
<div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">7</div>
<div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">8</div>
<div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">9</div>
<div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">10</div>
<div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">11</div>
<div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">12</div>
</div>
</div>
</body>
頁面效果會(huì)隨著屏幕的大小col-lg-， col-md- ，col-sm-， col-xs- 顯示不同的效果
柵格系統(tǒng)中的列偏移（offsets）
col-lg-offset-
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--step1:設(shè)置viewport-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<!--step2:引入Bootstrap-->
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.container .row div {
background-color: grey;
border:1px solid red;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-offset-11 col-lg-1">row - col -1</div>
</div>
</div>
</body>
效果如下（偏移了11列）
柵格系統(tǒng)中的列嵌套
<div class="container"> <div class="row"> <div class="col-lg-4 col-md-2 col-sm-3 col-xs-6">1</div> <div class="col-lg-8 col-md-2 col-sm-3 col-xs-6">2 <div class="row"> <div class="col-lg-3 col-md-2 col-sm-3 col-xs-6">3</div> <div class="col-lg-3 col-md-2 col-sm-3 col-xs-6">4</div> <div class="col-lg-3 col-md-2 col-sm-3 col-xs-6">5</div> <div class="col-lg-3 col-md-2 col-sm-3 col-xs-6">6</div> </div> </div> </div> </div>
效果如下
流式布局容器
將最外面的布局元素.container 改為.container-fluid,就可以將固定的柵格布局轉(zhuǎn)換為100%寬度的布局
<div class="contaienr-fluid"> <div class="row"> </div> </div>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程
相關(guān)文章
JavaScript實(shí)現(xiàn)前端倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)前端倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章主要介紹了javascript合并表格單元格實(shí)例代碼,在某些應(yīng)用中需要?jiǎng)討B(tài)的合并單元格，感興趣的朋友可以參考一下2016-01-01
這篇文章主要介紹了通過js如何獲取當(dāng)前頁面的url網(wǎng)址信息,需要的朋友可以參考下2014-06-06
讓JavaScript的Alert彈出框失效的方法禁止彈出警告框
彈出框難免會(huì)影響你的心情，所以通過以下代碼可將Js彈出框屏蔽掉，實(shí)現(xiàn)思路是對(duì)alert方法重寫2014-09-09
在javascript前端開發(fā)階段經(jīng)常會(huì)遇到this，閉包，原型鏈知識(shí)，那么大家對(duì)這三種的基本知識(shí)理解嗎？今天小編就帶領(lǐng)大家一起學(xué)習(xí)this，閉包，原型鏈的知識(shí)，感興趣的朋友一起看看吧2016-09-09
深入淺析JavaScript的API設(shè)計(jì)原則
這篇文章主要介紹了JavaScript的API設(shè)計(jì)原則，包括接口的流暢性，一致性，參數(shù)的處理，可擴(kuò)展性，對(duì)錯(cuò)誤的處理，可預(yù)見性，注釋和文檔的可讀性，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
js實(shí)現(xiàn)對(duì)table動(dòng)態(tài)添加、刪除和更新的方法
這篇文章主要介紹了js實(shí)現(xiàn)對(duì)table動(dòng)態(tài)添加、刪除和更新的方法,涉及javascript針對(duì)html中table表格節(jié)點(diǎn)的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
類型守衛(wèi)是TypeScript中特有的用于在運(yùn)行時(shí)檢查類型的方式,它顯式的將javascript代碼按類型劃分,從而確保了運(yùn)行安全,下面我們就來簡單聊聊TypeScript中的4種類型守衛(wèi)吧2023-08-08
下面小編就為大家?guī)硪黄猨s獲取元素的偏移量offset簡單方法(必看)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
在layui下對(duì)元素進(jìn)行事件綁定的實(shí)例
今天小編就為大家分享一篇在layui下對(duì)元素進(jìn)行事件綁定的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09