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 相关文章推荐
javascript中基本类型和引用类型的区别分析
May 12 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
浅析创建javascript对象的方法
May 13 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
javascript实现简单的on事件绑定
Aug 23 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
spring+angular实现导出excel的实现代码
Feb 27 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 29 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
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
php 强制下载文件实现代码
2013/10/28 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
Python字符遍历的艺术
2008/09/06 Python
使用Python操作MySQL的一些基本方法
2015/08/16 Python
浅谈python中的占位符
2017/11/09 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
如何清空python的变量
2020/07/05 Python
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
外语系毕业生找工作的求职信
2013/11/28 职场文书
超市5.1促销活动
2014/01/15 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
大学体育课感想
2015/08/10 职场文书