Bootstrap项目实战--案例
html
DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>Bootstrap 介绍title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/ceshi.css">
<link rel="stylesheet" href="css/anl.css">
head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand logo">自贡瑞佳财务咨询有限公司a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar">span>
<span class="icon-bar">span>
<span class="icon-bar">span>
button>
div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right dhul">
<li class="active"><a href="ceshi.html"><span class="glyphicon glyphicon-home">span> 首页a>li>
<li><a href="zix.html"><span class="glyphicon glyphicon-list">span> 资讯a>li>
<li><a href="anl.html"><span class="glyphicon glyphicon-fire">span> 案例a>li>
<li><a href="gyu.html"><span class="glyphicon glyphicon-question-sign">span> 关于a>li>
ul>
div>
div>
nav>
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active">li>
<li data-target="#myCarousel" data-slide-to="1">li>
<li data-target="#myCarousel" data-slide-to="2">li>
ol>
<div class="carousel-inner">
<div class="item active tp1">
<a href="#"><img src="img/1.jpg" alt="第一张">a>
div>
<div class="item tp2">
<a href="#"><img src="img/2.jpg" alt="第二张">a>
div>
<div class="item tp3">
<a href="#"><img src="img/3.jpg" alt="第三张">a>
div>
div>
<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-control right">
<span class="glyphicon glyphicon-chevron-right">span>
a>
div>
<div id="case">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/case1.jpg" alt="">
<div class="caption">
<h4>中国移动通信h4>
<p>参与了本机构的总裁管理培训课程，学员反馈意见良好。p>
div>
div>
div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/case2.jpg" alt="">
<div class="caption">
<h4>中国石化h4>
<p>参与了本机构的总裁管理培训课程，学员反馈意见良好。p>
div>
div>
div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/case3.jpg" alt="">
<div class="caption">
<h4>中国联通h4>
<p>参与了本机构的总裁管理培训课程，学员反馈意见良好。p>
div>
div>
div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/case4.jpg" alt="">
<div class="caption">
<h4>中国电信h4>
<p>参与了本机构的总裁管理培训课程，学员反馈意见良好。p>
div>
div>
div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/case3.jpg" alt="">
<div class="caption">
<h4>中国联通h4>
<p>参与了本机构的总裁管理培训课程，学员反馈意见良好。p>
div>
div>
div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/case4.jpg" alt="">
<div class="caption">
<h4>中国电信h4>
<p>参与了本机构的总裁管理培训课程，学员反馈意见良好。p>
div>
div>
div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/case2.jpg" alt="">
<div class="caption">
<h4>中国石化h4>
<p>参与了本机构的总裁管理培训课程，学员反馈意见良好。p>
div>
div>
div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/case1.jpg" alt="">
<div class="caption">
<h4>中国移动通信h4>
<p>参与了本机构的总裁管理培训课程，学员反馈意见良好。p>
div>
div>
div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/case4.jpg" alt="">
<div class="caption">
<h4>中国电信h4>
<p>参与了本机构的总裁管理培训课程，学员反馈意见良好。p>
div>
div>
div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/case3.jpg" alt="">
<div class="caption">
<h4>中国联通h4>
<p>参与了本机构的总裁管理培训课程，学员反馈意见良好。p>
div>
div>
div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/case4.jpg" alt="">
<div class="caption">
<h4>中国电信h4>
<p>参与了本机构的总裁管理培训课程，学员反馈意见良好。p>
div>
div>
div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/case2.jpg" alt="">
<div class="caption">
<h4>中国石化h4>
<p>参与了本机构的总裁管理培训课程，学员反馈意见良好。p>
div>
div>
div>
div>
div>
div>
<div class="dibu">
<div class="container">
<div class="row">
<div class="col-md-6">
<h4 class="text-center">联系方式h4>
<p>联系人:游先生p>
<p>手机:18681395066 13096006150p>
<p>座机:0813-8287339p>
<p>Q Q:350016919p>
<p>邮箱:[email protected]p>
<p>地址:自贡市自流井区丹桂东段泰丰大厦1区8层7号 p>
div>
<div class="col-md-6">
<h4 class="text-center">友情链接h4>
<ul class="list-unstyled">
<li><a href="http://www.scaic.gov.cn/" target="_blank">四川工商局a>li>
<li><a href="http://www.baidu.com" target="_blank">百度a>li>
ul>
div>
div>
div>
div>
<div class="banq">
<div class="container text-center banq">
<p>版权所有 © 自贡瑞佳财务咨询有限公司 未经许可 严禁复制p>
<p><a href="http://www.jxiou.com/" target="_blank">自贡玉秀文化传播技术支持a>p>
<p>蜀ICP备16022718号-1 p>
div>
div>
<script src="jquery/jquery.min.js">script>
<script src="bootstrap/js/bootstrap.min.js">script>
<script src="ceshi.js">script>
body>
html>
重点：利用栅格系统布局