開篇廢話是一種情懷
- 上一篇說(shuō)到Less預(yù)處理語(yǔ)言,這節(jié)就著重講下Bootstrap框架,這款框架應(yīng)該是現(xiàn)在前端人手必備,就是那么的好用.不管是兼容性還是組建,都是無(wú)可挑剔的
- Bootstrap這種東西一定要學(xué)會(huì),不然在前端開發(fā)中,你就好像是少了一只腳一樣,現(xiàn)階段我們只有拿來(lái)主義,先去用它,然后再慢慢的一點(diǎn)點(diǎn)的去研究它,超越它
- 好處就是生態(tài)圈火强霎，不斷地更新迭代,提供一套美觀大方地界面組件,提供一套優(yōu)雅的 HTML+CSS 編碼規(guī)范,讓我們的 Web 開發(fā)更簡(jiǎn)單穆桂，更快捷彻秆；
- 注意點(diǎn)就是使用Bootstrap 并不代表不用寫 CSS 樣式少漆，而是不用寫絕大多數(shù)大家都會(huì)用到的樣式
下載Bootstrap
下載3.3.6鏈接:
https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip
下載4.0鏈接:
https://github.com/twbs/bootstrap/releases/download/v4.0.0-alpha.2/bootstrap-4.0.0-alpha.2-dist.zip
在線自定義
源碼編譯 --- LESS語(yǔ)言
搭建 Bootstrap 頁(yè)面骨架及項(xiàng)目目錄結(jié)構(gòu)
├─ /project file/ ··················· 項(xiàng)目所在目錄
└─┬─ /css/ ······················· 我們自己的CSS文件
├─ /font/ ······················ 使用到的字體文件
├─ /img/ ······················· 使用到的圖片文件
├─ /js/ ························ 自己寫的JS腳步
├─ /lib/ ······················· 從第三方下載回來(lái)的庫(kù)【只用不改】
├─ /favicon.ico ················ 站點(diǎn)圖標(biāo)
└─ /index.html ················· 入口文件
約定編碼規(guī)范
HTML約定
- 所有的CSS引用在HEAD中僧诚，按照第三方優(yōu)先的順序排列扯俱，我們自己的CSS肯定在最下面
- 所有JS文件都引用在Body的最下面（加載的緣由）脖律，按照依賴順序排序
- 如果只是使用bootstrap的樣式的話些膨，就不用引用js文件
- 在head中引入必要的CSS文件蟀俊，優(yōu)先引用第三方的CSS，方便我們自己的樣式覆蓋
- 在body末尾引入必要的JS文件订雾，優(yōu)先引用第三方的JS肢预，注意JS文件之間的依賴關(guān)系，比如bootstrap.js依賴jQuery洼哎，那就應(yīng)該先引用jquery.js 然后引用bootstrap.js
CSS約定
- 除了公共級(jí)別樣式烫映，其余樣式全部由 模塊前綴
- 盡量使用 直接子代選擇器， 少用間接子代 避免錯(cuò)殺
- CSS類名沖突 通過(guò)約定 給模塊加上一個(gè)獨(dú)一無(wú)二的名字
- 使用子代選擇器的方式
JS約定
- 不允許使用
onxxx = function(){}的方式注冊(cè)事件 - 原生JS統(tǒng)一使用
addEventListener('xxx', function(){});
HTML5文檔結(jié)構(gòu)
- 示例代碼 :
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>頁(yè)面標(biāo)題</title>
</head>
<body>
</body>
</html>
視口Viewport設(shè)置
- ** 示例代碼 : **
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
1.html中插入視口設(shè)置噩峦，可以通過(guò)
emmet meta:vp插入
2.此屬性為移動(dòng)端頁(yè)面視口設(shè)置锭沟，當(dāng)前值表示在移動(dòng)端頁(yè)面的寬度為設(shè)備的寬度，并且不縮放（縮放級(jí)別為1）
** 3.960px 內(nèi)容 被套在一個(gè)寬度為980px(絕大多數(shù)設(shè)備的視口默認(rèn)尺寸)的容器(視口)中识补，將視口縮放到414px的設(shè)備中展示
4.width:視口的寬度
5.initial-scale：初始化縮放
6.user-scalable:是否允許用戶自行縮放（值：yes/no; 1/0）
7.minimum-scale:最小縮放族淮，一般設(shè)置了用戶不允許縮放，就沒(méi)必要設(shè)置最小和最大縮放
8.maximum-scale:最大縮放**
瀏覽器兼容模式
- ** 示例代碼 : **
<meta http-equiv="X-UA-Compatible" content="IE=edge">
html中插入兼容模式設(shè)置李请，可以通過(guò)
emmet meta:compat插入
此屬性為文檔兼容模式聲明瞧筛，表示如果在IE瀏覽器下則使用最新的標(biāo)準(zhǔn)渲染當(dāng)前文檔
站點(diǎn)圖標(biāo) favicon
- ** 示例代碼 : **
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
html中插入圖標(biāo)鏈接，可以通過(guò)
emmet link:favicon插入
引入相應(yīng)的第三方文件
- 示例代碼 :
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="my.css">
...
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="my.js"></script>
在我們默認(rèn)的樣式表中將默認(rèn)字體設(shè)置為：
- 示例代碼 :
body{
font-family: "Helvetica Neue",
Helvetica,
Microsoft Yahei,
Hiragino Sans GB,
WenQuanYi Micro Hei,
sans-serif;
}
版心container類
- 定義一個(gè)固定寬度且居中的版心
- container是具備響應(yīng)式的能力
- 四個(gè)檔位 1170 - 970 - 750 - 100%
柵格系統(tǒng) ----> 核心部分
- Bootstrap中的柵格系統(tǒng)就是將一行劃分為12列
- 我們通過(guò)col--的類名控制某個(gè)元素在某種屏幕的情況下展示幾列**
- col-md-6 在中等屏幕下 占1/2
- col-xs-12 在超小屏幕下 占全部
行排列 ----> row
.row{ ml:-15px; mr:-15px }- 抵消掉container中定義的padding
列排列 ----> col-*-*類
- 在某種屏幕尺寸下控制列的占比
1.col-xs-[列數(shù)]：在超小屏幕下展示幾份
2.col-sm-[列數(shù)]：在小屏幕下展示幾份
3.col-md-[列數(shù)]：在中等屏幕下展示幾份
4.col-lg-[列數(shù)]：在大屏幕下展示幾份
5.xs : 超小屏幕 手機(jī) (<768px)
6.sm : 小屏幕 平板 (≥768px)
7.md : 中等屏幕 桌面顯示器 (≥992px)
8.lg: 大屏幕 大桌面顯示器 (≥1200px)
字體圖標(biāo)
- 字體實(shí)際上就是記錄一個(gè)字符對(duì)應(yīng)的圖形
- 在CSS中為元素設(shè)置字體导盅，以前只能設(shè)置客戶端存在的字體
- webfont 在線字體
- 自己做一套圖形的字體,可以使用icomoon進(jìn)行制作.
- 如何定義一個(gè)web字體
- ** 示例代碼 : **
/* 定義一個(gè)叫做“xxx”字體 */
@font-face {
font-family: 'xxx';
src: url('../font/MiFie-Web-Font.eot') format('embedded-opentype'),
url('../font/MiFie-Web-Font.svg') format('svg'),
url('../font/MiFie-Web-Font.ttf') format('truetype'),
url('../font/MiFie-Web-Font.woff') format('woff');
}
字體文件格式
- eot : embedded-opentype
- svg : svg
- ttf : truetype
- woff : woff
字體文件格式
- eot : embedded-opentype
- svg : svg
- ttf : truetype
- woff : woff
自定義按鈕樣式生成
- 鏈接 : http://blog.koalite.com/bbg/
- 可以通過(guò)界面生成一個(gè)新的按鈕樣式
.btn-xxx{
color: #ffffff;
background-color: #E92322;
border-color: #DB3B43;
}
.btn-xmg:hover,
.btn-xmg:focus,
.btn-xmg:active,
.btn-xmg.active,
.open .dropdown-toggle.btn-xmg {
color: #ffffff;
background-color: #E92322;
border-color: #DB3B43;
}
.btn-xmg:active,
.btn-xmg.active,
.open .dropdown-toggle.btn-xmg {
background-image: none;
}
.btn-xmg.disabled,
.btn-xmg[disabled],
fieldset[disabled] .btn-xmg,
.btn-xmg.disabled:hover,
.btn-xmg[disabled]:hover,
fieldset[disabled] .btn-xmg:hover,
.btn-xmg.disabled:focus,
.btn-xmg[disabled]:focus,
fieldset[disabled] .btn-xmg:focus,
.btn-xmg.disabled:active,
.btn-xmg[disabled]:active,
fieldset[disabled] .btn-xmg:active,
.btn-xmg.disabled.active,
.btn-xmg[disabled].active,
fieldset[disabled] .btn-xmg.active {
background-color: #E92322;
border-color: #DB3B43;
}
.btn-xmg .badge {
color: #E92322;
background-color: #ffffff;
}
3.5小屏幕隱藏
- 示例代碼 :
<div class="topbar hidden-xs hidden-sm"></div>
||
<div class="topbar visible-md visible-lg"></div>
- __hidden-xx : 在某種屏幕下隱藏 __
- visible-xx-xxx : 在某種屏幕尺寸下顯示
- visible-md-xx：指的是中等屏幕可見(jiàn)较幌，不是中等屏幕以上
- visible-md-block visible-lg-block == hidden-sm hidden-xs
自己實(shí)現(xiàn)一套相同的工具類
- 根據(jù)hidden-xxx和visible-xxx的特點(diǎn)，通過(guò)媒體查詢的方式
- 示例代碼 :
@media (max-width:768px) {
/*-xs*/
.hidden-xs {
display: none;
}
.visible-xs-block {
display: block;
}
.visible-xs-inline {
display: inline;
}
.visible-xs-inline-block {
display: inline-block;
}
}
@media (max-width:992px) {
/*-sm*/
.hidden-sm {
display: none;
}
.visible-sm-block {
display: block;
}
.visible-sm-inline {
display: inline;
}
.visible-sm-inline-block {
display: inline-block;
}
}
@media (max-width:1200px) {
/*-md*/
.hidden-md {
display: none;
}
.visible-md-block {
display: block;
}
.visible-md-inline {
display: inline;
}
.visible-md-inline-block {
display: inline-block;
}
}
@media (min-width:1200px) {
/*-lg*/
.hidden-lg {
display: none;
}
.visible-lg-block {
display: block;
}
.visible-lg-inline {
display: inline;
}
.visible-lg-inline-block {
display: inline-block;
}
}
使用一個(gè)第三方的jquery插件步驟
- 下載包
- 引用jquery
- 引用包
- 編寫特定的HTML結(jié)構(gòu)
- 自己寫一段JS調(diào)用一下這個(gè)插件
- Bootstrap框架中的所有JS組件都依賴于jQuery實(shí)現(xiàn)
- 現(xiàn)在市面上很多插件的調(diào)用方式是不需要自己寫JS
- 其實(shí)這些插件都會(huì)根據(jù)HTML的特殊點(diǎn)自動(dòng)執(zhí)行
4.導(dǎo)航通欄
- 在使用了boostrap過(guò)后白翻，大多數(shù)界面元素都是通過(guò)bootstrap提供好的界面組件修改得來(lái)
<nav class="navbar navbar-default navbar-xmg navbar-static-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<i class="icon-icon"></i>
<i class="icon-logo"></i>
</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">導(dǎo)航列表</a></li>
<li><a href="#">導(dǎo)航列表</a></li>
<li><a href="#">導(dǎo)航列表</a></li>
<li><a href="#">導(dǎo)航列表</a></li>
<li><a href="#">導(dǎo)航列表</a></li>
<li><a href="#">導(dǎo)航列表</a></li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-sm">
<li><a href="#">個(gè)人中心</a></li>
</ul>
</div>
</nav>
Bootstrap擴(kuò)展
- 通過(guò)bootstrap文檔對(duì)導(dǎo)航條樣式的設(shè)置發(fā)現(xiàn)乍炉，其實(shí)本身是有一個(gè)類似于主題的概念
- navbar-default：默認(rèn)的外觀
- navbar-inverse：暗色背景的樣式
- 所以我們希望可以通過(guò)自定義一套完整的風(fēng)格（繼承navbar-default）：
- navbar-xxx
- 示例代碼 :
.navbar-xxx{
...
}
具體代碼參考官網(wǎng)navbar-default實(shí)現(xiàn)即可
菜單行高調(diào)整
- 默認(rèn)樣式中菜單的行高為20px绢片，我們可以調(diào)整為自己想要的高度
- 一般都是通過(guò)自己的樣式去覆蓋
響應(yīng)式菜單
- 默認(rèn)菜單是不具備響應(yīng)式的能力的，通過(guò)觀察文檔發(fā)現(xiàn)岛琼，響應(yīng)式菜單是通過(guò)一個(gè)按鈕控制的
- 示例代碼 :
<nav class="navbar navbar-default navbar-xmg navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- 點(diǎn)擊該按鈕會(huì)切換菜單的顯示或隱藏 -->
<button id="btn" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav_list" aria-expanded="false">
<span class="sr-only">切換菜單</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<i class="icon-icon"></i>
<i class="icon-logo"></i>
</a>
</div>
<div id="nav_list" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">導(dǎo)航列表</a></li>
<li><a href="#">導(dǎo)航列表</a></li>
<li><a href="#">導(dǎo)航列表</a></li>
<li><a href="#">導(dǎo)航列表</a></li>
<li><a href="#">導(dǎo)航列表</a></li>
<li><a href="#">導(dǎo)航列表</a></li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-sm">
<li><a href="#">更多信息</a></li>
</ul>
</div>
</div>
</nav>
輪播圖
Bootstrap JS插件使用
- 對(duì)于Bootstrap的JS插件
- 我們只需要將文檔實(shí)例中的代碼粘到我們自己的代碼中
- 讓后作出相應(yīng)的樣式調(diào)整
Bootstrap中輪播圖插件叫作Carousel
基本的輪播圖實(shí)現(xiàn)
- 示例代碼 :
<!--
以下容器就是整個(gè)輪播圖組件的整體底循，
注意該盒子必須加上 class="carousel slide" data-ride="carousel" 表示當(dāng)前是一個(gè)輪播圖
bootstrap.js會(huì)自動(dòng)為當(dāng)前元素添加圖片輪播的特效
-->
<div id="輪播圖的ID" class="carousel slide" data-ride="carousel">
<!-- ol標(biāo)簽是圖片輪播的控制點(diǎn) -->
<ol class="carousel-indicators">
<!--
每一個(gè)li就是一個(gè)單獨(dú)的控制點(diǎn)
data-target屬性就是指定當(dāng)前控制點(diǎn)控制的是哪一個(gè)輪播圖，其目的是如果界面上有多個(gè)輪播圖槐瑞，便于區(qū)分到底控制哪一個(gè)
data-slide-to屬性是指當(dāng)前的li元素綁定的是第幾個(gè)輪播項(xiàng)
注意熙涤，默認(rèn)必須給其中某個(gè)li加上active，展示的時(shí)候就是焦點(diǎn)項(xiàng)目
-->
<li data-target="#輪播圖的ID" data-slide-to="0" class="active"></li>
<li data-target="#輪播圖的ID" data-slide-to="1"></li>
<!-- ...更多的 -->
</ol>
<!--
.carousel-inner是所有輪播項(xiàng)的容器盒子困檩，
注意role="listbox"代表當(dāng)前div是一個(gè)列表盒子祠挫，作用就是給當(dāng)前div添加一個(gè)語(yǔ)義
-->
<div class="carousel-inner" role="listbox">
<!-- 每一個(gè).item就是單個(gè)輪播項(xiàng)目，注意默認(rèn)要給第一個(gè)輪播項(xiàng)目加上active悼沿，表示為焦點(diǎn) -->
<div class="item active">
<!-- 輪播項(xiàng)目中展示的圖片 -->
<div class="carousel-caption">
<!-- 標(biāo)題或說(shuō)明性文字等舔，如果不需要，直接刪除當(dāng)前div.carousel-caption -->
</div>
</div>
<div class="item">
<!-- ... -->
</div>
<!-- ... -->
</div>
<!-- 圖片輪播上左右兩個(gè)控制按鈕糟趾，分別點(diǎn)擊可以滾動(dòng)到上一張和下一張 -->
<!-- 此處需要注意的是 該a鏈接的href屬性必須指向需要控制的輪播圖ID -->
<!-- 另外a鏈接中的data-slide="prev"代表點(diǎn)擊該鏈接會(huì)滾到上一張慌植，如果設(shè)置為next的話則相反 -->
<a class="left carousel-control" href="#輪播圖的ID" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">上一張</span>
</a>
<a class="right carousel-control" href="#輪播圖的ID" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">下一張</span>
</a>
</div>
由于輪播圖片超寬造成的影響
- 一個(gè)超寬的圖片在容器中居中顯示：
- position方式
- background方式 通過(guò)背景圖的定位方式
- 美工為了在不同屏幕下更好地展示將圖片兩邊做的非常寬，但是我們大多數(shù)情況的頁(yè)面寬度都無(wú)法滿足這樣的圖片寬度
- 而且Bootstrap的樣式中默認(rèn)將圖片的max-width設(shè)置為100%义郑；
- 造成界面圖片縮放
- 想在一個(gè)較小屏幕下展示一個(gè)超寬的圖片蝶柿，并讓圖片居中顯示
三種辦法：
1.換用背景圖的方式，background-position: center center;
2.使img元素絕對(duì)定位魔慷，left:50%只锭，margin-left: -width/2
3.translate方式
background使用
- 將容器的高度固定（比如 : 410px）
- 將輪播圖改為背景顯示
- 由于可能圖片的高度不一定是410px
- 所以需要設(shè)置css3中的background-size
background-size
-
length
如 background-size: 100px 100px，將背景圖固定到多大尺寸 -
percentage
如 background-size: 90% 90%院尔，以百分比的形式設(shè)置背景大小 - cover
1.背景圖片等比例縮放
2.讓背景圖相對(duì)較小邊放大到目標(biāo)容器大小結(jié)束
3.如：一張100*200的背景圖放到一個(gè)300*400的盒子中蜻展，最終背景圖片的大小是300*600
4.因?yàn)楸尘皥D的較小邊為100，將100放大到目標(biāo)容器300的寬度邀摆，放大了3倍纵顾，最終結(jié)果300*600
- contain
1.背景圖片等比例縮放
2.讓背景圖相對(duì)較大邊放大到目標(biāo)容器大小結(jié)束
3.如：一張100*200的背景圖放到一個(gè)300*400的盒子中，最終背景圖片的大小是200*400
4.因?yàn)楸尘皥D的較大邊為200栋盹，將200放大到目標(biāo)容器400的高度施逾，放大了2倍，最終結(jié)果200*400
圖片響應(yīng)式
- 各種終端都需要正常顯示圖片
- 移動(dòng)端應(yīng)該使用更欣瘛（體積）的圖片
- 實(shí)現(xiàn)方式
1.將元素中直接設(shè)置的圖片背景刪除汉额，換成兩個(gè)data-屬性（如：data-img-sm="小圖路徑"，data-img-lg="大圖路徑"）
2.通過(guò)JS的方式獲取屏幕的寬度榨汤；
3.判斷屏幕寬度是否小于一定的值（如：768）
4.根據(jù)判斷情況決定使用具體的大圖還是小圖
- 示例代碼 :
// 獲取屏幕寬度
var windowWidth = $(window).width();
// 判斷屏幕屬于大還是小
var isSmallScreen = windowWidth < 768;
// 根據(jù)大小為界面上的每一張輪播圖設(shè)置背景
// $('#main_ad > .carousel-inner > .item') // 獲取到的是一個(gè)DOM數(shù)組（多個(gè)元素）
$('#main_ad > .carousel-inner > .item').each(function(i, item) {
// 因?yàn)槟玫绞荄OM對(duì)象 需要轉(zhuǎn)換
var $item = $(item);
// var imgSrc = $item.data(isSmallScreen ? 'image-xs' : 'image-lg');
var imgSrc =
isSmallScreen ? $item.data('image-xs') : $item.data('image-lg');
// 設(shè)置背景圖片
$item.css('backgroundImage', 'url("' + imgSrc + '")');
});
window resize事件
- 由于上一步我們實(shí)現(xiàn)的過(guò)程是指在頁(yè)面加載完成判斷一次蠕搜，
- 當(dāng)用戶手動(dòng)調(diào)整頁(yè)面寬度過(guò)后沒(méi)有及時(shí)發(fā)生變化，
- 所以我們可以通過(guò)window的resize事件中重新完成以上操作來(lái)解決這個(gè)問(wèn)題
- 示例代碼 :
function 窗口變化后執(zhí)行的函數(shù)名(){
// 具體的操作
}
$(window).on('resize', 窗口變化后執(zhí)行的函數(shù)名);
- 這個(gè)事件只會(huì)在窗口尺寸發(fā)生變化后執(zhí)行收壕，但是我們需要一開始時(shí)執(zhí)行一次
- 示例代碼 :
...
$(window).on('resize', 窗口變化后執(zhí)行的函數(shù)名).trigger('resize');
小圖片不需要使用背景的方式
- 小圖如果還是使用背景的方式妓灌，當(dāng)屏幕特別小時(shí)轨蛤，效果很差
- 所以當(dāng)使用小圖時(shí)，改用img的方式
- 示例代碼 :
// 因?yàn)槲覀冃枰D時(shí) 尺寸等比例變化虫埂，所以小圖時(shí)我們使用img方式
if (isSmallScreen) {
$item.html('');
} else {
$item.empty();
}
- 按照目前的情況祥山，如果是小圖展示則不需要給容器加上410px的固定高度
- 所以我們可以通過(guò)CSS媒體查詢的方式解決
- 示例代碼 :
#main_ad > .carousel-inner > .item {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
@media (min-width: 768px) {
#main_ad > .carousel-inner > .item {
height: 410px;
}
}
#main_ad > .carousel-inner > .item > img {
width: 100%;
}
響應(yīng)式輔助類型
- 整個(gè)板塊在超小屏幕下是隱藏起來(lái)的
- 只需要給當(dāng)前板塊加上hidden-xs的class
預(yù)置界面組件
- 導(dǎo)航
- 導(dǎo)航條
- 面包屑導(dǎo)航
- 下拉菜單
- 按鈕式下拉菜單
- 按鈕組
- 輸入框組
- 警告框
- 頁(yè)頭
- 分頁(yè)
- 列表組
- 面板
- 媒體對(duì)象
- 進(jìn)度條
- Glyphicons
- 標(biāo)簽
- 徽章
- 縮略圖
- 大屏幕
- 嵌入內(nèi)容
- 內(nèi)嵌
JavaScript插件 -- 內(nèi)置組件
- 模態(tài)對(duì)話框
- 下拉菜單
- 滾動(dòng)監(jiān)聽
- 標(biāo)簽頁(yè)
- 工具提示
- 彈出框
- 警告框
- 按鈕
- 折疊面板
- 輪播圖
- 吸頂效果
- data-spy="affix"
- data-offset-top="什么位置出現(xiàn)"
- data-offset-bottom="什么位置消失"
