twitter bootstrap 学习

最新推荐文章于 2020-07-05 17:55:17 发布

xiegqooo

最新推荐文章于 2020-07-05 17:55:17 发布

阅读量3.4k

点赞数

分类专栏： Twitter-bootstrap 文章标签： twitter class div stylesheet less html

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

版权

Twitter-bootstrap 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前几天我听朋友说起 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的元素。

最后查看效果。

第一次，写博客请多多指教。有更好的学习方法请留言。

xiegqooo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
twitter bootstrap 学习

前几天我听朋友说起 twitter bootstrap 。我带着好奇在网上搜索了一下，都是一些英文信息。本来就头大，加上英文不好，只好到github上下载了源码参考着学习了一下。下面是我安装 booostrap的几个步骤。 1、Twitter bootstrap 下载 github上面的下载方式很多，这里下载的 zip 压缩包。
复制链接

扫一扫