基本CSS样式（三）

出处：http://blog.sina.com.cn/s/blog_656ee78e0101oqit.html

不可编辑的输入框

对于在表单中呈现不可编辑的数据，无需使用实际的表单控件。

Some value here

1. class="input-xlarge uneditable-input">Some value here

表单行为

将一组行为(按钮)放在表单尾部。当他们放置在.form-actions中时，这些按钮将会自动缩进，和其它表单控件对齐。

Save changes  Cancel

1. class="form-actions">
2. type="submit" class="btn btn-primary">Save changes
3. type="button" class="btn">Cancel

帮助文本

表单控件周围可以放置行内或块级元素展示帮助文本。

行内帮助

  Inline help text

1.  type="text"> class="help-inline">Inline help text

块级帮助

如果帮助文本过长，可采用块级显示。

1.  type="text"> class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.

---

表单控件状态

改变表单控件和label的反馈状态给用户或者访客提供反馈。

输入焦点

我们为一些表单控件移除了默认的outline样式，并且对他们的:focus状态设置了box-shadow样式。

1.  class="input-xlarge" id="focusedInput" type="text" value="This is focused...">

无效输入

为输入框设置:invalid样式从而激发浏览器默认功能。如果输入框是必填的，可以指定一个type和required属性，（如果合适的话）甚至还可以指定pattern属性。

由于Internet Explorer 7-9不支持CSS伪类选择器，因此不能在这些浏览器中使用。

1.  class="span3" type="email" required>

被禁用的输入框

给输入框添加disabled属性可阻止用户输入，并且输入框会呈现稍微不同的外观。

1.  class="input-xlarge" id="disabledInput" type="text"placeholder="Disabled input here..." disabled>

验证状态

Bootstrap包含了（错误）error、（警告）warning、（通知）info和（成功）success信息的样式。为.control-group添加适当的属性即可使用这些样式。

Input with warning

  Something may have gone wrong

Input with error

  Please correct the error

Input with info

  Username is taken

Input with success

  Woohoo!

1. class="control-group warning">
2. class="control-label" for="inputWarning">Input with warning
3. class="controls">
4.  type="text" id="inputWarning">
5. class="help-inline">Something may have gone wrong
6.  
7. class="control-group error">
8. class="control-label" for="inputError">Input with error
9. class="controls">
10.  type="text" id="inputError">
11. class="help-inline">Please correct the error
12.  
13. class="control-group info">
14. class="control-label" for="inputInfo">Input with info
15. class="controls">
16.  type="text" id="inputInfo">
17. class="help-inline">Username is already taken
18.  
19. class="control-group success">
20. class="control-label" for="inputSuccess">Input with success
21. class="controls">
22.  type="text" id="inputSuccess">
23. class="help-inline">Woohoo!

按钮

默认按钮

任何赋予.btn类的页面元素都会显示按钮样式。不过，通常是用于更好的表现 和  页面元素。

按钮	class=""	描述
默认	btn	带渐变的标准灰色按钮
主要	btn btn-primary	提供额外的视觉感, 可在一系列的按钮中指出主要操作
信息	btn btn-info	默认样式的替代样式
成功	btn btn-success	表示成功或积极的动作
警告	btn btn-warning	提醒应该谨慎采取这个动作
危险	btn btn-danger	表示这个动作危险或存在危险
反向	btn btn-inverse	备用的暗灰色按钮，不依赖于语义和用途
链接	btn btn-link	简化一个按钮, 使它看起来像一个链接，同时保持按钮的行为

浏览器兼容性

IE9 不支持圆角的背景渐变，所以我们干脆移除了。 IE9 jankifies 禁用了button元素， 显示文本为灰色并带有很垃圾的阴影，这个我们实在无法修复。

按钮大小

想使用更大或更小的按钮吗？添加.btn-large、.btn-small 或 .btn-mini即可改变按钮大小。

Large button  Large button

Default button  Default button

Small button  Small button

Mini button  Mini button

1. class="btn btn-large btn-primary" type="button">Large button
2. class="btn btn-large" type="button">Large button
4. class="btn btn-primary" type="button">Default button
5. class="btn" type="button">Default button
7. class="btn btn-small btn-primary" type="button">Small button
8. class="btn btn-small" type="button">Small button
10. class="btn btn-mini btn-primary" type="button">Mini button
11. class="btn btn-mini" type="button">Mini button

通过添加.btn-block类，可使按钮变为块级元素，同时会填充整个父级元素。

Block level button Block level button

1. class="btn btn-large btn-block btn-primary" type="button">Block level button
2. class="btn btn-large btn-block" type="button">Block level button

禁用状态

颜色淡出50%，让按钮看起来无法点击。

链接元素

给元素添加.disabled类。

Primary link Link

1. href="#" class="btn btn-large btn-primary disabled">Primary link
2. href="#" class="btn btn-large disabled">Link

注意！ 我们将.disabled作为一个工具类，和常见的.active类一样，因此无需添加前缀。另外，这个类只是为了美观，你必须自己写JavaScript代码来禁止链接的行为。

按钮元素

给添加disabled属性。

Primary button  Button

1. type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button
2. type="button" class="btn btn-large" disabled>Button

一个类支持多种标签

可以给、或元素添加.btn类。

Link  Button   

1. class="btn" href="">Link
2. class="btn" type="submit">Button
3.  class="btn" type="button" value="Input">
4.  class="btn" type="submit" value="Submit">

最佳实践是，根据使用环境，尝试找到一个合适的元素，以确保渲染的效果在各个浏览器保存基本一致。如果你正使用着一个input，那么你的按钮可使用 。

图片

为元素添加相应的类就可以很容易的给图片设置样式。

   

1.  src="..." class="img-rounded">
2.  src="..." class="img-circle">
3.  src="..." class="img-polaroid">

注意！ 由于IE7-8不支持border-radius，因此.img-rounded 和 .img-circle无法正常使用。

图标 由Glyphicons提供

Icon glyphs

下面展示的140个图标均提供了深灰色（默认）和白色两种颜色。由Glyphicons提供。

•  icon-glass
•  icon-music
•  icon-search
•  icon-envelope
•  icon-heart
•  icon-star
•  icon-star-empty
•  icon-user
•  icon-film
•  icon-th-large
•  icon-th
•  icon-th-list
•  icon-ok
•  icon-remove
•  icon-zoom-in
•  icon-zoom-out
•  icon-off
•  icon-signal
•  icon-cog
•  icon-trash
•  icon-home
•  icon-file
•  icon-time
•  icon-road
•  icon-download-alt
•  icon-download
•  icon-upload
•  icon-inbox
•  icon-play-circle
•  icon-repeat
•  icon-refresh
•  icon-list-alt
•  icon-lock
•  icon-flag
•  icon-headphones
•  icon-volume-off
•  icon-volume-down
•  icon-volume-up
•  icon-qrcode
•  icon-barcode
•  icon-tag
•  icon-tags
•  icon-book
•  icon-bookmark
•  icon-print
•  icon-camera
•  icon-font
•  icon-bold
•  icon-italic
•  icon-text-height
•  icon-text-width
•  icon-align-left
•  icon-align-center
•  icon-align-right
•  icon-align-justify
•  icon-list
•  icon-indent-left
•  icon-indent-right
•  icon-facetime-video
•  icon-picture
•  icon-pencil
•  icon-map-marker
•  icon-adjust
•  icon-tint
•  icon-edit
•  icon-share
•  icon-check
•  icon-move
•  icon-step-backward
•  icon-fast-backward
•  icon-backward
•  icon-play
•  icon-pause
•  icon-stop
•  icon-forward
•  icon-fast-forward
•  icon-step-forward
•  icon-eject
•  icon-chevron-left
•  icon-chevron-right
•  icon-plus-sign
•  icon-minus-sign
•  icon-remove-sign
•  icon-ok-sign
•  icon-question-sign
•  icon-info-sign
•  icon-screenshot
•  icon-remove-circle
•  icon-ok-circle
•  icon-ban-circle
•  icon-arrow-left
•  icon-arrow-right
•  icon-arrow-up
•  icon-arrow-down
•  icon-share-alt
•  icon-resize-full
•  icon-resize-small
•  icon-plus
•  icon-minus
•  icon-asterisk
•  icon-exclamation-sign
•  icon-gift
•  icon-leaf
•  icon-fire
•  icon-eye-open
•  icon-eye-close
•  icon-warning-sign
•  icon-plane
•  icon-calendar
•  icon-random
•  icon-comment
•  icon-magnet
•  icon-chevron-up
•  icon-chevron-down
•  icon-retweet
•  icon-shopping-cart
•  icon-folder-close
•  icon-folder-open
•  icon-resize-vertical
•  icon-resize-horizontal
•  icon-hdd
•  icon-bullhorn
•  icon-bell
•  icon-certificate
•  icon-thumbs-up
•  icon-thumbs-down
•  icon-hand-right
•  icon-hand-left
•  icon-hand-up
•  icon-hand-down
•  icon-circle-arrow-right
•  icon-circle-arrow-left
•  icon-circle-arrow-up
•  icon-circle-arrow-down
•  icon-globe
•  icon-wrench
•  icon-tasks
•  icon-filter
•  icon-briefcase
•  icon-fullscreen

Glyphicons attribution

Glyphicons Halflings 一般是收费的，但是经过Bootstrap和Glyphicons作者之间的协商，允许开发人员不需要支付费用即可使用。作为对作者的感谢，希望你在使用的时候加个Glyphicons的链接。

---

如何使用

每个图标都需要依附于一个标签，并且赋予一个唯一的类（class）。使用时，将类似下面的代码放到任何需要的地方即可：

1. class="icon-search">

也可以使用反色（白色）样式的图标，只需增加一个额外的类。我们将具体展示这些属性在导航条和下拉菜单中悬停和活动时候的状态效果。

1. class="icon-search icon-white">

注意！ 当在文本旁边使用这些图标时，例如按钮或导航链接，务必在标签后面 添加一个空格，这样能确保留有合适的间距。

---

图标案例

这些图标可以使用在按钮、工具栏的按钮组、导航或表单的前缀输入框。

按钮

工具栏的按钮组

     

1. class="btn-toolbar">
2. class="btn-group">
3. class="btn" href="#"> class="icon-align-left">
4. class="btn" href="#"> class="icon-align-center">
5. class="btn" href="#"> class="icon-align-right">
6. class="btn" href="#"> class="icon-align-justify">

按钮组中下拉菜单

 User 

1. class="btn-group">
2. class="btn btn-primary" href="#"> class="icon-user icon-white"> User
3. class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"> class="caret">
4. • class="dropdown-menu">
   • href="#"> class="icon-pencil"> Edit
5. href="#"> class="icon-trash"> Delete
6. href="#"> class="icon-ban-circle"> Ban
7. class="divider">
8. href="#"> class="i"> Make admin

按钮尺寸

 Star   Star   Star

1. class="btn btn-large" href="#"> class="icon-star"> Star
2. class="btn btn-small" href="#"> class="icon-star"> Star
3. class="btn btn-mini" href="#"> class="icon-star"> Star

导航

•  首页
•  Library
•  Applications
• Misc

1. • class="nav nav-list">
   • class="active"> href="#"> class="icon-home icon-white"> 首页
2. href="#"> class="icon-book"> Library
3. href="#"> class="icon-pencil"> Applications
4. href="#"> class="i"> Misc

表单域

Email address

1. class="control-group">
2. class="control-label" for="inputIcon">Email address
3. class="controls">
4. class="input-prepend">
5. class="add-on"> class="icon-envelope">
6.  class="span2" id="inputIcon" type="text">