Bootstrap项目实战-首页
html
Bootstrap 介绍 「 为什么选择瑞佳商务 」
20年经验，专人专办，上面服务，后续记账业务多！
代办证照
工商代办、工商注册、执照代办、公司注册、资质代理、年检等 ！
商标注册
代理注册各种商标！
记账税务
代理公司账务，税务申报！
其他业务
其他各种业务！
强大的学习体系
经过管理学大师层层把关、让您的企业突飞猛进。
完美的管理方式
最新的管理培训方案，让您的企业赶超同行。
css
@charset "utf-8";/*通用----------------------------------------------------------------------------------------------------------------*//*将a标签去掉点击后的虚线边框*/body { font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;}a:focus { outline: none;}/*导航部分-------------------------------------------------------------------------------------------------------------*//*导航区域背景色*/.navbar{ background-color: #2056AC;}/*导航a首选标签，聚集光标和鼠标放上去背景色*/.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover{ background-color: #FE7C19; color: #FFFFFF;}/*网站名称*/.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand { color: #FFFFFF; font-size:15px;}/*去除导航ul头部内边距*/.dhul{ margin-top:0;}/*导航a标签，聚集光标和鼠标放上去背景色*/.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover{ background-color: #FE7C19; color: #FFFFFF;}/*导航条文字颜色*/.navbar-default .navbar-nav > li > a{ color: #FFFFFF;}/*导航条按钮背景色*/.navbar-toggle, .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{ background-color: #ddd;}/*导航条按钮文字三横背景和文字颜色*/.navbar-default .navbar-toggle .icon-bar{ background-color: #f5f5f5; border-radius: 1px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); display: block; height: 2px; width: 18px;}/*轮播器--------------------------------------------------------------------------------------------------------------*//*将轮播器头部外边距设置50像素*/#myCarousel { margin: 50px 0 0 0;}.carousel-inner .item img { margin: 0 auto;}.tp1{ background:#D6E5EA;}.tp2{ background:#F4F3F1;}.tp3{ background:#E2E1E7;}/*经营业务-------------------------------------------------------------------------------------------------------------*/.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;}.media { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);}/*两段内容部分*/.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;}/*底部-----------------------------------------------------------------------------------------------------------------*/.dibu{ background-color:#222222;}.dibu .row{ color: #FFFFFF;}.dibu .row h4{ box-shadow: 0 1px 0 rgba(255, 255, 255, 0.97); padding:10px 0;}/*版权*/.banq{ background-color: #000000;}.banq .banq{ padding: 10px 0 0 0;}.banq p{ color: #777777;}/* 小屏幕（平板，大于等于 768px） */@media (min-width: 768px) { /*网站名称*/ .navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand { color: #FFFFFF; font-size: 20px; } .tab-h2 { font-size: 26px; } .tab-p { font-size: 16px; }}/* 中等屏幕（桌面显示器，大于等于 992px） */@media (min-width: 992px) { /*网站名称*/ .navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand { color: #FFFFFF; font-size: 23px; } .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; }} js
/** * Created by admin on 2017/5/2. */$(function () { $('#myCarousel').carousel({ //设置自动播放/3 秒 interval: 3000, });});
总结：主要用到，导航条组件，轮播器组件，栅格系统，和媒体对象组件
