从0开始学编程(10) 用例子学习bootstrap的布局

前面介绍了bootstrap的相关情况, 本文介绍一个具体的实用bootstrap的例子, 同时用视频把例子详细记录下来,供参考。

1. 下载Bootstrap2.3.2版本

我们为了利用bootstrap的一个布局工具, 经过测试这个工具目前仅仅支持bootstrap2.x版本,因此我们采用了bootstrap2.x版本进行说明, 然后大家可以根据bootstrap2.x3.x的升级说明进行升级, 也可以不升级。

图中两个 区域需要注意, 一个是我们访问的网址, 另外一个是我们选择了2.x版本供我们下载。

注意这个网址不是 bootstrap的官方网址, 是个中文网站http://www.bootcss.com/

下载后将文件放到d盘,创建一个web目录存放 zip文件, 然后解压缩。 详情参考相关视频。

注意:视频中针对需要注意的地方都用鼠标 多次抖动等 提高注意力。

2. 创建本地文件

如上图我们创建了一个文件a01.html 双击这个文件显示如下

其中相关代码如下

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Carousel Template · Bootstrap</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="iigrowing demo">

<meta name="author" content="www.iigrowing.cn">

<!-- Le styles -->

<link href="css/bootstrap.css" rel="stylesheet">

<link href="css/bootstrap-responsive.css" rel="stylesheet">

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->

<!--[if lt IE 9]>

<script src="js/html5shiv.js"></script>

<![endif]-->

<!-- 请注意, 在<head> </head>之间的相关代码是不会显示在页面上的, 这些代码是通知浏览器进行相关显示,相关操作等的指示等, 例如标题, 是否缓存页面, 页面的代码等 -->

</head>

<body>

body之间 放我们自己的 html代码

Body内部的代码是需要显示在页面上的, 但是浏览器会根据相关标签进行一定格式显示, 详细情况参考 html部分代码。

</body>

</html>

3. 通过bootstrap的布局工具创建布局

Html + css的布局本身是个比较复杂费时间的事情, 不过我们有了bootstrap及相关布局工具, 有了些改善,至少对初学者是个福音。

打开网站http://www.bootcss.com/p/layoutit/

有如下图已经布局好的代码:

详细的布局参见后面的视频

4. 下载代码然后将源代码拷贝到文件中

A. 拷贝a01.html文件为 a02.html

B. 下载上面布局中相关代码

C. 拷贝代码到 a02.html文件的body之间,保存

D. 在浏览器中打开a02.html文件

下图是浏览器中显示的结果,我们初步完成了一个简单的布局相关情况

相关的源代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Carousel Template · Bootstrap</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="iigrowing demo">

<meta name="author" content="www.iigrowing.cn">

<!-- Le styles -->

<link href="css/bootstrap.css" rel="stylesheet">

<link href="css/bootstrap-responsive.css" rel="stylesheet">

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->

<!--[if lt IE 9]>

<script src="js/html5shiv.js"></script>

<![endif]-->

</head>

<body>

<div class="container-fluid">

<div class="row-fluid">

<div class="span12">

<div class="navbar">

<div class="navbar-inner">

<div class="container-fluid">

<a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a> <a href="#" class="brand">网站名</a>

<div class="nav-collapse collapse navbar-responsive-collapse">

<ul class="nav">

<li class="active">

<a href="#">主页</a>

</li>

<li>

<a href="#">链接</a>

</li>

<li>

<a href="#">链接</a>

</li>

<li class="dropdown">

<a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜单<strong class="caret"></strong></a>

<ul class="dropdown-menu">

<li>

<a href="#">下拉导航1</a>

</li>

<li>

<a href="#">下拉导航2</a>

</li>

<li>

<a href="#">其他</a>

</li>

<li class="divider">

</li>

<li class="nav-header">

标签

</li>

<li>

<a href="#">链接1</a>

</li>

<li>

<a href="#">链接2</a>

</li>

</ul>

</li>

</ul>

<ul class="nav pull-right">

<li>

<a href="#">右边链接</a>

</li>

<li class="divider-vertical">

</li>

<li class="dropdown">

<a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜单<strong class="caret"></strong></a>

<ul class="dropdown-menu">

<li>

<a href="#">下拉导航1</a>

</li>

<li>

<a href="#">下拉导航2</a>

</li>

<li>

<a href="#">其他</a>

</li>

<li class="divider">

</li>

<li>

<a href="#">链接3</a>

</li>

</ul>

</li>

</ul>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="row-fluid">

<div class="span8">

<h3>

h3. 这是一套可视化布局系统.

</h3>

<ul>

<li>

新闻资讯

</li>

<li>

体育竞技

</li>

<li>

娱乐八卦

</li>

<li>

前沿科技

</li>

<li>

环球财经

</li>

<li>

天气预报

</li>

<li>

房产家居

</li>

<li>

网络游戏

</li>

</ul>

<dl>

<dt>

Rolex

</dt>

<dd>

劳力士创始人为汉斯.威尔斯多夫,1908年他在瑞士将劳力士注册为商标。

</dd>

<dt>

Vacheron Constantin

</dt>

<dd>

始创于1775年的江诗丹顿已有250年历史,

</dd>

<dd>

是世界上历史最悠久、延续时间最长的名表之一。

</dd>

<dt>

IWC

</dt>

<dd>

创立于1868年的万国表有"机械表专家"之称。

</dd>

<dt>

Cartier

</dt>

<dd>

卡地亚拥有150多年历史,是法国珠宝金银首饰的制造名家。

</dd>

</dl>

</div>

<div class="span4">

<ul class="nav nav-list">

<li class="nav-header">

列表标题

</li>

<li class="active">

<a href="#">首页</a>

</li>

<li>

<a href="#"></a>

</li>

<li>

<a href="#">应用</a>

</li>

<li class="nav-header">

功能列表

</li>

<li>

<a href="#">资料</a>

</li>

<li>

<a href="#">设置</a>

</li>

<li class="divider">

</li>

<li>

<a href="#">帮助</a>

</li>

</ul>

</div>

</div>

<div class="row-fluid">

<div class="span12">

</div>

</div>

</div>

</body>

</html>

5. 相关视频资源

http://pan.baidu.com/s/1gdqV40F

使用bootstrap的小例子,简单的源代码

 

相关文章

从0开始学编程(22)-android开发环境搭建与入门教程

从0开始学编程(21)-Java网络编程入门

从0开始学编程(20)-Java线程入门

从0开始学编程(19)–java流概念入门

从0开始学编程(18)–java快速入门

从0开始学编程(17)–面向对象思想了解

从0开始学编程(16)–数据库加强

从0开始学编程(15)–总结篇-php编程强化巩固

从0开始学编程(14) – Php数据相关操作

从0开始学编程(13) Php获取form表单数据

从0开始学编程(12) 使用 eclipse的 php插件单步调试php程序

从0开始学编程(11) 使用 eclipse的 php插件 调试php程序

从0开始学编程(10) 用例子学习bootstrap的布局

从0开始学编程(9) – css、html和js简便工具

从0开始学编程(8) – 数据库简介

从0开始学编程(7) – 常用网站介绍

从0开始学编程(6)–在多了解一下php都涉及些啥东西

从0开始学编程(5)–方便的php编辑工具notepad++

从0开始学编程(4)–html基础入门

从0开始学编程(3)–学习必备的基础技能

从0开始学编程(2)–学习的方法和目标

从0开始学编程(1)–xampp配置php学习环境

发表评论