Bootstrap項(xiàng)目實(shí)戰(zhàn)之子欄目資訊內(nèi)容
本文我們制作一下子欄目資訊內(nèi)容,供大家參考,具體內(nèi)容如下
谷歌瀏覽器解析的順序調(diào)整,需要全部加載后執(zhí)行
$(window).load(function() {
$('.text').eq(0).css('margin-top', ($('.auto').eq(0).height() - $('.text').eq(0).height()) / 2 + 'px');
});
注:對(duì)于 Firefox 瀏覽器,可以按 Ctrl+Shift+M,調(diào)整移動(dòng)端尺寸。
子欄目標(biāo)題
<div class="jumbotron"> <div class="container"> <hgroup> <h1>資訊</h1> <h4>企業(yè)內(nèi)訓(xùn)的最新動(dòng)態(tài)、資源等...</h4> </hgroup> </div> </div>
欄目 CSS
.jumbotron {
margin: 50px 0 0 0;
padding: 60px 0;
background: #ccc url(../img/bg.jpg);
color: #ccc;
}
.jumbotron h1 {
font-size: 26px;//768,30; 992,33; 1200,36;
padding: 0 0 0 20px;
}
.jumbotron h4 {
font-size: 16px;//768,16; 992,17; 1200,18
padding: 0 0 0 20px;
}
資訊內(nèi)容
<div id="information">
<div class="container">
<div class="row">
<div class="col-md-8 info-left">
<div class="container-fluid" style="padding:0;">
<div class="row info-content">
<div class="col-md-5 col-sm-5 col-xs-5">
<img src="img/info1.jpg"
class="img-responsive" alt="">
</div>
<div class="col-md-7 col-sm-7 col-xs-7">
<h4>廣電總局發(fā)布 TVOS2.0 華為阿里參與研發(fā)</h4>
<p class="hidden-xs">
TVOS2.0 是在 TVOS1.0 與華為 MediaOS 及阿里巴巴 YunOS 融合的基礎(chǔ)上,打造的新一代智能電視操作系統(tǒng)。華為主要承擔(dān)開(kāi)發(fā)工作,內(nèi)置的電視購(gòu)物商城由阿里方面負(fù)責(zé)。
</p>
<p>
admin 15 / 10 / 11
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 info-right hidden-xs hidden-sm">
<blockquote>
<h2>熱門資訊</h2>
</blockquote>
<div class="container-fluid">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5"
style="margin:12px 0;padding:0;">
<img src="img/info3.jpg"
class="img-responsive" alt="">
</div>
<div class="col-md-7 col-sm-7 col-xs-7"
style="padding-right:0">
<h4>標(biāo)題</h4>
<p>
admin 15 / 10 / 11
</p>
</div>
</div>
</div>
</div>
</div>
</div>
資訊內(nèi)容 CSS
#information {
padding: 40px 0;
background: #eee;
}
.info-right {
background-color: #fff;
box-shadow: 2px 2px 3px #ccc;
}
.info-right blockquote {
padding: 0;
margin: 0;
}
.info-right h2 {
font-size: 20px;
padding: 5px;
}
.info-right h4 {
line-height: 1.6;
}
.info-content {
background-color: #fff;
box-shadow: 2px 2px 3px #ccc;
margin: 0 0 20px 0;
}
.info-content img {
margin: 12px 0;
}
.info-content h4 {
font-size: 14px;//768,16; 992,18; 1200,20;
padding: 2px 0 0 0;
}
.info-content p {
line-height: 1.6;
color: #666;
}
對(duì)于.info-content h4,在中屏和大屏需要保持一行。
.info-content h4 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個(gè)精彩的專題:
以上就是Bootstrap制作子欄目資訊內(nèi)容的想關(guān)代碼,希望大家喜歡。
- JS表格組件神器bootstrap table詳解(基礎(chǔ)版)
- JS組件Bootstrap實(shí)現(xiàn)彈出框和提示框效果代碼
- bootstrap table 服務(wù)器端分頁(yè)例子分享
- Bootstrap樹(shù)形控件使用方法詳解
- 頁(yè)面遮罩層,并且阻止頁(yè)面body滾動(dòng)。bootstrap模態(tài)框原理
- 完美實(shí)現(xiàn)bootstrap分頁(yè)查詢
- 全面解析Bootstrap圖片輪播效果
- Bootstrap Table使用方法詳解
- Bootstrap每天必學(xué)之導(dǎo)航條
- 值得分享和收藏的Bootstrap學(xué)習(xí)教程
相關(guān)文章
Phaser.js實(shí)現(xiàn)簡(jiǎn)單的跑酷游戲附源碼下載
這篇文章主要介紹了Phaser.js實(shí)現(xiàn)簡(jiǎn)單的跑酷游戲附源碼下載,需要的朋友可以參考下2018-10-10
用window.onerror捕獲并上報(bào)Js錯(cuò)誤的方法
這篇文章主要介紹了用window.onerror捕獲并上報(bào)Js錯(cuò)誤的方法,需要的朋友可以參考下2016-01-01
JS+JQuery實(shí)現(xiàn)無(wú)縫連接輪播圖
這篇文章主要介紹了JS+JQuery實(shí)現(xiàn)無(wú)縫連接輪播圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12
JS+CSS實(shí)現(xiàn)精美的二級(jí)導(dǎo)航效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)精美的二級(jí)導(dǎo)航效果代碼,涉及JavaScript基于鼠標(biāo)事件動(dòng)態(tài)變換元素樣式的技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09
JS實(shí)現(xiàn)的自定義水平滾動(dòng)字體插件完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的自定義水平滾動(dòng)字體插件,以完整實(shí)例形式分析了javascript自定義水平滾動(dòng)字體插件的定義、原理與使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
使用DeviceOne實(shí)現(xiàn)微信小程序功能
本文主要對(duì)小程序的優(yōu)缺點(diǎn)和DeviceOne的特點(diǎn)進(jìn)行介紹,分享了使用DeviceOne實(shí)現(xiàn)微信小程序功能的實(shí)例代碼,具有一定的參考價(jià)值。下面跟著小編一起來(lái)看下吧2016-12-12
javascript 用原型繼承來(lái)實(shí)現(xiàn)對(duì)象系統(tǒng)
對(duì)象系統(tǒng)中的繼承特性有三種方式:基于類,基于原型,基于元類2010-03-03
javascript 兼容所有瀏覽器的DOM擴(kuò)展功能
技術(shù)文章寫(xiě)得少,所以有時(shí)候想寫(xiě)點(diǎn)什么卻下不了手,不知道該寫(xiě)什么;往往到了準(zhǔn)備要寫(xiě)的時(shí)候才發(fā)現(xiàn)自己想寫(xiě)的東西其實(shí)很無(wú)聊,甚至覺(jué)得很幼稚,于是又關(guān)掉了編緝器2012-08-08

