Bootstrap table

来源: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>

 

      

 

 

没有更多推荐了,返回首页