bootstrap学习1：bootstrap开发环境

1、网站中使用Bootstrap框架

<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="js/jQuery.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.js" type="text/javascript"></script>

2、调用Bootstrap样式

以一个表格为例，要为一个表格添加样式，只需要在table中添加一个calss=“table”，就设置好样式了，如下：

<table class="table table-striped table-bordered">
    <tr><th>名称</th><th>说明</th></tr>
    <tr><td>苹果</td><td>水果</td></tr>
</table>

3、调用Bootstrap组件

布局方面，只要符合约定的一些class命名和嵌套结构，就可以轻松构建出一些通用组件。以导航条例：

<div class="navbar">
    <div class="navbar-inner">
        <ul class="nav">
            <li>new</li>
            <li>new</li>
            <li>new</li>
            <li>new</li>
        </ul>
    </div>
</div>

4、调用bootstrap js特效

根据特定的HTML结构，另一方面需要调用javascript插件。

一是添加data-toggle="tab"这样的属性实现的。

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#new" data-toggle="tab">new</a></li>
    <li><a href="#blog" data-toggle="tab">blog</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="new">newws</div>
    <div class="tab-pane" id="blog">blogg</div>
</div>

二是用js代码实现

<script type="text/javascript">
    $('#myTab a').click(function (e){
        e.preventDefault();
        $(this).tab('show');
    })
</script>