Bootstrap学习

昨天Bug改完了，目前没什么事情，今天就第一次看了一下传说中的Bootstrap，好多不明白的地方，我就是一小白。

1.只要在元素上添加 data-toggle="collapse" 和 data-target 就能自动变成可折叠的。 data-target 属性接受一个css选择器，以选取元素添加折叠。 一定要在折叠元素上添加 .collapse 。如果要默认某折叠元素是打开的，只要添加 .in 

刚开始还不太明白，后来动手写了几行代码，就大概明白了。

比如要实现如下效果：

 

其中learn more按钮的代码：

<p>
   <a href="#learn-more-content" class="btn btn-primary btn-large" data-toggle="collapse">Learn more ?</a>
</p>

下面文字部分的代码：

<div id="learn-more-content" class="collapse" style="height:0px;">
     <p>this is a template for a simple marketing or informational website.It includes a large callout called the hero unit and three supporting pieces of content.Use it as a starting point to create something more unique.</p>
</div>

在learn more所属的元素<a>标签上添加data-toggle和data-target两个属性，其中data-toggle属性值为collapse表示该元素要实现折叠效果，data-target属性值表示要折叠的目标。这里就是下面id为"learn-more-content"部分的文字内容。

如果想折叠元素默认是打开的，则可以设置被折叠元素（这里就是id="learn-more-content"的div元素啦）的class="in"或者class="collapse" style="height:auto;"就好了。

 

http://selfcontroller./blog/1787722