首页 / BOOTSTRAP / 利用Bootstrap快速搭建个人响应式主页（附演示+源码）-ATtuing

利用Bootstrap快速搭建个人响应式主页（附演示+源码）-ATtuing

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了利用Bootstrap快速搭建个人响应式主页（附演示+源码）-ATtuing，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10840字，纯文字阅读大概需要16分钟。

内容图文

1.前言

我们每个程序员都渴望搭建自己的技术博客平台与他人进行交流分享,但使用别人的博客模板没有创意。做网站后台的开发人员可能了解前端，可是自己写一个不错的前端还是很费事的。幸好我们有Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。我以后端程序员的角度讲一下前端设计（好别扭），网站的颜色搭配不那么理想。你可以自己改css样式，达到自己的目的。

下面是我自己用Bootstrap搭建的首页地址：共享gis：http://test.sharegis.cn/访问一下吧（手机电脑都试一下，体会一下响应式页面:-D，只做了首页）。

废话不多说，开始讲解：

2.实现

（1）基本模板搭建 参考Bootstrap中文网 http://v3.bootcss.com/getting-started/，起步—>基本模板

利用Bootstrap快速搭建个人响应式主页（附演示+源码）-ATtuing - 文章图片利用Bootstrap快速搭建个人响应式主页（附演示+源码）-ATtuing - 文章图片 
 1 DOCTYPE html> 
 2 <html lang="zh-CN"> 
 3   <head> 
 4       <meta charset="utf-8"> 
 5        
 6       <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 7        
 8     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 9      
10     <title>Bootstrap 101 Template</title> 
11      
12     <link href="CSS/bootstrap.min.css" rel="stylesheet"> 
13   </head> 
14   <body> 
15     <h1>你好，世界！</h1> 
16      
17     <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> 
18      
19     <script src="js/bootstrap.min.js"></script> 
20   </body> 
21 </html>
View Code

利用Bootstrap快速搭建个人响应式主页（附演示+源码）-ATtuing - 文章图片

（2）导航条 参考Bootstrap中文网 http://v3.bootcss.com/components/#navbar，组件—>导航条

利用Bootstrap快速搭建个人响应式主页（附演示+源码）-ATtuing - 文章图片利用Bootstrap快速搭建个人响应式主页（附演示+源码）-ATtuing - 文章图片 
 1  
 2        
 3        <nav class="navbar navbar-inverse navbar-fixed-top"> 
 4            <div class="container-fluid"> 
 5                 
 6                <div class="navbar-header"> 
 7                     
 8                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 9                        <span class="sr-only">Toggle navigation</span> 
10                        <span class="icon-bar"></span> 
11                        <span class="icon-bar"></span> 
12                        <span class="icon-bar"></span> 
13                    </button> 
14                    <a class="navbar-brand" href="#">ShareGIS</a> 
15                </div>
16 
17                  
21                    <ul class="nav navbar-nav"> 
22                        <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li> 
23                        <li class="dropdown"> 
24                            <a class="dropdown-toggle" href="#" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
25                                技术博客 
26                                <span class="caret"></span> 
27                            </a> 
28                            <ul class="dropdown-menu dropdowncolor" aria-labelledby="dropdownMenu1"> 
29                                <li><a href="#">GIS</a></li> 
30                                <li><a href="#">.NET基础</a></li> 
31                                <li><a href="#">Asp .NET MVC</a></li> 
32                                <li><a href="#">前端</a></li> 
33                            </ul> 
34                        </li> 
35                        <li><a href="#">我的生活</a></li> 
36                        <li><a href="#">教程</a></li> 
37                        <li><a href="#">电脑小知识</a></li> 
38                        <li><a href="#">留言板</a></li> 
39                        <li><a href="#">关于我</a></li> 
40                    </ul> 
41                     
42                    <form class="navbar-form navbar-left" role="search"> 
43                        <div class="form-group"> 
44                            <input type="text" class="form-control" placeholder="Search"> 
45                        </div> 
46                        <button type="submit" class="btn navbar-btn">搜索</button> 
47                    </form> 
48                     
49                    <ul class="nav navbar-nav navbar-right"> 
50                        <li><a href="#">登录</a></li> 
51                        <li><a href="#">注册</a></li> 
52                    </ul> 
53                </div> 
54            </div> 
55        </nav> 
56
View Code

全景图片：

利用Bootstrap快速搭建个人响应式主页（附演示+源码）-ATtuing - 文章图片

响应式图片：

利用Bootstrap快速搭建个人响应式主页（附演示+源码）-ATtuing - 文章图片

（3）轮播 参考Bootstrap中文网 http://v3.bootcss.com/css/#grid Javascript插件—>Carousel

利用Bootstrap快速搭建个人响应式主页（附演示+源码）-ATtuing - 文章图片利用Bootstrap快速搭建个人响应式主页（附演示+源码）-ATtuing - 文章图片 
 1 
 2    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 3        
 4        <ol class="carousel-indicators">
 5              
 6            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
 7            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
 8            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 9            <li data-target="#carousel-example-generic" data-slide-to="3"></li>
10        </ol>
11 
12        
13        <div class="carousel-inner" role="listbox">
14            
15            <div class="item active">
16                <img src="/Images/1.jpg" alt="风景1">
17                <div class="carousel-caption">
18                    
19                    <h4>真正的才智是刚毅的志向。 —— 拿破仑</h4>
20                </div>
21            </div>
22            <div class="item">
23                <img src="/Images/2.jpg" alt="风景2">
24                <div class="carousel-caption">
25                    <h4>志向不过是记忆的奴隶，生气勃勃地降生，但却很难成长。 —— 莎士比亚</h4>
26                </div>
27            </div>
28            <div class="item">
29                <img src="/Images/3.jpg" alt="风景3">
30                <div class="carousel-caption">
31                    <h4>志向和热爱是伟大行为的双翼。 —— 歌德</h4>
32                </div>
33            </div>
34            <div class="item">
35                <img src="/Images/4.jpg" alt="风景4">
36                <div class="carousel-caption">
37                    <h4>生活有度，人生添寿。 —— 书摘</h4>
38                </div>
39            </div>
40        </div>
41 
42        
43        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
44            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
45            <span class="sr-only">Previous</span>
46        </a>
47        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
48            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
49            <span class="sr-only">Next</span>
50        </a>
51    </div>
52
View Code

全景图

利用Bootstrap快速搭建个人响应式主页（附演示+源码）-ATtuing - 文章图片

（4）内容布局

a.栅格系统 参考Bootstrap中文网 http://v3.bootcss.com/css/#grid全局CSS样式—>栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

栅格系统的具体简介请参考帮助，这里我把我的理解说一下：Bootstrap把页面等分为12列，你可以将你的内容放入任意行中；比如可以（4：4：4）也可以（4：：3：2）总之相加不要超过12，当屏幕变小后原来一行4：4：4；变为了三行，每行占满屏幕，例如：全景图

利用Bootstrap快速搭建个人响应式主页（附演示+源码）-ATtuing - 文章图片

响应式图

利用Bootstrap快速搭建个人响应式主页（附演示+源码）-ATtuing - 文章图片

下面我们利用栅格系统搭建布局页面（对图片中的三维模型设计感兴趣的，可以参考我的博客开拓思维，如何用编程思想进行三维建模（1））

利用Bootstrap快速搭建个人响应式主页（附演示+源码）-ATtuing - 文章图片利用Bootstrap快速搭建个人响应式主页（附演示+源码）-ATtuing - 文章图片 
 1  
 2 <div class="container"> 
 3      
 4     <div class="row"> 
 5          
 6         <div class="col-sm-3"> 
 7              
 8             <img src="/Images/八镜台.jpg"  class="img-thumbnail" alt="八镜台"/> 
 9             <h3>八镜台</h3> 
10             <p>八境台坐落在江西省赣州市北八境公园内，章江和贡江在这里汇合，为省级重点风景名胜区。</p> 
11             <p><a href="#" class="btn btn-success" role="button">详细</a></p> 
12         </div> 
13         <div class="col-sm-3"> 
14             <img src="/Images/标建2.jpg" class="img-thumbnail" alt="标建" /> 
15             <h3>商场</h3> 
16             <p>赣州第一条真正意义上的步行街。餐饮，购物都挺多商户的。可惜没有什么大的品牌进驻，购物群体也多是学生什么的.</p> 
17             <p><a href="#" class="btn btn-success" role="button">详细</a></p> 
18         </div> 
19         <div class="col-sm-3"> 
20             <img src="/Images/标建4.jpg" class="img-thumbnail" alt="标建2"/>  
21             <h3>仿古建筑</h3> 
22             <p>如佛所谓“赣州文清路，模特满大街，豪车如流水，摩人挤掉鞋”。正是今天赣州文清路极尽繁华的真实写照。</p> 
23             <p><a href="#" class="btn btn-success" role="button">详细</a></p> 
24         </div> 
25         <div class="col-sm-3"> 
26             <img src="/Images/城墙2.jpg" class="img-thumbnail" alt="标建2"/>  
27             <h3>古城墙</h3> 
28             <p>赣州古城墙，始建于汉代，距今已有二千年的历史，后来经过南宋、元、明、清、民国，历时900多年的不断修缮、加固</p> 
29             <p><a href="#" class="btn btn-success" role="button">详细</a></p> 
30         </div> 
31     </div> 
32     <div class="row"> 
33         <div class="col-sm-3"> 
34                
35             <img src="/Images/郁孤台.jpg"  class="img-circle" alt="八镜台"/> 
36             <h3>郁孤台</h3> 
37             <p>郁孤台位于赣州城区西北部贺兰山顶，海拔131米，是城区的制高点，赣州宋代古城墙自台下逶迤而过，市级文物保护单位</p> 
38             <p><a href="#" class="btn btn-success" role="button">详细</a></p> 
39         </div> 
40         <div class="col-sm-3"> 
41             <img src="/Images/高层2.jpg" class="img-circle" alt="标建" /> 
42             <h3>高层建筑</h3> 
43             <p>高层建筑，建筑高度大于27米的住宅和建筑高度大于24m的非单层厂房、仓库和其他民用建筑。</p> 
44             <p><a href="#" class="btn btn-success" role="button">详细</a></p> 
45         </div> 
46         <<span style="color: #800000

内容总结

以上是互联网集市为您收集整理的利用Bootstrap快速搭建个人响应式主页（附演示+源码）-ATtuing全部内容，希望文章能够帮你解决利用Bootstrap快速搭建个人响应式主页（附演示+源码）-ATtuing所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/408833.html

来源：【匿名】