bootstrap自动生成html,利用Bootstrap快速搭建个人响应式主页（附演示+源码）-ATtuing...

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/，起步—>基本模板

1 DOCTYPE html>

2

3

4

5

6

7

8

9

10

Bootstrap 101 Templatetitle>

11

12

13 head>

14

15

你好，世界！h1>

16

17 script>

18

19 script>

20 body>

21 html>

View Code

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

1

2

3

4

5

6

7

8

9 Toggle navigationspan>

10 span>

11 span>

12 span>

13 button>

14 ShareGISa>

15 div>

16

17

21

22 首页 (current)span>a>li>

23

24

25 技术博客26 span>

27 a>

28

29

GISa>li>

30

.NET基础a>li>

31

Asp .NET MVCa>li>

32

前端a>li>

33 ul>

34 li>

35

我的生活a>li>

36

教程a>li>

37

电脑小知识a>li>

38

留言板a>li>

39

关于我a>li>

40 ul>

41

42

43

44

45 div>

46 搜索button>

47 form>

48

49

50

登录a>li>

51

注册a>li>

52 ul>

53 div>

54 div>

55 nav>

56

View Code

全景图片：

响应式图片：

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

1

2

3

4

5

6 li>

7 li>

8 li>

9 li>

10 ol>

11

12

13

14

15

16

17

18

19

真正的才智是刚毅的志向。 —— 拿破仑h4>

20 div>

21 div>

22

23

24

25

志向不过是记忆的奴隶，生气勃勃地降生，但却很难成长。 —— 莎士比亚h4>

26 div>

27 div>

28

29

30

31

志向和热爱是伟大行为的双翼。 —— 歌德h4>

32 div>

33 div>

34

35

36

37

生活有度，人生添寿。 —— 书摘h4>

38 div>

39 div>

40 div>

41

42

43

44 span>

45 Previousspan>

46 a>

47

48 span>

49 Nextspan>

50 a>

51 div>

52

View Code

全景图

(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

3

4

5

6

7

8

9

八镜台h3>

10

八境台坐落在江西省赣州市北八境公园内，章江和贡江在这里汇合，为省级重点风景名胜区。p>

11

详细a>p>

12 div>

13

14

15

商场h3>

16

赣州第一条真正意义上的步行街。餐饮，购物都挺多商户的。可惜没有什么大的品牌进驻，购物群体也多是学生什么的.p>

17

详细a>p>

18 div>

19

20

21

仿古建筑h3>

22

如佛所谓“赣州文清路，模特满大街，豪车如流水，摩人挤掉鞋”。正是今天赣州文清路极尽繁华的真实写照。p>

23

详细a>p>

24 div>

25

26

27

古城墙h3>

28

赣州古城墙，始建于汉代，距今已有二千年的历史，后来经过南宋、元、明、清、民国，历时900多年的不断修缮、加固p>

29

详细a>p>

30 div>

31 div>

32

33

34

35

36

郁孤台h3>

37

郁孤台位于赣州城区西北部贺兰山顶，海拔131米，是城区的制高点，赣州宋代古城墙自台下逶迤而过，市级文物保护单位p>

38

详细a>p>

39 div>

40

41

42

高层建筑h3>

43

高层建筑，建筑高度大于27米的住宅和建筑高度大于24m的非单层厂房、仓库和其他民用建筑。p>

44

详细a>p>

45 div>

46 <

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网