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 相关文章推荐
JQuery 解析多维的Json数据格式
Nov 02 Javascript
js 函数调用模式小结
Dec 26 Javascript
JavaScript设计模式之工厂方法模式介绍
Dec 28 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
js实现数组转换成json
Jun 26 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
微信小程序开发之实现自定义Toast弹框
Jun 08 Javascript
vue数据双向绑定的注意点
Jun 23 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
深入浅析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批量生成随机用户名
2008/07/10 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
JavaScript修改css样式style
2008/04/15 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
javascript实现数独解法
2015/03/14 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
Python自定义线程类简单示例
2018/03/23 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
Django models.py应用实现过程详解
2019/07/29 Python
python开头的coding设置方法
2019/08/08 Python
Django 查询数据库并返回页面的例子
2019/08/12 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
Python 求数组局部最大值的实例
2019/11/26 Python
python 字段拆分详解
2019/12/17 Python
Python logging模块handlers用法详解
2020/08/14 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
一套Delphi的笔试题一
2016/02/14 面试题
学校端午节活动方案
2014/08/23 职场文书
学生会副主席竞选稿
2015/11/19 职场文书