bootstrap 学习之路5
2013-05-02 21:55
281 查看
这两天利用5 1 ，使用bootstrap 写了个公司的主页当做练习。当然也仅仅写了几个页面，但是鉴于一些原因，所以只把首页的代码和效果拿出来分享！
二话不说，上代码！
纠错：在学习之路2中，我对boostrap栅格的用法给了非常错误的解释，现做更正：span12就是占12个格子,span3就是3个格子。而学习之路2中解释的恰恰相反，所以敬请谅解！
注释：
1. 这个主页的练习，主要内容是练习，而非新技术，所以，在其中只是用了缩略图的技术，缩略图在bootstrap中真的 非常强大。.thumbnails 和 .thumbnail这两个类。thumbnails是缩略图列表，里面包含了thumbnail,我只不过为了刻意的控制位置，所以只是是用了div来控制，而非thumbnails.
使用thumbnail的时候，你只用规定好地方的大小，thumbnail自动会将图片缩到你规定的大小，呼呼，真的很酷，效果也比较可以。
效果图如下：
二话不说，上代码！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="./bootstrap/css/bootstrap-responsive.min.css" />
<!--这里加上想用的css-->
<style type="text/css">
.title{
font:"幼圆"
color:#8968CD;
}
span.bluefont{
color:#00f;
}
span.blackfont{
color:#000;
}
span.greenfont{
color:#0f0;
}
span.purplefont{
color:#68228B;
}
span.redfont{
color:#f00;
}
span.bigfont{
font-size:24px;
}
.wrapper{
margin:20px auto;
width:900px;
}
.container{
width:900px;
}
.row{
margin:0 auto;
}
.overlap{
float:left;
}
.carousel-control{
height:80px;
margin-top:0px;
font-size:120px;
text-shadow:0 1px 1px rgba(0,0,0,4);
background-color:transparent;
border:0px;
z-index:10;
}
.carousel-caption{
left:10%;
top:30%;
right:30%;
bottom:20%;
background-color:transparent;
}
/* .carousel-caption h1{
color:#fff;
}*/
.carousel-caption p{
font-size:25px;
color:#000;
}
.logo{
width:80px;
height:40px;
float:left;
}
#logo.thumbnail{
border:0px;
padding:0px;
}
a div.thumbnail{
border:0px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="row-fluid">
<div class="span1" >
<a href="#" id="logo" class="logo thumbnail">
<img src="./meehoo/images/meehoo-logo.jpg" alt="logo" />
</a>
</div>
</div>
<div class="row-fluid">
<div class="span3 offset9">
<a href="#">
<img src="./meehoo/images/sina.png" alt="" />新浪微博
</a>
<a href="#">
<img src="./meehoo/images/tencent.png" alt="" />腾讯微博
</a>
</div>
</div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!--<a href="#" class="brand"><img src="./meehoo/images/meehoo-logo.jpg" alt="" /></a>-->
<!-- <a href="#" id="logo" class="logo thumbnail">
<img src="./meehoo/images/meehoo-logo.jpg" alt="logo" />
</a>-->
<ul class="nav" >
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#">主页</a></li>
<li><a href="#"></a></li>
<li><a href="#">行业新闻</a></li>
<li><a href="#"></a></li>
<li><a href="./meehoo/epiboly.html">外包业务</a></li>
<li><a href="#"></a></li>
<li><a href="#">客户服务</a></li>
<li><a href="#"></a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#"></a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</div>
</div>
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="slide-01.jpg" alt="" />
<div class="container">
<div class="carousel-caption">
<h1>科技企业</h1>
<p>让企业快速奔跑在企业的长廊里</p>
</div>
</div>
</div>
<div class="item">
<img src="slide-02.jpg" alt="" />
<div class="container">
<div class="carousel-caption">
<h1>服务企业</h1>
<p>让企业的业绩节节攀升</p>
</div>
</div>
</div>
<div class="item">
<img src="slide-03.jpg" alt="" />
<div class="container">
<div class="carousel-caption">
<h1>共享成功</h1>
<p>让我们与企业一起享受成功的咖啡</p>
</div>
</div>
</div>
</div>
<a href="#myCarousel" class="left carousel-control" data-slide="prev">‹</a>
<a href="#myCarousel" class="right carousel-control" data-slide="next">›</a>
</div>
<div class="container">
<div class="row">
<div class="span2">
<a href="#">
<div class="thumbnail">
<h3>门户网站设计</h3>
<img src="./meehoo/images/web.jpg" alt="" />
<p>我们有专业的门户网站设计团队，会按照客户的行业类型设计专门的门户网站。</p>
</div>
</a>
</div>
<div class="span3">
<a href="#">
<div class="thumbnail">
<h3>企业管理软件开发</h3>
<img src="./meehoo/images/j2ee.jpg" alt="" />
<p>丰富的管理系统开发经验，使用J2EE技术，从内心深处让客户满意</p>
</div>
</a>
</div>
<div class="span2">
<a href="#">
<div class="thumbnail">
<h3>iOS开发</h3>
<img src="./meehoo/images/ios.jpg" alt="" />
<p>iOS技术炉火纯青，一句话，客户满意是我们的成就</p>
</div>
</a>
</div>
<div class="span2">
<a href="#">
<div class="thumbnail">
<h3>Andorid开发</h3>
<img src="./meehoo/images/android.jpg" alt="" />
<p>Android技术炉火纯青，一句话，客户满意是我们的成就</p>
</div>
</a>
</div>
</div>
<hr />
<div class="footer">
© 2013 meehoo, Inc. ·
</div><!--footer-->
</div> <!--conainer-->
</div><!--wrapper 的div-->
<script type="text/javascript" src="./bootstrap/thirdpart/jquery.min.js"></script>
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
</body>
</html>纠错：在学习之路2中，我对boostrap栅格的用法给了非常错误的解释，现做更正：span12就是占12个格子,span3就是3个格子。而学习之路2中解释的恰恰相反，所以敬请谅解！
注释：
1. 这个主页的练习，主要内容是练习，而非新技术，所以，在其中只是用了缩略图的技术，缩略图在bootstrap中真的 非常强大。.thumbnails 和 .thumbnail这两个类。thumbnails是缩略图列表，里面包含了thumbnail,我只不过为了刻意的控制位置，所以只是是用了div来控制，而非thumbnails.
使用thumbnail的时候，你只用规定好地方的大小，thumbnail自动会将图片缩到你规定的大小，呼呼，真的很酷，效果也比较可以。
效果图如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- （转）Bootstrap 之 Metronic 模板的学习之路 - （1）总览
- bootstrap 学习之路 9 （javascript part1）
- bootstrap 学习之路2
- （转）Bootstrap 之 Metronic 模板的学习之路 - （2）源码分析之 head 部分
- bootstrap 学习之路4
- （转）Bootstrap 之 Metronic 模板的学习之路 - （3）源码分析之 body 部分
- bootstrap 学习之路 10 (javascript DOM 编程)
- （转）Bootstrap 之 Metronic 模板的学习之路 - （4）源码分析之脚本部分
- 我的学习之路_bootstrap
- bootstrap 学习之路3
- （转）Bootstrap 之 Metronic 模板的学习之路 - （5）主题&布局配置
- bootstrap 学习之路7
- (转）Bootstrap 之 Metronic 模板的学习之路 - （6）自定义和扩展
- （转）Bootstrap 之 Metronic 模板的学习之路 - （7）GULP 前端自动化工具
- bootstrap 学习之路6
- bootstrap 学习之路——开始篇
- bootstrap 学习之路 8
- 【软考之路】——J2SE学习总结
- Hibernate的学习之路三十（HQL的基本查询）、
- 我的C++学习之路--04.C++的“引用”