来源:http://www.cnblogs.com/ventlam/archive/2012/05/29/2520807.html
表格(Table)
可参考:http://twitter.github.com/bootstrap/base-css.html#tables
依然使用<table><tr><th><td>等标签来表现表格。主要提供了四个css的类来控制表格的边和结构。表2-1显示了bootstrap的table可选项。
名字 | Class | 描述 |
Default | None | 没有样式,只有行和列 |
Basic | .table | 只有在行间有竖线 |
Bordered | .table-bordered | 圆角和添加外边框 |
Zebra-stripe | .table-striped | 为奇数行添加淡灰色的背景色 |
Condensed | .table-condensed | 将横向的 padding 对切 |
表2-1 表格选项(Table Options)
我们可以将这些CSS类结合起来使用,如图2-4所示,显示一个混合的表格:
表单(Forms)
Bootstrap的表单是非常惊艳的部分。最好的地方在于你如何使用这些hmtl标签,它都会有很好的表现效果,而且不需要其他多余的代码。无论多复杂的布局都可以根据这些简洁,可扩展,事件绑定的要素来轻易实现。主要提供了四四种表单选项,如表2-2所示:
名字 | Class | 描述 |
Vertical (default) | .form-vertical (not required) | 堆放式, 可控制的左对齐标签 |
Inline | .form-inline | 左对齐标签和简约的内联控制块 |
Search | .form-search | 放大的圆角,具有美感的搜索框 |
Horizontal | .form-horizontal | 左漂浮, 右对齐标签 |
推荐到官方文档去体验下各种表单要素的真实效果,在chrome,Firefox等现代浏览器下显示十分优雅。同时可以使用.control-group来控制表单输入、错误等状态,需要wekit内核。如图2-5所示:
图2-5 表单状态控制
代码片段如下:
<div class="span8">
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label" for="focusedInput">Focused input</label>
<div class="controls">
<input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused…">
</div>
</div>
<div class="control-group">
<label class="control-label">Uneditable input</label>
<div class="controls">
<span class="input-xlarge uneditable-input">Some value here</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="disabledInput">Disabled input</label>
<div class="controls">
<input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
</div>
</div>
<div class="control-group">
<label class="control-label" for="optionsCheckbox2">Disabled checkbox</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" id="optionsCheckbox2" value="option1" disabled>
This is a disabled checkbox
</label>
</div>
</div>
<div class="control-group warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<div class="controls">
<input type="text" id="inputWarning">
<span class="help-inline">Something may have gone wrong</span>
</div>
</div>
<div class="control-group error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">Input with success</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-inline">Woohoo!</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="selectError">Select with success</label>
<div class="controls">
<select id="selectError">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<span class="help-inline">Woohoo!</span>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<button class="btn">Cancel</button>
</div>
</fieldset>
</form>
</div>
</div>