twitter bootstrap 学习_twitter-bootstrap-CSDN博客

本文链接：https://blog.csdn.net/xiegqooo/article/details/7453826

本文介绍了从初次接触到使用Bootstrap的过程，包括下载、解压及第一个应用的实现。通过简单的modal插件示例展示了如何引入Bootstrap的基本样式及其响应式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

1、Twitter bootstrap 下载

github上面的下载方式很多，这里下载的 zip 压缩包。

下载地址是：http://twitter.github.com/bootstrap/assets/bootstrap.zip

2、解压bootstrap文件

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

3、第一个boostrap的应用

在docs目录下能找到examples的文件夹里面有三个文件。创建了 Lesson_1.htm的文件。下面是我些的代码。

<html>
<head>
<meta charset="utf-8">
<title>第一个 bootstrap 的应用</title>
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
	想看效果请
	<a data-toggle="modal" href="#myModal" class="btn">点击</a>
	吧 ！
	<div id="myModal" class="modal hide fade">
            <div class="modal-header">
              <a class="close" data-dismiss="modal" >×</a>
              <h3>添加标题</h3>
            </div>
            <div class="modal-body">
				这里当然是添加内容 。。。
            </div>
            <div class="modal-footer">
              <a href="#" class="btn btn-primary" >保存</a>
              <a href="#" class="btn" data-dismiss="modal" >关闭</a>
            </div>
    </div>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>

</body>

上面代码是bootstrap的 modal 插件的简单应用。

1、引用两个 css 样式。

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

bootstarp.css 是 bootstrap的基本样式。 bootstrap-responsive.css 是响应样式。

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

2、 html的基本元素

	想看效果请
	<a data-toggle="modal" href="#myModal" class="btn">点击</a>
	吧 ！
	<div id="myModal" class="modal hide fade">
            <div class="modal-header">
              <a class="close" data-dismiss="modal" >×</a>
              <h3>添加标题</h3>
            </div>
            <div class="modal-body">
				这里当然是添加内容 。。。
            </div>
            <div class="modal-footer">
              <a href="#" class="btn btn-primary" >保存</a>
              <a href="#" class="btn" data-dismiss="modal" >关闭</a>
            </div>
    </div>

其中的 data-toggle="modal" 是指定触发modal类型的元素。 href="#myModal" 或者 data-target="#myModal" 都是指被控制的 id="myModal" 元素。

data-dismiss="modal" 清除类型为modal的元素。

最后查看效果。