一游桩、自定義bootstrap按鈕
將生成對(duì)應(yīng)的樣式拷貝到對(duì)應(yīng)樣式表中桩皿，即可以使用；例如btn-login验游，使用時(shí)為: <a class='btn btn-login' role='button' href='#'></a>
二充岛、字體圖標(biāo)
-
使用普通圖片圖標(biāo)問題
- 位圖圖片不能很好地進(jìn)行縮放，當(dāng)圖片進(jìn)行放大時(shí)會(huì)失真（即變模糊）耕蝉，當(dāng)圖片進(jìn)行縮小時(shí)就會(huì)浪費(fèi)掉像素;
- 加載每一張圖片都需要進(jìn)行網(wǎng)絡(luò)請(qǐng)求(可以用精靈圖解決);
- 圖片如果需要修改樣式崔梗，需要圖片編輯器(例如PS)對(duì)圖片進(jìn)行編輯、處理等操作;
-
字體圖標(biāo)
圖標(biāo)當(dāng)成文字來使用時(shí)垒在，會(huì)有意想不到的效果蒜魄，它們只是一種形狀而已，好處:- 很容易任意地縮放;
- 很容易地改變顏色场躯；
- 很容易地產(chǎn)生陰影权悟；
- 可以擁有透明效果；
- 可以使用CSS來裝飾推盛；
- 可以快速轉(zhuǎn)化形態(tài)(如 :hover等)峦阁；
- 可以做出跟圖片一樣可以做的事情(改變透明度、旋轉(zhuǎn)度..)耘成；
- 本身體積更小榔昔，但攜帶的信息并沒有削減;
- 引入自己的字體
@font-face {
/* 定義字體名稱(必須)*/
font-family: 'zyz';
/* 字體文件的 URL(必須)*/
src: url('../fonts/MiFie-Web-Font.eot') format('embedded-opentype'), url('../fonts/MiFie-Web-Font.ttf') format('truetype'), url('../fonts/MiFie-Web-Font.woff') format('woff'), url('../fonts/MiFie-Web-Font.svg') format('svg');
/* 定義字體的樣,默認(rèn)是 "normal" (可選)*/
font-weight: normal;
/* 定義字體的粗細(xì)。默認(rèn)是 "normal"(可選)*/
font-style: normal;
}
- 使用字體圖標(biāo)
/* 字體圖標(biāo)類名以icon-開頭*/
[class^='icon-'],
[class*=' icon-'] {
font-family: 'zyz' !important;
font-style: normal;
}
/* 設(shè)置對(duì)應(yīng)的圖標(biāo)*/
.icon-mobile:before {
content: "\e908";
font-size: 13px;
}
為什么要用":before"形式瘪菌？
因?yàn)橹苯訉慔TML時(shí)要記住對(duì)應(yīng)的字符編碼撒会；而使用CSS時(shí)，將對(duì)應(yīng)字符編碼寫好师妙，需要用時(shí)直接用類名即可诵肛； (使用比較便捷)
三、谷歌瀏覽器開發(fā)工具
直接在瀏覽器中修改樣式默穴，會(huì)更為快捷怔檩，但修改的內(nèi)容和原文件時(shí)不同步的褪秀，所以就可以通過以下操作，將文件作一個(gè)關(guān)聯(lián)：
-
創(chuàng)建文件夾到工作空間
創(chuàng)建文件夾到工作空間 -
選擇對(duì)應(yīng)的工程目錄(瀏覽器會(huì)提示薛训，選擇允許此操作)
選擇對(duì)應(yīng)的工程目錄
已添加到工作空間 -
添加映射(即文件關(guān)聯(lián))
工程目錄描述
添加映射映射操作只需要做一次媒吗，其他文件是會(huì)自動(dòng)對(duì)應(yīng)上。添加完成之后乙埃，在瀏覽器中修改樣式闸英，就會(huì)同步到本地文件中。
四介袜、輪播圖
- 在較小的屏幕下顯示一張超寬大圖甫何，圖片居中方式
- 背景圖方式
background-position: center center；
- padding
left: 50%
margin: width/2
background-size: length|percentage|cover|contain;
- length(具體數(shù)值)
設(shè)置背景圖像的高度和寬度;
第一個(gè)值設(shè)置寬度遇伞，第二個(gè)值設(shè)置高度;
如果只設(shè)置一個(gè)值辙喂，則第二個(gè)值會(huì)被設(shè)置為 "auto";
例如 background-size: 200px 200px；
- percentage(百分比)
以父元素的百分比來設(shè)置背景圖像的寬度和高度赃额；
第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度叫确；
如果只設(shè)置一個(gè)值跳芳，則第二個(gè)值會(huì)被設(shè)置為 "auto"；
例如 background-size: 100% 100%竹勉；
- cover
把背景圖像擴(kuò)展至足夠大(以圖片最小邊為準(zhǔn)飞盆，拉到和盒子一樣)，以使背景圖像完全覆蓋背景區(qū)域次乓；
背景圖像的某些部分也許無法顯示在背景定位區(qū)域中吓歇；
例如 background-size: cover；
- contain
把圖像擴(kuò)展至最大尺寸(以圖片最大邊為準(zhǔn)票腰，縮放到和盒子一樣)城看，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域；
例如 background-size: contain杏慰；
<div class="item active" data-img-lg='img/slide_01_2000x410.jpg' data-img-xs='img/slide_01_640x340.jpg'></div>
// 獲取到自定義屬性
$item.data('img-lg');
// 當(dāng)窗口大小發(fā)生改變時(shí)觸發(fā)
$(window).on('resize', function(){ });
// 注冊(cè)完事件后测柠，如果想要立即觸發(fā)某個(gè)事件，可以通過trigger
$(window).on('resize', resize).trigger('resize');
相同樣式的缘滥，寫到css文件中轰胁，如果不同的一般直接是行內(nèi)樣式；
