【練習】響應式工具bootstrap

1.微金所頂部通欄（響應式工具bootstrap）

現在api中複制基本模版

<!DOCTYPE html>

<html >

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

//以下是自己寫的

//全局css樣式——栅格系統

<div class="header hidden-xs hidden-sm hidden-md"> hidden-xs隐藏極小螢幕，hidden-sm隐藏小螢幕，

hidden-md隐藏中螢幕（響應式工具中）

<div class="container-fluid"> row必須包含在.container（固定寬度）或.container-fluid（100% 寬度）中

<div class="col-lg-2"> 一行一共有12份，col-lg-2指大螢幕中占兩份，若螢幕寬度小于1200，會自動占一行

<span class="glyphicon glyphicon-phone"></span> glyphicon glyphicon-phone是bootstrap中的文字圖示

手機微金所

</a>

</div>

4006-89-4006（服務時間：9:00-21:00)

</a>

</div>

</div>

</div>

</body>

</html>

index.css

.header .row>div{

line-height: 40px; 給.header或者.header .row>div高度都不能讓盒子高度變成40，隻能line-height

border: 1px solid grey;

text-align: center;

}

.header .row>div a{

font-size: 12px;

color: grey;

}

.header .row>div:nth-child(n+3) a{

margin-left: 10px;

}

.header .row>div:first-child a{

position: relative;

}

.header .row>div:first-child a img{

display: none;

position: absolute;

top: 25px;

left: -18px;

}

.header .row>div:first-child a:hover img{

display: block;

}

2.導航欄

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 需要把按鈕的位置改一下margin-top=25px;

<span class="sr-only">Toggle navigation</span>

</button>

<span class="wjsfont wjsfont-logo"></span> 加了兩個文字圖示

</a>

</div>

<li class="active"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >我要咨詢<span class="sr-only">(current)</span></a></li>

</ul>

</ul>

</div>

</div>

</nav>

base.css

@font-face {

font-family: 'wjsfont';

src: url('../fonts/MiFie-Web-Font.eot');

src: url('../fonts/MiFie-Web-Font.eot?#iefix') format('embedded-opentype'),

url('../fonts/MiFie-Web-Font.woff') format('woff'),

url('../fonts/MiFie-Web-Font.ttf') format('truetype'),

url('../fonts/MiFie-Web-Font.svg#glyphicons_halflingsregular') format('svg');

}

.wjsfont {

position: relative;

top: 1px;

display: inline-block;

font-family: 'wjsfont';

font-style: normal;

font-weight: normal;

line-height: 1;

}

.wjsfont-logo::before{

content: '\e920';

}

.wjsfont-name::before{

content: '\e921';

}

index.css

.fox-default { 先把所有類名改掉

background-color: #f8f8f8;

border-color: #e7e7e7;

height: 80px; 直接把父盒子高度增加就可以了

}

.navbar-brand span{

font-size: 50px; 字型圖示放大

}

.wjsfont-logo{

color: red;

}

.wjsfont-name{

color: black;

}

.fox-default .navbar-nav > li > a {

color: #777;

line-height: 50px; 行高不是盒子的高度，因為有設定padding:15px，是以用80-15-15=50

}

.fox-default .navbar-nav > li > a:hover,

.fox-default .navbar-nav > li > a:focus {

color: #333;

background-color: transparent;

border-bottom: 3px solid red; 加一個下邊框

}

.fox-default .navbar-nav > .active > a,

.fox-default .navbar-nav > .active > a:hover,

.fox-default .navbar-nav > .active > a:focus {

color: #555;

active的顔色去掉，其實可以直接把active類名去掉

}

.fox-default .navbar-toggle {

border-color: #ddd;

margin-top: 25px; 将button向下移動25，在中間的位置

}

【練習】響應式工具bootstrap

繼續閱讀

關于禁用bootstrap響應式解決方法

bootstrap響應式嵌入元件

響應式前端架構Bootstrap系列（3）段落、文字相關

響應式前端架構Bootstrap系列（20）附加導航（Affix）插件

bootstrap(響應式，進度條，标題欄，字型圖示，分頁等等)

Bootstrap元件之進度條

iOS 手機的字型顯示不一樣

使用jsonp解決ajax請求json跨域問題

Metronic V4.5.2 Responsive Admin Dashboard Template build with Twitter Bootstrap 3.3.5

移動端H5實作圖檔上傳基礎知識圖檔上傳思路手機相容性問題上傳思路修改方案代碼實作多圖并發上傳單個圖檔上傳函數改進

django項目網易雲音樂

XSL常見問題及解決（一）如何實作給html中标簽li的id自動按序号命名

spring cloud在bootstrap.properties配置spring.profiles.active無效

Hplus架構動态添加頁籤功能(擴充)

AngularJS ng依賴注入的三種方式

【web素材】01-10款大氣的購物商城網站模闆