`
xiegqooo
  • 浏览: 15336 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

twitter bootstrap 第一章

twitterbootstarp 
阅读更多
前几天我听朋友说起 twitter bootstrap 。我带着好奇在网上搜索了一下，都是一些英文信息。本来就头大 ，加上英文不好，只好到github上下载了源码参考着学习了一下 。下面是我安装 booostrap的几个步骤。


1、Twitter bootstrap 下载


github上面的下载方式很多，这里下载的 zip 压缩包。
本章以v2.0.2 写的，考虑以后 bootstrap 可能会升级 。
下载地址是：http://twitter.github.com/bootstrap/assets/bootstrap.zip
百度U盘 href="http://pan.baidu.com/share/link?shareid=92110&uk=1862801370


2、解压bootstrap文件

解开后的目录有 docs 、img 、 js 、 less 和几个文件 。看到的第一眼，让人不由自主的点击了 docs 文件夹。在这里就可以开始学习了 。

3、第一个boostrap的应用

在docs目录下能找到examples的文件夹里面有三个文件。创建了 Lesson_1.htm的文件 。 下面是我些的代码 。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>Bootstrap--Lesson_1</title>

<!-- Le styles -->
<link rel="stylesheet" href="../boostrap/css/bootstrap.min.css" >
<link rel="stylesheet" href="../boostrap/css/bootstrap-responsive.min.css" >

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>

<body>

<div id="myModal" class="modal">
<div class="modal-header">
<a class="close" data-dismiss="modal" >×</a>
<h3>twitter bootstrap 第一章</h3>
</div>
<div class="modal-body">
这是第一个 bootstrap 程序 。</br>
Hello word !
<div style="float:right;">Tity-开始你学习之旅</div>
</div>
<div class="modal-footer">
保存
关闭
</div>
</div>
</body>
</html>
上面代码是bootstrap的 modal 插件的简单应用。


1、引用两个 css 样式。

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

bootstrap.min.css 是 bootstrap的基本样式。
bootstrap-responsive.min.css 是响应样式。
注意：bootstrap.min.css 要放在 bootstrap-responsive.min.css样式的前面。 如果要添加自己的样式必需放在 bootstrap-responsive.min.css 后面。


2、 html的基本元素

<div id="myModal" class="modal">
<div class="modal-header">
<a class="close" data-dismiss="modal" >×</a>
<h3>twitter bootstrap 第一章</h3>
</div>
<div class="modal-body">
这是第一个 bootstrap 程序 。</br>
Hello word !
<div style="float:right;">Tity-开始你学习之旅</div>
</div>
<div class="modal-footer">
保存
关闭
</div>
</div>

最后查看效果 。

源代码
http://pan.baidu.com/share/link?shareid=92152&uk=1862801370
0
顶
2
踩
分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics