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 设计模式学习 Singleton
Jul 27 Javascript
jQuery 美元符冲突的解决方法
Mar 28 Javascript
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
Javascript 类型转换方法
Oct 24 Javascript
javascript中的一些注意事项 更新中
Dec 06 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
js实现收缩菜单效果实例代码
Oct 30 Javascript
jQuery 无限级菜单的简单实例
Feb 21 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
详解Vue的ref特性的使用
Jan 24 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
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
vue组件生命周期详解
2017/11/07 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
python 网络爬虫初级实现代码
2016/02/27 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
给我一面国旗 python帮你实现
2019/09/30 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
python pymysql库的常用操作
2020/10/16 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
工作分析计划书
2014/04/30 职场文书
同学聚会策划方案
2014/06/06 职场文书
机电专业求职信
2014/06/14 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
宾馆客房管理制度
2015/08/06 职场文书
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS
图文详解Nginx版本平滑升级方案
2021/09/15 Servers