微金所項目實戰
1. 搭建Bootstrap頁面骨架及項目目錄結構
├─ /weijinsuo/ ··················· 項目所在目錄
└─┬─ /css/ ······················· 我們自己的CSS文件
├─ /font/ ······················ 使用到的字體文件
├─ /img/ ······················· 使用到的圖片文件
├─ /js/ ························ 自己寫的JS腳步
├─ /lib/ ······················· 從第三方下載回來的庫【只用不改】
├─ /favicon.ico ················ 站點圖標
└─ /index.html ················· 入口文件
1.1.約定編碼規范
1.1.1.HTML約定
- 在head中引入必要的CSS文件，優先引用第三方的CSS，方便我們自己的樣式覆蓋
- 在body末尾引入必要的JS文件，優先引用第三方的JS，注意JS文件之間的依賴關系，比如bootstrap.js依賴jQuery，那就應該先引用jquery.js 然后引用bootstrap.js
1.1.2.CSS約定
- 除了公共級別樣式，其余樣式全部由 模塊前綴
- 盡量使用 直接子代選擇器， 少用間接子代 避免錯殺
1.2.HTML5文檔結構
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>頁面標題</title>
</head>
<body>
</body>
</html>
1.3.Viewport設置
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
html中插入視口設置，可以通過emmet meta:vp 插入
1.4.瀏覽器兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=edge">
html中插入兼容模式設置，可以通過emmet meta:compat 插入
1.5.favicon（站點圖標）
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
html中插入圖標鏈接，可以通過emmet link:favicon 插入
1.6.引入相應的第三方文件
<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>
1.7.在我們默認的樣式表中將默認字體設置為：
body{
font-family: "Helvetica Neue",
Helvetica,
Microsoft Yahei,
Hiragino Sans GB,
WenQuanYi Micro Hei,
sans-serif;
}
2.完成頁面空結構
先划分好頁面中的大容器，然后在具體看每一個容器中單獨的情況
<body>
<!-- 頭部區域 -->
<header></header>
<!-- /頭部區域 -->
<!-- 廣告輪播 -->
<section></section>
<!-- /廣告輪播 -->
<!-- 特色介紹 -->
<section></section>
<!-- /特色介紹 -->
<!-- 立即預約 -->
<section></section>
<!-- /立即預約 -->
<!-- 產品推薦 -->
<section></section>
<!-- /產品推薦 -->
<!-- 新聞列表 -->
<section></section>
<!-- /新聞列表 -->
<!-- 合作伙伴 -->
<section></section>
<!-- /合作伙伴 -->
<!-- 腳注區域 -->
<footer></footer>
<!-- /腳注區域 -->
</body>
3.構建頂部通欄
<header>
<div class="topbar"></div>
</header>
3.1.container類
- 用於定義一個固定寬度且居中的版心
<div class="topbar">
<div class="container">
<!--
此處的代碼會顯示在一個固定寬度且居中的容器中
該容器的寬度會跟隨屏幕的變化而變化
-->
</div>
</div>
3.2.柵格系統
- Bootstrap中定義了一套響應式的網格系統，
- 其使用方式就是將一個容器划分成12列，
- 然后通過col-xx-xx的類名控制每一列的占比
3.2.1.row類
- 因為每一個列默認有一個15px的左右外邊距
- row類的一個作用就是通過左右-15px屏蔽掉這個邊距
<div class="container">
<div class="row"></div>
</div>
3.2.2.col-**-*類
- col-xs-[列數]：在超小屏幕下展示幾份
- col-sm-[列數]：在小屏幕下展示幾份
- col-md-[列數]：在中等屏幕下展示幾份
- col-lg-[列數]：在大屏幕下展示幾份
- xs : 超小屏幕 手機 (<768px)
- sm : 小屏幕 平板 (≥768px)
- md : 中等屏幕 桌面顯示器 (≥992px)
- lg : 大屏幕 大桌面顯示器 (≥1200px)
<div class="row">
<div class="col-md-2 text-center"></div>
<div class="col-md-5 text-center"></div>
<div class="col-md-2 text-center"></div>
<div class="col-md-3 text-center"></div>
</div>
此處頂部通欄已經被划分成四列
text-center的作用就是讓內部內容居中顯示
3.2.字體圖標
@font-face {
font-family: 'itcast';
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');
}
[class^="icon-"],
[class*=" icon-"] {
/*注意上面選擇器中間的空格*/
/*我們使用的名為itcast的字體就是上面的@font-face的方式聲明的*/
font-family: itcast;
font-style: normal;
}
.icon-mobilephone::before{
content: '\e908';
}
<div class="col-md-2 text-center">
<a class="mobile-link" href="#">
<i class="icon-mobile"></i>
<span>手機微金所</span>
<!-- 這里使用的是bootstrap中的字體圖標 -->
<i class="glyphicon glyphicon-chevron-down"></i>
<img src="..." alt="">
</a>
</div>
字體文件格式
- eot : embedded-opentype
- svg : svg
- ttf : truetype
- woff : woff
3.4.hover圖片展示
.mobile-link:hover > img {
display: block;
}
3.5.按鈕樣式生成
- http://blog.koalite.com/bbg/
- 可以通過界面生成一個新的按鈕樣式
.btn-itcast {
color: #ffffff;
background-color: #E92322;
border-color: #DB3B43;
}
.btn-itcast:hover,
.btn-itcast:focus,
.btn-itcast:active,
.btn-itcast.active,
.open .dropdown-toggle.btn-itcast {
color: #ffffff;
background-color: #E92322;
border-color: #DB3B43;
}
.btn-itcast:active,
.btn-itcast.active,
.open .dropdown-toggle.btn-itcast {
background-image: none;
}
.btn-itcast.disabled,
.btn-itcast[disabled],
fieldset[disabled] .btn-itcast,
.btn-itcast.disabled:hover,
.btn-itcast[disabled]:hover,
fieldset[disabled] .btn-itcast:hover,
.btn-itcast.disabled:focus,
.btn-itcast[disabled]:focus,
fieldset[disabled] .btn-itcast:focus,
.btn-itcast.disabled:active,
.btn-itcast[disabled]:active,
fieldset[disabled] .btn-itcast:active,
.btn-itcast.disabled.active,
.btn-itcast[disabled].active,
fieldset[disabled] .btn-itcast.active {
background-color: #E92322;
border-color: #DB3B43;
}
.btn-itcast .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 : 在某種屏幕尺寸下顯示
4.導航通欄
- 在使用了boostrap過后，大多數界面元素都是通過bootstrap提供好的界面組件修改得來
<nav class="navbar navbar-itcast navbar-static-top">
<div class="container">
<div class="navbar-header">
<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="#">我要投資</a></li>
<li><a href="#">我要借款</a></li>
<li><a href="#">平台介紹</a></li>
<li><a href="#">新手專區</a></li>
<li><a href="#">最新動態</a></li>
<li><a href="#">微論壇</a></li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-sm">
<li><a href="#">個人中心</a></li>
</ul>
</div>
</div>
</nav>
4.1.Bootstrap擴展
- 通過bootstrap文檔對導航條樣式的設置發現，其實本身是有一個類似於主題的概念
- navbar-default：默認的外觀
- navbar-inverse：暗色背景的樣式
- 所以我們希望可以通過自定義一套完整的風格：
- navbar-itcast
.navbar-itcast{
...
}
...具體代碼參考navbar-default實現即可
4.2.品牌logo
- 任然使用字體圖標
4.3.菜單行高調整
- 默認樣式中菜單的行高為20px，我們可以調整為自己想要的高度
- 一般都是通過自己的樣式去覆蓋
5.輪播圖
5.1.Bootstrap JS插件使用
對於Bootstrap的JS插件，我們只需要將文檔實例中的代碼粘到我們自己的代碼中
讓后作出相應的樣式調整
5.1.1.Bootstrap中輪播圖插件叫作Carousel
5.1.2.基本的輪播圖實現
<!--
以下容器就是整個輪播圖組件的整體，
注意該盒子必須加上 class="carousel slide" data-ride="carousel" 表示當前是一個輪播圖
bootstrap.js會自動為當前元素添加圖片輪播的特效
-->
<div id="輪播圖的ID" class="carousel slide" data-ride="carousel">
<!-- ol標簽是圖片輪播的控制點 -->
<ol class="carousel-indicators">
<!--
每一個li就是一個單獨的控制點
data-target屬性就是指定當前控制點控制的是哪一個輪播圖，其目的是如果界面上有多個輪播圖，便於區分到底控制哪一個
data-slide-to屬性是指當前的li元素綁定的是第幾個輪播項
注意，默認必須給其中某個li加上active，展示的時候就是焦點項目
-->
<li data-target="#輪播圖的ID" data-slide-to="0" class="active"></li>
<li data-target="#輪播圖的ID" data-slide-to="1"></li>
<!-- ...更多的 -->
</ol>
<!--
.carousel-inner是所有輪播項的容器盒子，
注意role="listbox"代表當前div是一個列表盒子，作用就是給當前div添加一個語義
-->
<div class="carousel-inner" role="listbox">
<!-- 每一個.item就是單個輪播項目，注意默認要給第一個輪播項目加上active，表示為焦點 -->
<div class="item active">
<!-- 輪播項目中展示的圖片 -->
<img src="example.jpg" alt="示例圖片">
<div class="carousel-caption">
<!-- 標題或說明性文字，如果不需要，直接刪除當前div.carousel-caption -->
</div>
</div>
<div class="item">
<!-- ... -->
</div>
<!-- ... -->
</div>
<!-- 圖片輪播上左右兩個控制按鈕，分別點擊可以滾動到上一張和下一張 -->
<!-- 此處需要注意的是 該a鏈接的href屬性必須指向需要控制的輪播圖ID -->
<!-- 另外a鏈接中的data-slide="prev"代表點擊該鏈接會滾到上一張，如果設置為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>
5.1.3.由於輪播圖片超寬造成的影響
- 美工為了在不同屏幕下更好地展示將圖片兩邊做的非常寬，但是我們大多數情況的頁面寬度都無法滿足這樣的圖片寬度
- 而且Bootstrap的樣式中默認將圖片的max-width設置為100%；
- 造成界面圖片縮放
- 想在一個較小屏幕下展示一個超寬的圖片，並讓圖片居中顯示
- 兩種辦法：
- 換用背景圖的方式，background-position: center center;
- 使img元素絕對定位，left:50%，margin-left: -width/2
5.2.background使用
- 將容器的高度固定（410px）
- 將輪播圖改為背景顯示
- 由於可能圖片的高度不一定是410px
- 所以需要設置css3中的background-size
5.2.1.background-size
- length
- 如 background-size: 100px 100px，將背景圖固定到多大尺寸
- percentage
- 如 background-size: 90% 90%，以百分比的形式設置背景大小
- cover
- 1.背景圖片等比例縮放
- 2.讓背景圖相對較小邊放大到目標容器大小結束
- 如：一張100*200的背景圖放到一個300*400的盒子中，最終背景圖片的大小是300*600
- 因為背景圖的較小邊為100，將100放大到目標容器300的寬度，放大了3倍，最終結果300*600
- contain
- 1.背景圖片等比例縮放
- 2.讓背景圖相對較大邊放大到目標容器大小結束
- 如：一張100*200的背景圖放到一個300*400的盒子中，最終背景圖片的大小是200*400
- 因為背景圖的較大邊為200，將200放大到目標容器400的高度，放大了2倍，最終結果200*400
demo
cover
contain
5.3.圖片響應式
- 目的
- 各種終端都需要正常顯示圖片
- 移動端應該使用更小（體積）的圖片
- 實現方式
- 將元素中直接設置的圖片背景刪除，換成兩個data-屬性（如：data-img-sm=”小圖路徑”，data-img-lg=”大圖路徑”）
- 通過JS的方式獲取屏幕的寬度；
- 判斷屏幕寬度是否小於一定的值（如：768）
- 根據判斷情況決定使用具體的大圖還是小圖
// 獲取屏幕寬度
var windowWidth = $(window).width();
// 判斷屏幕屬於大還是小
var isSmallScreen = windowWidth < 768;
// 根據大小為界面上的每一張輪播圖設置背景
// $('#main_ad > .carousel-inner > .item') // 獲取到的是一個DOM數組（多個元素）
$('#main_ad > .carousel-inner > .item').each(function(i, item) {
// 因為拿到是DOM對象 需要轉換
var $item = $(item);
// var imgSrc = $item.data(isSmallScreen ? 'image-xs' : 'image-lg');
var imgSrc =
isSmallScreen ? $item.data('image-xs') : $item.data('image-lg');
// 設置背景圖片
$item.css('backgroundImage', 'url("' + imgSrc + '")');
});
5.4.window resize事件
- 由於上一步我們實現的過程是指在頁面加載完成判斷一次，
- 當用戶手動調整頁面寬度過后沒有及時發生變化，
- 所以我們可以通過window的resize事件中重新完成以上操作來解決這個問題
function 窗口變化后執行的函數名(){
// 具體的操作
}
$(window).on('resize', 窗口變化后執行的函數名);
- 這個事件只會在窗口尺寸發生變化后執行，但是我們需要一開始時執行一次
...
$(window).on('resize', 窗口變化后執行的函數名).trigger('resize');
5.5.小圖片不需要使用背景的方式
- 小圖如果還是使用背景的方式，當屏幕特別小時，效果很差
- 所以當使用小圖時，改用img的方式
// 因為我們需要小圖時 尺寸等比例變化，所以小圖時我們使用img方式
if (isSmallScreen) {
$item.html('<img src="' + imgSrc + '" alt="" />');
} else {
$item.empty();
}
- 按照目前的情況，如果是小圖展示則不需要給容器加上410px的固定高度
- 所以我們可以通過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%;
}
6.網站特性
6.1.網格系統
- 該板塊當屏幕為中等尺寸時分為3列，較小屏幕是分為2列
- 所以使用網格系統划分
<div class="col-sm-6 col-md-4">
<!-- ... -->
</div>
<!-- ... -->
6.2.媒體對象樣式
- 每一個小塊的樣式可以通過Bootstrap中的媒體對象樣式實現
<a href="#">
<div class="media">
<div class="media-left">
<i class="icon-uniE907"></i>
</div>
<div class="media-body">
<h4 class="media-heading">支付交易保障</h4>
<p>銀聯支付全稱保證支付安全</p>
</div>
</div>
</a>
6.3.響應式輔助類型
- 整個板塊在超小屏幕下是隱藏起來的
- 只需要給當前板塊加上hidden-xs的class
7.預約投標
7.1.pull-left
- 左邊文字段落
7.2.pull-right
- 右邊文字段落
8.投資產品
8.1.Tab選項卡
選項卡功能可以通過Bootstrap中提供的相應組件實現
http://v3.bootcss.com/javascript/#tabs
<div class="container">
<!-- 所有的選項卡標簽，每個標簽點擊分別對應面板展示出來 -->
<ul class="nav nav-tabs" role="tablist">
<!--
下面的li定義了一個選項卡的標簽，其中a標簽的href屬性指向的就是對應要展開的面板ID
aria-controls屬性是說當前a鏈接控制的是哪個元素（注意此屬性和功能無關，只是語義）
注意一定要給a標簽加上data-toggle="tab"，如果不加則boostrap無法知道這是一個選項卡標簽，也就不會有相應的效果
-->
<li role="presentation" class="active"><a href="#第一個標簽的ID" aria-controls="第一個標簽的ID" role="tab" data-toggle="tab">標簽頁1</a></li>
<li role="presentation"><a href="#第二個標簽的ID" aria-controls="第二個標簽的ID" role="tab" data-toggle="tab">標簽頁2</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- .tab-pane定義當前是一個tab面板，通過id和選項卡標簽關聯起來 -->
<div role="tabpanel" class="tab-pane active" id="第一個標簽的ID">
<!-- 標簽展開后的內容 -->
</div>
<div role="tabpanel" class="tab-pane" id="第二個標簽的ID">...</div>
</div>
</div>
8.2.網格系統
- 和網站特色板塊的網格系統定義一樣
8.3.::before ::after
.panel-czbk > .panel-heading::before,
.panel-czbk > .panel-heading::after {
content: ' ';
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #f0f0f0;
position: absolute;
}
.panel-czbk > .panel-heading::before {
top: -8px;
left: -8px;
}
.panel-czbk > .panel-heading::after {
bottom: -8px;
left: -8px;
box-shadow: 0 2px 1px #ccc inset;
}
8.5.tooltip插件
- 注意，bootstrap中的tooltip插件必須通過js方式初始化
8.6.選項卡標簽橫向滾動
- 要給ul加一個容器，這個容器有橫向滾動條
- 動態設置ul的寬度，寬度是根據內容大小決定的
width= sum (li.width)
9.新聞資訊
9.1.Tab選項卡
9.2.響應式偏移
10.合作伙伴
10.1.相鄰兄弟選擇器
11.登錄對話框
11.1模態框
11.2表單樣式
12.導航吸頂
12.1.affix組件
13.深度自定義
13.1.http://v3.bootcss.com/customize
13.2.通過 Less 文件修改
14.version 4
http://www.cnblogs.com/micua/p/bootstrap-version4-alpha.html