Bootstrap项目实战之子栏目资讯内容


Posted in Javascript onApril 25, 2016

本文我们制作一下子栏目资讯内容,供大家参考,具体内容如下

谷歌浏览器解析的顺序调整,需要全部加载后执行

$(window).load(function() {
 $('.text').eq(0).css('margin-top', ($('.auto').eq(0).height() - $('.text').eq(0).height()) / 2 + 'px');
});

注:对于 Firefox 浏览器,可以按 Ctrl+Shift+M,调整移动端尺寸。
子栏目标题

<div class="jumbotron">
 <div class="container">
  <hgroup>
   <h1>资讯</h1>
   <h4>企业内训的最新动态、资源等...</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;
}

资讯内容

<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>广电总局发布 TVOS2.0 华为阿里参与研发</h4>
       <p class="hidden-xs">
        TVOS2.0 是在 TVOS1.0 与华为 MediaOS 及阿里巴巴 YunOS 融合的基础上,打造的新一代智能电视操作系统。华为主要承担开发工作,内置的电视购物商城由阿里方面负责。
       </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>标题</h4>
       <p>
        admin 15 / 10 / 11
       </p>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>

资讯内容 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;
}

对于.info-content h4,在中屏和大屏需要保持一行。

.info-content h4 {
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是Bootstrap制作子栏目资讯内容的想关代码,希望大家喜欢。

Javascript 相关文章推荐
javascript void(0)的妙用
Oct 21 Javascript
jQuery操作cookie方法实例教程
Nov 25 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
如何让你的JS代码更好看易读
Dec 01 Javascript
实例讲解v-if和v-show的区别
Jan 31 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
vue实现循环滚动列表
Jun 30 Javascript
JS数据类型判断的几种常用方法
Jul 07 Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 #Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 #Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 #Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 #Javascript
下雪了 javascript实现雪花飞舞
Aug 02 #Javascript
基于node实现websocket协议
Apr 25 #Javascript
Bootstrap每天必学之导航组件
Apr 25 #Javascript
You might like
做一个有下拉功能的留言版
2006/10/09 PHP
php生成缩略图的类代码
2008/10/02 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
php去掉文件前几行的方法
2015/07/29 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
初识ThinkPHP控制器
2016/04/07 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
vue路由前进后退动画效果的实现代码
2018/12/10 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
python实现逻辑回归的方法示例
2017/05/02 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
小学生自我鉴定
2013/10/12 职场文书
汽车工程专业应届生求职信
2013/10/19 职场文书
司机岗位职责
2013/11/15 职场文书
集体生日活动方案
2014/08/18 职场文书
家庭教育的心得体会
2014/09/01 职场文书
无罪辩护词范文
2015/05/21 职场文书
李强感恩观后感
2015/06/17 职场文书
小学运动会开幕词
2016/03/04 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
frg-100简单操作(设置)说明
2022/04/05 无线电
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android