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 相关文章推荐
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
js jq 单击和双击区分示例介绍
Nov 05 Javascript
利用javascript数组长度循环数组内所有元素
Dec 27 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
简单实现异步编程promise模式
Jul 31 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
Vue登录主页动态背景短视频制作
Sep 21 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生成html分页列表的代码
2007/03/18 PHP
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
PHP 页面跳转到另一个页面的多种方法方法总结
2009/07/07 PHP
解析strtr函数的效率问题
2013/06/26 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
PHP编程基本语法快速入门手册
2016/01/07 PHP
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
2020/02/12 Javascript
python操作ie登陆土豆网的方法
2015/05/09 Python
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
Python selenium文件上传方法汇总
2020/11/19 Python
Python实现线程状态监测简单示例
2018/03/28 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
晚宴邀请函范文
2014/01/15 职场文书
优秀求职信范文分享
2014/01/26 职场文书
护士求职自荐信范文
2014/03/19 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
班主任对学生的评语
2014/04/26 职场文书
保护环境倡议书300字
2014/05/19 职场文书
文艺演出主持词
2015/07/01 职场文书
个人工作决心书
2015/09/22 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers
Java实现二分搜索树的示例代码
2022/03/17 Java/Android
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL