Bootstrap起步 20151212

两种使用方式

1下载bootstrap然后使用

2使用 Bootstrap 中文网提供的免费 CDN 加速服务（同时支持 http 和 https 协议）

为了方便，我选择2

Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务，请进入BootCDN 主页查看更多可用的工具库。

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

在html中加入以上几句话就可以开心的使用bootstrap了

要点：
css样式是通过class属性来进行定位的，所以在html中给自己的标签加入class属性就可以出现bootstrap样式了
现在的前端基本都是css+div模式
也就是说，基本都是通过
<div class="****">

</div>
方式将你想要表现的内容包裹起来

例如
<div class="jumbotron">
    <h1> 非记不可 </h1>
    <p> 基于地理位置的记账好帮手~</p>
</div>
jumbotron是一个巨幕的样式，这句话出来的效果就是：

好了，下面开始：
bootstrap官网上的文档有很多例子
我做这个页面的时候就是查看相关的例子，然后复制粘贴的：


比如说我想做一个大的绿色的button
就右键-》查看元素
然后把他的class属性的值复制下来
粘贴到我的html里面，效果就出来了

就是这么简单！

然后一边想着自己的需求，一边找一些例子，然后把合适class属性拿过来用就行了

关于布局：
bootstrap中的布局方式是：栅格
感觉就像是table的变种。。。
参考：http://v3.bootcss.com/css/#grid


整个界面首先要有一个container，然后在里面有 row（行） col（列）

row必须在container里面
col必须在row里面
你的内容只能放在col里面

整个row最多可分为12份，所以col的大小可以从1-12自行设计，一行超过12后自动切换下一行

这是一些初步的理解，详细内容还是要看官方文档

例如：
<div class="container">
<div id="myTabContent" class="tab-content">
   <div class="tab-pane fade in active" id="expensetypes">
 <div class="row">
{% for k in expensebody %}
                {% for k1 in k %}
<div class="col-md-3">
                        <h3>
                            <input class="form-control-lg" type="radio"  name="type" value="{{k1}}">{{k1}}
</h3>
                    </div>
{% end %}
            {% end %}
</div>
   </div>

</div>

我这里用的col-md-3 所以一行有4个我的内容  md的意思是笔记本大小的屏幕，另外还有lg sm xs，详细看说明，不表

效果：

据说这个栅格系统可以很好的适应不同的屏幕，但是我还不太会，用得不好

thats all