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 相关文章推荐
让你的网站可编辑的实现js代码
Oct 19 Javascript
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
javascript元素动态创建实现方法
May 13 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 Javascript
微信小程序和百度的语音识别接口详解
May 06 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 Javascript
JavaScript流程控制(循环)
Dec 06 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
在 PHP 中使用随机数的三个步骤
2006/10/09 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
浏览器常用高宽的jquery插件
2011/02/24 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
js和as的稳定传值问题解决
2013/07/14 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
详解javascript void(0)
2020/07/13 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
详解python中init方法和随机数方法
2019/03/13 Python
python反编译学习之字节码详解
2019/05/19 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
工作自荐信
2013/12/11 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers
python读取mat文件生成h5文件的实现
2022/07/15 Python