关闭

twitter bootstrap 学习

2680人阅读 评论(4) 收藏 举报


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

          最后查看效果 。

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

0
0

猜你在找
【直播】机器学习&深度学习系统实战(唐宇迪)
【直播】Kaggle 神器:XGBoost 从基础到实战(冒教授)
【直播回放】深度学习基础与TensorFlow实践(王琛)
【直播】计算机视觉原理及实战(屈教授)
【直播】机器学习之凸优化(马博士)
【直播】机器学习之矩阵(黄博士)
【直播】机器学习之概率与统计推断(冒教授)
【直播】机器学习之数学基础
【直播】TensorFlow实战进阶(智亮)
【直播】深度学习30天系统实训(唐宇迪)
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:24345次
    • 积分:409
    • 等级:
    • 排名:千里之外
    • 原创:12篇
    • 转载:0篇
    • 译文:0篇
    • 评论:10条
    文章分类
    最新评论