热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

Bootstrap项目实战之资讯内容,本文主要学习制作一下子栏目资讯内容,感兴趣的小伙伴们可以参考一下

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

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

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

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

资讯

企业内训的最新动态、资源等...

栏目 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;
}

资讯内容

广电总局发布 TVOS2.0 华为阿里参与研发

admin 15 / 10 / 11

资讯内容 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学习教程

Bootstrap实战教程

Bootstrap插件使用教程

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


推荐阅读
  • 使用Bootstrap创建响应式渐变固定头部导航栏的方法
    本文详细介绍了如何利用Bootstrap框架构建一个具有渐变效果的固定顶部响应式导航栏,包括HTML结构、CSS样式以及JavaScript交互的完整实现过程。适合前端开发者和学习者参考。 ... [详细]
  • 本文介绍了如何在Angular CLI创建的项目中安装并配置Bootstrap,包括必要的依赖项jQuery和Popper.js的安装步骤。 ... [详细]
  • Bootstrap与Layui的主要差异分析
    在前端开发领域,Bootstrap与Layui是两种非常流行的框架选择。本文将深入探讨这两种框架的主要区别,帮助开发者根据项目需求做出最佳选择。 ... [详细]
  • 动画队列的设计目的是为了确保一系列任务能够按照预定顺序执行,每个任务只有在其前一个任务完成后才开始。这些任务既可以是同步的,也可以是异步的。本文将探讨jQuery动画系统中的队列机制,并介绍如何使用队列来优化动画效果。 ... [详细]
  • jQuery 1.4.4 已经发布,这是自 1.4.3 版本以来不到一个月的又一更新。本次更新主要集中在基于用户反馈的错误修复,并引入了一项新的功能。 ... [详细]
  • Django小实战——在线Web计算器(利用Bootstrap进行前端开发)
    Django小实战——在线Web计算器(利用Bootstrap进行前端开发),Go语言社区,Golang程序员人脉社 ... [详细]
  • 自定义文件上传按钮的实现方法
    HTML 提供了 `type=file` 的 input 元素用于文件上传功能,但其默认样式较为简陋。本文探讨了如何利用原生 JavaScript 结合 layui 和 bootstrap 的样式来美化文件上传按钮,提升用户体验。 ... [详细]
  • 本文探讨了Windows Presentation Foundation (WPF)如何通过扩展Microsoft Build Engine (MSBuild)来增强其构建能力,特别是在处理WPF特有的任务时。 ... [详细]
  • 探讨了button和a标签即使设置了相同的CSS样式,但显示宽度仍存在差异的原因及解决方案。 ... [详细]
  • 深入浅出:Java面向对象编程
    本文详细介绍了Java语言的核心特性——面向对象编程。探讨了Java的基本概念、平台无关性、丰富的内置类库及安全性,同时深入解析了类加载器、垃圾回收机制以及基本数据类型和其包装类。 ... [详细]
  • CSS3 鼠标样式详解:cursor: not-allowed 禁止手势
    本文详细介绍了 CSS3 中的 `cursor: not-allowed` 属性,该属性用于在用户无法执行特定操作时显示一个禁止手势。此外,还探讨了如何通过结合 `pointer-events: auto!important;` 来增强用户体验。 ... [详细]
  • 移动端浏览器为了识别用户的双击放大操作,通常会在点击后引入300毫秒的延迟。虽然这种延迟在日常使用中可能不易察觉,但对于需要即时响应的应用(如网页游戏)来说,消除这一延迟至关重要。 ... [详细]
  • 使用CSS与HTML构建动态图片墙
    本文介绍如何利用CSS和HTML创建一个动态响应的图片墙,特别适合在Firefox和Chrome浏览器中查看。通过简单的鼠标交互,用户可以放大浏览图片。 ... [详细]
  • Apollo入门指南
    Apollo是一个分布式配置中心,由服务端和客户端组成,支持配置的集中管理和动态更新。 ... [详细]
  • 深入理解Java类加载机制及安全防护
    本文探讨了Java类加载的过程,包括加载、验证、准备、解析和初始化五个阶段,并详细解释了每个阶段的具体操作和意义。此外,文章还讨论了Java如何通过双亲委派模型来保障核心API的安全性,以及在特定情况下如何打破这一机制。 ... [详细]
author-avatar
_i逗比_985
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有