boostrap简单使用记录

关于bootstrap，只是在项目中，为了帮后台快速简单的写一个单页面，而使用了boostrap的一些组件。。简单记录一下，以便以后如果还要用到的话，可以快速回忆。

1. 文件引入

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

2. nav-tabs 选项卡使用

1. 通过 data 属性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。在内容区 通过 【id】标记渲染文本.
2. 添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，
   添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。
<ul class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">公告</a></li>
    <li><a href="#knowledge" data-toggle="tab">知识库</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <div style="padding:10px;">
            <div class="list-group">
                <a class="list-group-item"><span class="badge">1</span>Cras justo odio</a>
            </div>
        </div>
    </div>
    <div class="tab-pane fade" id="knowledge">
        <div style="padding:10px;">
            <div class="list-group" id="div_listKL">
                <div class="alert alert-danger" role="alert">
                    <a href="javascript:void(0);" class="alert-link">没有消息了！</a>
                </div>
            </div>
        </div>
    </div>
</div>

3. checkbox使用

<div>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3
    </label>
    <label class="checkbox-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 选项 1
    </label>
    <label class="checkbox-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2"> 选项 2
    </label>
</div>

// js监测checkbox是否被选中
$(function () {
    $("input[type='checkbox']").change(function () {
        $("input[type='checkbox']").each(function () {
            if ($(this).is(":checked")) {
                console.log($(this).val()); // 选中的CheckBox value值
                $(this).parent().removeClass('active');  //移除bootstrap选中样式
            }
        });
    })
})