热门标签 | 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制作子栏目资讯内容的想关代码,希望大家喜欢。


推荐阅读
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 本章将深入探讨移动 UI 设计的核心原则,帮助开发者构建简洁、高效且用户友好的界面。通过学习设计规则和用户体验优化技巧,您将能够创建出既美观又实用的移动应用。 ... [详细]
  • 深入理解ExtJS:从入门到精通
    本文详细介绍了ExtJS的功能及其在大型企业前端开发中的应用。通过实例和详细的文件结构解析,帮助初学者快速掌握ExtJS的核心概念,并提供实用技巧和最佳实践。 ... [详细]
  • Spring Boot 中静态资源映射详解
    本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理,包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文,您将了解如何高效地管理和引用静态资源。 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • Asp.net MVC 中 Bundle 配置详解:合并与压缩 JS 和 CSS 文件
    本文深入探讨了 Asp.net MVC 中如何利用 Bundle 功能来合并和压缩 JavaScript 和 CSS 文件,提供了详细的配置步骤和示例代码,适合开发人员参考学习。 ... [详细]
  • 本文将详细介绍如何在Bootstrap 5中使用五种不同的表单控件样式,包括输入框、选择器和文本区域等元素。 ... [详细]
  • 前端常用的布局类型——前端布局
    1.Static静态布局固定宽高:2.Liquid流式布局宽高用百分比,按屏幕分辨率调整,布局不发生变化3.Adaptive自适应 ... [详细]
  • 在使用Firefox浏览器打开本地HTML文件时,尝试调用Canvas的drawImage方法可能会遇到NS_ERROR_NOT_AVAILABLE错误。本文探讨了这一问题的原因及解决方案。 ... [详细]
  • 利用CSS3和React实现数字滚动动画组件
    在前端开发中,数字滚动动画是一个常见的需求。本文将详细介绍如何使用CSS3和React构建一个数字滚动动画组件,包括组件的代码实现和样式设计。如果您对HTML版本感兴趣,欢迎留言获取。 ... [详细]
  • 使用Bootstrap创建响应式渐变固定头部导航栏的方法
    本文详细介绍了如何利用Bootstrap框架构建一个具有渐变效果的固定顶部响应式导航栏,包括HTML结构、CSS样式以及JavaScript交互的完整实现过程。适合前端开发者和学习者参考。 ... [详细]
  • 本文介绍了如何在Angular CLI创建的项目中安装并配置Bootstrap,包括必要的依赖项jQuery和Popper.js的安装步骤。 ... [详细]
  • Bootstrap与Layui的主要差异分析
    在前端开发领域,Bootstrap与Layui是两种非常流行的框架选择。本文将深入探讨这两种框架的主要区别,帮助开发者根据项目需求做出最佳选择。 ... [详细]
  • 动画队列的设计目的是为了确保一系列任务能够按照预定顺序执行,每个任务只有在其前一个任务完成后才开始。这些任务既可以是同步的,也可以是异步的。本文将探讨jQuery动画系统中的队列机制,并介绍如何使用队列来优化动画效果。 ... [详细]
  • jQuery 1.4.4 已经发布,这是自 1.4.3 版本以来不到一个月的又一更新。本次更新主要集中在基于用户反馈的错误修复,并引入了一项新的功能。 ... [详细]
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社区 版权所有