2019 十月 14 , 星期一
Home / web前端 / jquery / Bootstrap的一些笔记——form,button,etc.

Bootstrap的一些笔记——form,button,etc.

所有标签都可以添加class=”well”。用来增加默认样式(白色圆角的那个)。

<pre>标签不同于网格系统,是已经加入了可见样式的标签。可以结合google-code-prettify代码加亮。

相关地址:http://google-code-prettify.googlecode.com/svn/trunk/README.html

<table>标签有以下几个标签组成:<thead><tbody><tr><th><td>

其中<thead>中应包含<tr><th></th></tr>

其中<tbody>中应包含<tr><td></td></tr>

(因为th和td等等有各自的样式表)

同时,<table>表有可选class:table|table-bordered|table-striped|table-condensed

详细样式:http://twitter.github.com/bootstrap/base-css.html#tables

<form>标签有一些属性:.form-vertical(默认,水平排列);.form-inline(横向);.form- search(说是为搜索优化,没感觉有啥效果,水平);.form-horizontal(这个才应该是水平水平,但是完全没效果— —|||..)

太多的东西懒得写了,用个例子概括吧:

view plaincopyprint?
  1. <div class=”row”>
  2.     <div class=”span12″>
  3.         <form class=”form-horizontal”>
  4.             <fieldset>
  5.                 <legend>Form test</legend>
  6.                 <div class=”control-group”>
  7.                     <label class=”control-label”>Field one:</label>
  8.                     <div class=”controls”>
  9.                         <input class=”span6″ type=”text” placeholder=”.span6″>
  10.                     </div>
  11.                 </div>
  12.                 <div class=”control-group”>
  13.                     <label class=”control-label”>Field two:</label>
  14.                     <div class=”input-prepend”>
  15.                         <span class=”add-on”>www.</span>
  16.                         <input class=”span6″ type=”text” placeholder=”   .com”>
  17.                     </div>
  18.                 </div>
  19.                 <div class=”control-group”>
  20.                     <label class=”control-label”>Field three:</label>
  21.                     <div class=”input-append”>
  22.                         <input class=”span6″ type=”text” placeholder”www.   ”>
  23.                         <span class=”add-on”>.com</span>
  24.                     </div>
  25.                     <p class=”help-block”>Help text can be written here</p>
  26.                 </div>
  27.                 <div class=”form-actions”>
  28.                     <button type=”submit” class=”btn btn-primary”>Submit Button</button>
  29.                     <button type=”reset” class=”btn”>Reset Button</button>
  30.                     <p class=”help-block”>That’s all the example</p>
  31.                 </div>
  32.             </fieldset>
  33.         </form>
  34.     </div>
  35. </div>

按钮首先要有.btn属性才能显示出bootstrap的效果。

同时还可以附加属性:.btn-primary;.btn-info;.btn-success;.btn-warning;.btn-danger;

不多说,贴例子:

view plaincopyprint?
  1. <section id=”showButton”>
  2.     <div class=”row show-grid”>
  3.         <legend>Button show:</legend>
  4.             <div class=”span2″>
  5.                 <center>
  6.                     <button type=”button” class=”btn”>Button(Normal)</button>
  7.                     <p class=”help-block”>.btn</p>
  8.                 </center>
  9.             </div>
  10.             <div class=”span2″>
  11.                 <center>
  12.                     <button type=”button” class=”btn btn-primary”>Button(Primary)</button>
  13.                     <p class=”help-block”>.btn .btn-primary</p>
  14.                 </center>
  15.             </div>
  16.             <div class=”span2″>
  17.                 <center>
  18.                     <button type=”button” class=”btn btn-info”>Button(Info)</button>
  19.                     <p class=”help-block”>.btn .btn-info</p>
  20.                 </center>
  21.             </div>
  22.             <div class=”span2″>
  23.                 <center>
  24.                     <button type=”button” class=”btn btn-success”>Button(Success)</button>
  25.                     <p class=”help-block”>.btn .btn-success</p>
  26.                 </center>
  27.             </div>
  28.             <div class=”span2″>
  29.                 <center>
  30.                     <button type=”button” class=”btn btn-warning”>Button(Warning)</button>
  31.                     <p class=”help-block”>.btn .btn-warning</p>
  32.                 </center>
  33.             </div>
  34.             <div class=”span2″>
  35.                 <center>
  36.                     <button type=”button” class=”btn btn-danger”>Button(Danger)</button>
  37.                     <p class=”help-block”>.btn .btn-danger</p>
  38.                 </center>
  39.             </div>
  40.     </div>
  41. </section>

同时按钮还有尺寸属性,分别是btn-large和btn-small。

调用按钮不一定非要用<button/>在bootstrap中还可以通过<a/>强制调用,其他属性同button。

.disabled属性可以让按钮处于实效状态(灰选)。

bootstrap提供一堆icon,都是通过以icon-为前缀的属性调用的,调用方式例如:

view plaincopyprint?
  1. <i class=”icon-search”>

bootstrap提供的所有的icon如下:

view plaincopyprint?
  1. <i class=”icon-glass”></i>
  2.  <i class=”icon-music”></i>
  3.  <i class=”icon-search”></i>
  4.  <i class=”icon-envelope”></i>
  5.  <i class=”icon-heart”></i>
  6.  <i class=”icon-star”></i>
  7.  <i class=”icon-star-empty”></i>
  8.  <i class=”icon-user”></i>
  9.  <i class=”icon-film”></i>
  10.  <i class=”icon-th-large”></i>
  11.  <i class=”icon-th”></i>
  12.  <i class=”icon-th-list”></i>
  13.  <i class=”icon-ok”></i>
  14.  <i class=”icon-remove”></i>
  15.  <i class=”icon-zoom-in”></i>
  16.  <i class=”icon-zoom-out”></i>
  17.  <i class=”icon-off”></i>
  18.  <i class=”icon-signal”></i>
  19.  <i class=”icon-cog”></i>
  20.  <i class=”icon-trash”></i>
  21.  <i class=”icon-home”></i>
  22.  <i class=”icon-file”></i>
  23.  <i class=”icon-time”></i>
  24.  <i class=”icon-road”></i>
  25.  <i class=”icon-download-alt”></i>
  26.  <i class=”icon-download”></i>
  27.  <i class=”icon-upload”></i>
  28.  <i class=”icon-inbox”></i>
  29.  <i class=”icon-play-circle”></i>
  30.  <i class=”icon-repeat”></i>
  31.  <i class=”icon-refresh”></i>
  32.  <i class=”icon-list-alt”></i>
  33.  <i class=”icon-lock”></i>
  34.  <i class=”icon-flag”></i>
  35.  <i class=”icon-headphones”></i>
  36.  <i class=”icon-volume-off”></i>
  37.  <i class=”icon-volume-down”></i>
  38.  <i class=”icon-volume-up”></i>
  39.  <i class=”icon-qrcode”></i>
  40.  <i class=”icon-barcode”></i>
  41.  <i class=”icon-tag”></i>
  42.  <i class=”icon-tags”></i>
  43.  <i class=”icon-book”></i>
  44.  <i class=”icon-bookmark”></i>
  45.  <i class=”icon-print”></i>
  46.  <i class=”icon-camera”></i>
  47.  <i class=”icon-font”></i>
  48.  <i class=”icon-bold”></i>
  49.  <i class=”icon-italic”></i>
  50.  <i class=”icon-text-height”></i>
  51.  <i class=”icon-text-width”></i>
  52.  <i class=”icon-align-left”></i>
  53.  <i class=”icon-align-center”></i>
  54.  <i class=”icon-align-right”></i>
  55.  <i class=”icon-align-justify”></i>
  56.  <i class=”icon-list”></i>
  57.  <i class=”icon-indent-left”></i>
  58.  <i class=”icon-indent-right”></i>
  59.  <i class=”icon-facetime-video”></i>
  60.  <i class=”icon-picture”></i>
  61.  <i class=”icon-pencil”></i>
  62.  <i class=”icon-map-marker”></i>
  63.  <i class=”icon-adjust”></i>
  64.  <i class=”icon-tint”></i>
  65.  <i class=”icon-edit”></i>
  66.  <i class=”icon-share”></i>
  67.  <i class=”icon-check”></i>
  68.  <i class=”icon-move”></i>
  69.  <i class=”icon-step-backward”></i>
  70.  <i class=”icon-fast-backward”></i>
  71.  <i class=”icon-backward”></i>
  72.  <i class=”icon-play”></i>
  73.  <i class=”icon-pause”></i>
  74.  <i class=”icon-stop”></i>
  75.  <i class=”icon-forward”></i>
  76.  <i class=”icon-fast-forward”></i>
  77.  <i class=”icon-step-forward”></i>
  78.  <i class=”icon-eject”></i>
  79.  <i class=”icon-chevron-left”></i>
  80.  <i class=”icon-chevron-right”></i>
  81.  <i class=”icon-plus-sign”></i>
  82.  <i class=”icon-minus-sign”></i>
  83.  <i class=”icon-remove-sign”></i>
  84.  <i class=”icon-ok-sign”></i>
  85.  <i class=”icon-question-sign”></i>
  86.  <i class=”icon-info-sign”></i>
  87.  <i class=”icon-screenshot”></i>
  88.  <i class=”icon-remove-circle”></i>
  89.  <i class=”icon-ok-circle”></i>
  90.  <i class=”icon-ban-circle”></i>
  91.  <i class=”icon-arrow-left”></i>
  92.  <i class=”icon-arrow-right”></i>
  93.  <i class=”icon-arrow-up”></i>
  94.  <i class=”icon-arrow-down”></i>
  95.  <i class=”icon-share-alt”></i>
  96.  <i class=”icon-resize-full”></i>
  97.  <i class=”icon-resize-small”></i>
  98.  <i class=”icon-plus”></i>
  99.  <i class=”icon-minus”></i>
  100.  <i class=”icon-asterisk”></i>
  101.  <i class=”icon-exclamation-sign”></i>
  102.  <i class=”icon-gift”></i>
  103.  <i class=”icon-leaf”></i>
  104.  <i class=”icon-fire”></i>
  105.  <i class=”icon-eye-open”></i>
  106.  <i class=”icon-eye-close”></i>
  107.  <i class=”icon-warning-sign”></i>
  108.  <i class=”icon-plane”></i>
  109.  <i class=”icon-calendar”></i>
  110.  <i class=”icon-random”></i>
  111.  <i class=”icon-comment”></i>
  112.  <i class=”icon-magnet”></i>
  113.  <i class=”icon-chevron-up”></i>
  114.  <i class=”icon-chevron-down”></i>
  115.  <i class=”icon-retweet”></i>
  116.  <i class=”icon-shopping-cart”></i>
  117.  <i class=”icon-folder-close”></i>
  118.  <i class=”icon-folder-open”></i>
  119.  <i class=”icon-resize-vertical”></i>
  120.  <i class=”icon-resize-horizontal”></i>

我们甚至能够利用Button和Icon制作出有动态效果的Button-Group。例如

view plaincopyprint?
  1. <section>
  2.     <div class=”row”>
  3.         <div class=”span12″>
  4.             <div class=”btn-group”>
  5.                 <a class=”btn btn-primary” href=”#”><i class=”icon white user”></i> User</a>
  6.                 <a class=”btn btn-primary dropdown-toggle” data-toggle=”dropdown” href=”#”><span class=”caret”></span></a>
  7.                 <ul class=”dropdown-menu”>
  8.                     <li><a href=”#”><i class=”icon-pencil”></i> Edit</a></li>
  9.                     <li><a href=”#”><i class=”icon-trash”></i> Delete</a></li>
  10.                     <li><a href=”#”><i class=”icon-ban-circle”></i> Ban</a></li>
  11.                     <li class=”divider”></li>
  12.                     <li><a href=”#”><i class=”i”></i> Make admin</a></li>
  13.                 </ul>
  14.             </div>
  15.         </div>
  16.     </div>
  17. </section>

或者是一个很炫的nav list

view plaincopyprint?
  1. <section>
  2.     <div class=”row”>
  3.         <div class=”span12″>
  4.             <div class=”well” style=”padding: 8px 0;”>
  5.                 <ul class=”nav nav-list”>
  6.                     <li class=”active”><a href=”#”><i class=”icon-home icon-white”></i> Home</a></li>
  7.                     <li><a href=”#”><i class=”icon-book”></i> Library</a></li>
  8.                     <li><a href=”#”><i class=”icon-pencil”></i> Applications</a></li>
  9.                     <li><a href=”#”><i class=”i”></i> Misc</a></li>
  10.                 </ul>
  11.             </div>
  12.         </div>
  13.     </div>
  14. </section>

原文

Check Also

Jquery form 插件

表单插件API提供了几个方法, ...

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>