Bootstrap项目实战之首页内容介绍(全)


Posted in Javascript onApril 25, 2016

本节课第一节我们轮播图的下方,设计一个内容介绍,内容介绍分两部分,本次为上半部分。

一.首页内容介绍

//关于上节课轮播图,手册上其实有一个更好的方案,并不需要通过额外的代码控制。

<a href="#myCarousel" data-slide="prev" class="carousel-control left"> <span class="glyphicon glyphicon-chevron-left"></span> </a>
<a href="#myCarousel" data-slide="next" class="carousel-controlright"> <span class="glyphicon glyphicon-chevron-right"></span> </a>
//内容介绍上
<div class="tab1">
 <div class="container">
 <h2 class="tab-h2">「 为什么选择瓢城企业培训 」</h2>
 <p class="tab-p">
  强大的师资力量,完美的实战型管理课程,让您的企业实现质的腾飞!
 </p>
 <div class="row">
  <div class="col-md-6 col">
  <div class="media">
   <div class="media-left media-top">
   <a href="#"> <img class="media-object"
   src="img/tab1-1.png" alt="..."> </a>
   </div>
   <div class="media-body">
   <h4 class="media-heading">课程内容</h4>
   <p class="text-muted">
    其他:高校不知名的讲师编写,没有任何实战价值的教材!
   </p>
   <p>
    其他:知名企业家、管理学大师联合编写的具有实现性教材!
   </p>
   </div>
  </div>

  </div>
  <div class="col-md-6 col">
  <div class="media">
   <div class="media-left media-top">
   <a href="#"> <img class="media-object"
   src="img/tab1-2.png" alt="..."> </a>
   </div>
   <div class="media-body">
   <h4 class="media-heading">师资力量</h4>
   <p class="text-muted">
    其他:非欧美正牌大学毕业的、业界没有知名度的讲师!
   </p>
   <p>
    其他:美国哈佛、耶鲁等世界一流高校、享有声誉的名牌专家!
   </p>
   </div>
  </div>
  </div>
  <div class="col-md-6 col">
  <div class="media">
   <div class="media-left media-top">
   <a href="#"> <img class="media-object"
   src="img/tab1-3.png" alt="..."> </a>
   </div>
   <div class="media-body">
   <h4 class="media-heading">课时安排</h4>
   <p class="text-muted">
    其他:无法保证上课效率、没有时间表,任务无法完成!
   </p>
   <p>
    其他:保证正常的上课效率、制定一张时间表、当天的任务当天完成!
   </p>
   </div>
  </div>
  </div>
  <div class="col-md-6 col">
  <div class="media">
   <div class="media-left media-top">
   <a href="#"> <img class="media-object"
   src="img/tab1-4.png" alt="..."> </a>
   </div>
   <div class="media-body">

   <h4 class="media-heading">服务团队</h4>
   <p class="text-muted">
    其他:社会招聘的、服务水平参差不齐的普通员工!
   </p>
   <p>
    其他:内部培养、经受过良好高端服务培训的高标准员工!
   </p>
   </div>
  </div>
  </div>
 </div>
 </div>
</div>

对应的 CSS 部分

body {
 font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft YaheiUI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
}

.tab-h2 {
 font-size: 20px;
 color: #0059B2;
 text-align: center;
 letter-spacing: 1px;
}
.tab-p {
 font-size: 15px;
 color: #999;
 text-align: center;
 letter-spacing: 1px;
 margin: 20px 0 40px 0;
}

.tab1 {
 margin: 30px 0;
 color: #666;
}
.tab1 .media-heading {
 margin: 5px 0 20px 0;
}
.tab1 .text-muted {
 color: #999;
 text-decoration: line-through;
}
.tab1 .media-heading {

 margin: 5px 0 20px 0;
}
.tab1 .text-muted {
 color: #999;
 text-decoration: line-through;
}
.tab1 .col {
 padding: 20px;
}

/* 小屏幕(平板,大于等于 768px) */
@media (min-width: 768px) {
 .tab-h2 {
 font-size: 26px;
 }
 .tab-p {
 font-size: 16px;
 }
}

/* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: 992px) {
 .tab-h2 {
 font-size: 28px;
 }
 .tab-p {
 font-size: 17px;
 }
}

/* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: 1200px) {
 .tab-h2 {
 font-size: 30px;
 }
 .tab-p {
 font-size: 18px;
 }
}

现在我们制作一下首页内容介绍的下半部分。

一.首页内容介绍
先完成底部的 footer

<footer id="footer" class="text-muted">
 <div class="container">
 <p>
  企业培训 | 合作事宜 | 版权投诉
 </p>
 <p>
  苏 ICP 备 12345678. © 2009-2016 瓢城企训网. Powered by
  Bootstrap.
 </p>
 </div>
</footer>

底部 CSS

#footer {
 padding: 20px;
 text-align: center;
 background-color: #eee;
 border-top: 1px solid #ccc;
}
//两段内容
<div class="tab2">
 <div class="container">
 <div class="row">
  <div class="col-md-6 col-sm-6 tab2-img">
  <img src="img/tab2.png" alt="" class="auto
  img-responsive center-block">
  </div>
  <div class="text col-md-6 col-sm-6 tab2-text">
  <h3>强大的学习体系</h3>
  <p>
   经过管理学大师层层把关、让您的企业突飞猛进。
  </p>
  </div>
 </div>
 </div>
</div>

<div class="tab3">
 <div class="container">
 <div class="row">
  <div class="col-md-6 col-sm-6">
  <img src="img/tab3.png" alt="" class="auto
  img-responsive center-block">
  </div>
  <div class="text col-md-6 col-sm-6">
  <h3>完美的管理方式</h3>
  <p>
   最新的管理培训方案,让您的企业赶超同行。
  </p>
  </div>
 </div>
 </div>
</div>

CSS 部分

.tab2 {
 background: #eee;
 padding: 60px 20px;
 text-align: center;
}
.tab2 img {
 width: 40%;
 height: 40%;
}
.tab3 {
 padding: 40px 0;
 text-align: center;
}
.tab3 img {
 width: 65%;
 height: 65%;
}
.text h3 {
 font-size: 20px;
}
.text p {
 font-size: 14px;
}

/* 小屏幕(平板,大于等于 768px) */
@media (min-width: 768px) {
 .text h3 {

 font-size: 22px;
 }
 .text p {
 font-size: 15px;
 }
 .tab2-text {
 float: left;
 }
 .tab2-img {
 float: right;
 }
}

/* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: 992px) {
 .text h3 {
 font-size: 24px;
 }
 .text p {
 font-size: 16px;
 }
 .tab2-text {
 float: left;
 }
 .tab2-img {
 float: right;
 }
}

/* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: 1200px) {
 .text h2 {
 font-size: 26px;
 }
 .text p {
 font-size: 18px;
 }
 .tab2-text {
 float: left;
 }
 .tab2-img {
 float: right;
 }
}

JS 控制垂直居中

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

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

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是Bootstrap首页内容介绍的全部内容,希望大家喜欢,之后还会有更多精彩的内容呈现,不要错过。

Javascript 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
js onload事件不起作用示例分析
Oct 09 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
微信小程序实现收货地址左滑删除
Nov 18 Javascript
基于vue中的scoped坑点解说
Sep 04 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 #Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 #Javascript
下雪了 javascript实现雪花飞舞
Aug 02 #Javascript
基于node实现websocket协议
Apr 25 #Javascript
Bootstrap每天必学之导航组件
Apr 25 #Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 #Javascript
javascript断点调试心得分享
Apr 23 #Javascript
You might like
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
php字符串截取函数用法分析
2014/11/25 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
js window.event对象详尽解析
2009/02/17 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
Python中的闭包详细介绍和实例
2014/11/21 Python
对于Python装饰器使用的一些建议
2015/06/03 Python
Python中逗号的三种作用实例分析
2015/06/08 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
农村改厕实施方案
2014/03/22 职场文书
班主任班级寄语大全
2014/04/04 职场文书
咖啡店创业计划书
2014/08/15 职场文书
草房子读书笔记
2015/06/29 职场文书
java版 简单三子棋游戏
2022/05/04 Java/Android
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript