bootstrap - 小记

官网：http://twitter.github.com/bootstrap/

<link rel="stylesheet" href="${path}/css/bootstrap.css" type="text/css" title="default"></link>

<script type="text/javascript" src="${path}/js/bootstrap.js"></script>

<!-- 常用的-->

<input type="text" class="input-small">
<table class="table table-striped">
<button type="button" class="btn btn-primary" style="margin-right: 20px;">
<a class="btn btn-success">
<a class="brand" href="#">综合开拓示例</a>

<div id="main" class="container" >整个内容居中

 

tab面板：

<div id="tabs" class="tabbable" style="height:250px;">
                <ul class="nav nav-tabs">
                    <li>
                        <a id="tab_1" href="#tabs-1" data-toggle="tab">投保人信息</a>
                    </li>
                    <li>
                        <a id="tab_3" href="#tabs-3" data-toggle="tab">险种信息</a>
                    </li>
                </ul>
    <div class="tab-content" >
       <div id="tabs-1" class="tab-pane active"></div>
       <div id="tabs-3" class="tab-pane"></div>
    </div>
</div>

加上<table class="table table-bordered"><!-- 表格加上边框样式-->

效果图：

 

table样式

<table class="table table-striped">

效果图：

 

 

typeahead:对应jquery的自动补全控件

<input type="text" class="span2" id="qc_provider_name" name="qc_provider_name" data-provide="typeahead" data-items="4" data-source='[${providerList}]' value="${qc_provider_name}">

 小结：jquery是通过接受json格式的list，并通过自己写一段js实现，而bootstrap是接受一个字符串就可以了，虽然后者简单，但灵活程度不及jquery