利用Bootstrap快速搭建个人响应式主页（附演示+源码） - ATtuing
程序员文章站
2022-04-06 12:21:34
...
1.前言
View Code
View Code
View Code
我们每个程序员都渴望搭建自己的技术博客平台与他人进行交流分享,但使用别人的博客模板没有创意。做网站后台的开发人员可能了解前端，可是自己写一个不错的前端还是很费事的。幸好我们有Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。我以后端程序员的角度讲一下前端设计（好别扭），网站的颜色搭配不那么理想。你可以自己改css样式，达到自己的目的。
下面是我自己用Bootstrap搭建的首页地址：共享gis：http://test.sharegis.cn/访问一下吧（手机电脑都试一下，体会一下响应式页面:-D，只做了首页）。
废话不多说，开始讲解：
2.实现
（1）基本模板搭建 参考Bootstrap中文网 http://v3.bootcss.com/getting-started/，起步—>基本模板
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 Templatetitle> 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>
（2）导航条 参考Bootstrap中文网 http://v3.bootcss.com/components/#navbar，组件—>导航条
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 navigationspan> 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="#">ShareGISa> 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="#">GISa>li> 30 li>a href="#">.NET基础a>li> 31 li>a href="#">Asp .NET MVCa>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
全景图片：
响应式图片：
（3）轮播 参考Bootstrap中文网 http://v3.bootcss.com/css/#grid Javascript插件—>Carousel
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">Previousspan> 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">Nextspan> 50 a> 51 div> 52
全景图
（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；变为了三行，每行占满屏幕，例如：全景图
响应式图
下面我们利用栅格系统搭建布局页面（对图片中的三维模型设计感兴趣的，可以参考我的博客开拓思维，如何用编程思想进行三维建模（1））
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 微信分享
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
相关文章
相关视频