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 相关文章推荐
通过身份证号得到出生日期和性别的js代码
Nov 23 Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
浅谈javascript面向对象程序设计
Jan 21 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
详解Vue打包优化之code spliting
Apr 09 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
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
js实现抽奖的两种方法
2020/03/19 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
写一个Vue loading 插件
2020/11/09 Javascript
Python中的zipfile模块使用详解
2015/06/25 Python
Python 处理文件的几种方式
2019/08/23 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
小学教育毕业生自荐信
2013/11/18 职场文书
自荐书模板
2013/12/15 职场文书
学生实习介绍信
2014/01/15 职场文书
有趣的广告词
2014/03/18 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
春节慰问信范文
2015/02/15 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers