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 相关文章推荐
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
JavaScript实现x秒后自动跳转到一个页面
Jan 03 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
hammer.js实现图片手势放大效果
Aug 29 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
layUI实现前端分页和后端分页
Jul 27 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
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
js select常用操作控制代码
2010/03/16 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
javascript中的return和闭包函数浅析
2014/06/06 Javascript
js取得html iframe中的元素和变量值
2014/06/30 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
canvas知识总结
2017/01/25 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
python读取注册表中值的方法
2013/04/08 Python
Django实现快速分页的方法实例
2017/10/22 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
优秀毕业生求职信范文
2014/01/02 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
公司员工安全协议书
2014/11/21 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
活动宣传稿范文
2015/07/23 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript
ES6 解构赋值的原理及运用
2021/05/25 Javascript
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers