首页 > 代码库 > Bootstrap快速上手 --作品展示站点
Bootstrap快速上手 --作品展示站点
本次我们将采用Bootstrap来快速构建一个响应式的，支持多种设备的在线站点。
一、设计目标
站点具备功能：
1.带有Logo的可折叠的响应式导航条；
2.重点展示四张作品的图片传送带；
3.单栏布局中包含三块内容，每块内容都包含标题、短段落和吸引人点击阅读的大按钮；
4.页脚包含社交媒体链接
基本HTML样式 1 <!DOCTYPE html> <!-- html5标签 -->
2 3 <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 4 <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 5 <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> 6 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 7 8 <head>
10 <meta charset="utf-8"> 11 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 12 <title></title> 13 <meta name="description" content=""> 14 <meta name="viewport" content="width=device-width"> 15 16 <!-- Main Style Sheet --> 17 <link rel="stylesheet" href="css/main.css"> 18 <!-- Modernizr --> 19 <script src="js/vendor/modernizr-2.6.2.min.js"></script> 20 <!-- Respond.js for IE 8 or less only --> 21 <!--[if (lt IE 9) & (!IEMobile)]> 22 <script src="http://www.mamicode.com/js/vendor/respond.min.js"></script> 23 <![endif]--> 24 25 </head> 26 <body> 27 <!--[if lte IE 7]> 28 <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p> 29 <![endif]--> 30 31 <header role="banner"> 32 <nav role="navigation" class="navbar navbar-default"> 33 <div class="container"> 34 <div class="navbar-header"> 35 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 36 <span class="icon-bar"></span> 37 <span class="icon-bar"></span> 38 <span class="icon-bar"></span> 39 </button> 40 <a class="navbar-brand" href="index.html">Bootstrappin‘</a> 41 </div> 42 <div class="navbar-collapse collapse"> 43 <ul class="nav navbar-nav"> 44 <li class="active"><a href="index.html">Home</a></li> 45 <li><a href="#">Portfolio</a></li> 46 <li><a href="#">Team</a></li> 47 <li><a href="#">Contact</a></li> 48 </ul> 49 </div><!--/.nav-collapse --> 50 </div><!--/.container --> 51 </nav> 52 </header> 53 54 <main role="main"> 55 56 <img src="img/okwu.jpg" alt="OKWU.edu Homepage"> 57 <img src="img/okwu-athletics.jpg" alt="OKWU Athletics Homepage"> 58 <img src="img/bartlesvillecf.jpg" alt="Bartlesville Community Foundation"> 59 <img src="img/emancipation.jpg" alt="Emancipation Stories"> 60 61 <h2>Welcome!</h2> 62 <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p> 63 <p><a href="#">See our portfolio</a></p> 64 65 <h2>Recent Updates</h2> 66 <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p> 67 <p><a href="#">See what‘s new!</a></p> 68 69 <h2>Our Team</h2> 70 <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p> 71 <p><a href="#">Meet the team!</a></p> 72 73 </main> 74 75 <footer role="contentinfo"> 76 77 <p><a href="index.html"><img src="img/logo.png" width="80" alt="Bootstrappin'"></a></p> 78 79 <ul class="social"> 80 <li><a href="#" title="Twitter Profile">Twitter</a></li> 81 <li><a href="#" title="Facebook Page">Facebook</a></li> 82 <li><a href="#" title="LinkedIn Profile">LinkedIn</a></li> 83 <li><a href="#" title="Google+ Profile">Google+</a></li> 84 <li><a href="#" title="GitHub Profile">GitHub</a></li> 85 </ul> 86 87 </footer> 88 89 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 90 <script>window.jQuery || document.write(‘<script src="http://www.mamicode.com/js/vendor/jquery-1.10.2.min.js"><\/script>‘)</script> 91 <script src="js/plugins.js"></script> 92 <script src="js/main.js"></script> 93 94 <!-- Google Analytics: change UA-XXXXX-X to be your site‘s ID. --> 95 <script> 96 var _gaq=[[‘_setAccount‘,‘UA-XXXXX-X‘],[‘_trackPageview‘]]; 97 (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; 98 g.src=(‘https:‘==location.protocol?‘//ssl‘:‘//www‘)+‘.google-analytics.com/ga.js‘; 99 s.parentNode.insertBefore(g,s)}(document,‘script‘)); 100 </script> 101 102 </body> 103 </html>
这个基本的页面包含导航条、主题内容、页脚。目前没有加入bootstrap样式。
二、Bootstrap 引入
2.1 搭建传送带
（1）基本传送带
根据Bootstrap文档上的传送带例子修改；
教程例子：
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
（2）强制传送带图片全宽
由于传送带中的图片大小为1600px，对于屏幕宽度超过1600px，那么右侧就会出现空隙。这是可以强制图片全宽，可能会带来一些像素失真。做法：修改carousel.less 文件，中的
.carousel-inner{
....
>item{
>img,
>a>img{
...
min-width:100% ; // ADDED
}
}
（3）约束传送带的高度
在大型屏幕中传送带高度过高。这里依据设计方案传送带的高度应该为640px；
.carousel-inner{
....
>a>img{
...
max-height:640px ; // ADDED
}
}
注意： 因为在.carousel-inner元素中有一条overflow : hidden, 而.item元素被限制了高度，所以在超过高度限制后其下面的部分会被隐藏。于是我们可以利用LESS的嵌套媒体查询，再利用Bootstrap的中大断点变量，分别调整屏幕宽度过宽时图片的垂直定位，从而保证我们的作品处于焦点位置：
>img,
> a > img{
@media(min-width:@screen-md-min){
margin-top:-40px;
}
@media(min-width:@screen-lg-min){
margin-top:-60px;
}
}
2.2 创建响应式分栏
我们有时候希望页面在大于等于平板的屏幕上以一行三栏的方式显示，而在较窄的屏幕上则以一栏全宽显示。
这就要根据bootstrap的移动优先响应式布局。css / #grid 。 bootstrap采用的十二栅格系统，其基本类结构支持col-12 表示全宽， col-4表示三分之一宽...
Bootstrap利用媒体查询和栅格系统实现了极强的适应力。小、中、大断点： 768px、992px、1200px
修改三栏代码：
<div class="container"> <div class="col-sm-4"> <h2>Welcome!</h2> <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p> <p><a href="#">See our portfolio</a></p> </div> <div class="col-sm-4"> <h2>Recent Updates</h2> <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p> <p><a href="#">See what‘s new!</a></p> </div> <div class="col-sm-4"> <h2>Our Team</h2> <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p> <p><a href="#">Meet the team!</a></p> </div> </div>
①其中container类用于约束内容的宽度，并使其在页面中居中显示；
②row类用于包装三个栏，并为栏间留出左右行边距离；
③container类和row类都设定了清除，所以他们可以包含浮动元素，同时也清除之前的浮动元素。
此外我们希望响应式分栏和传送带的距离变大。由于这是页面的内容要增加额外的内边距，所以我们需要创建一个Less文件，用于保存这些以及其他改动。
步骤：
①新建 _page-contents.less 文件
②编辑文件
//
// Page Contents
//
.page-contents{
padding-top:40px;
padding-bottom:40px;
}
③导入到__main.less文件中
④编译__main.less文件，生成新的css文件
⑤在需要增加行间距的标签的类中增加 page-contents
这里还会遇到一个问题，就是分栏垂直排列的时候按钮元素会与下一栏有重合。这时候我们需要用到媒体查询，让他们垂直堆叠的时候相互之间会有点空隙。这里使用CSS2的属性选择符来选择类中包含col- 的所有元素，从而能让同一组规则可以应用与任何尺寸的分栏。解决方法：
.page-contents{
......
@media (max-width:@screen-xs-max){
[class*="col-"]{
clear:both;
padding-bottom:40px;
}
}
}
2.3 把链接变为按钮
只需要添加几个关键类：
http://v3.bootcss.com/css/#buttons
①btn 类 用于将链接变为按钮样式；
②btn-primary 类把按钮设置为主品牌颜色；
③pull-right 类把链接浮动到右侧，使得其占据更大的空间。
2.4 修饰页脚
Bootstrap快速上手 --作品展示站点