打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
基本CSS样式(三)
对于在表单中呈现不可编辑的数据,无需使用实际的表单控件。
Some value hereclass="input-xlargeuneditable-input">Some value here
表单行为
将一组行为(按钮)放在表单尾部。当他们放置在.form-actions中时,这些按钮将会自动缩进,和其它表单控件对齐。
class="form-actions">
帮助文本
表单控件周围可以放置行内或块级元素展示帮助文本。
行内帮助
Inlinehelp texttype="text"> class="help-inline">Inline helptext
块级帮助
如果帮助文本过长,可采用块级显示。type="text"> class="help-block">A longer block of help text thatbreaks onto a new line and may extend beyond oneline.
表单控件状态
改变表单控件和label的反馈状态给用户或者访客提供反馈。
输入焦点
我们为一些表单控件移除了默认的outline样式,并且对他们的:focus状态设置了box-shadow样式。
class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
无效输入
为输入框设置:invalid样式从而激发浏览器默认功能。如果输入框是必填的,可以指定一个type和required属性,(如果合适的话)甚至还可以指定pattern属性。
由于Internet Explorer7-9不支持CSS伪类选择器,因此不能在这些浏览器中使用。
class="span3" type="email" required>
被禁用的输入框
给输入框添加disabled属性可阻止用户输入,并且输入框会呈现稍微不同的外观。
class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..."disabled>
验证状态
Bootstrap包含了(错误)error、(警告)warning、(通知)info和(成功)success信息的样式。为.control-group添加适当的属性即可使用这些样式。
Input with warning Somethingmay have gone wrong
Input with error Pleasecorrect the error
Input with info Usernameis taken
Input with success Woohoo!
class="control-groupwarning">
class="control-label" for="inputWarning">Input withwarning
class="controls">
type="text" id="inputWarning">
class="help-inline">Something may have gonewrong
class="control-group error">
class="control-label" for="inputError">Input witherror
class="controls">
type="text" id="inputError">
class="help-inline">Please correct theerror
class="control-group info">
class="control-label" for="inputInfo">Input withinfo
class="controls">
type="text" id="inputInfo">
class="help-inline">Username is alreadytaken
class="control-groupsuccess">
class="control-label" for="inputSuccess">Input withsuccess
class="controls">
type="text" id="inputSuccess">
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 不支持圆角的背景渐变,所以我们干脆移除了。 IE9jankifies 禁用了button元素,显示文本为灰色并带有很垃圾的阴影,这个我们实在无法修复。
按钮大小
想使用更大或更小的按钮吗?添加.btn-large、.btn-small 或 .btn-mini即可改变按钮大小。
通过添加.btn-block类,可使按钮变为块级元素,同时会填充整个父级元素。
禁用状态
颜色淡出50%,让按钮看起来无法点击。
链接元素
Primary link Link
注意! 我们将.disabled作为一个工具类,和常见的.active类一样,因此无需添加前缀。另外,这个类只是为了美观,你必须自己写JavaScript代码来禁止链接的行为。
按钮元素
给添加disabled属性。
一个类支持多种标签
可以给
Link
class="btn" type="button" value="Input">
class="btn" type="submit" value="Submit">
最佳实践是,根据使用环境,尝试找到一个合适的元素,以确保渲染的效果在各个浏览器保存基本一致。如果你正使用着一个input,那么你的按钮可使用 。
图片
为元素添加相应的类就可以很容易的给图片设置样式。
 
 
src="..." class="img-rounded">
src="..." class="img-circle">
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)。使用时,将类似下面的代码放到任何需要的地方即可:
class="icon-search">
也可以使用反色(白色)样式的图标,只需增加一个额外的类。我们将具体展示这些属性在导航条和下拉菜单中悬停和活动时候的状态效果。
class="icon-searchicon-white">
注意! 当在文本旁边使用这些图标时,例如按钮或导航链接,务必在标签后面添加一个空格,这样能确保留有合适的间距。
图标案例
这些图标可以使用在按钮、工具栏的按钮组、导航或表单的前缀输入框。
按钮
工具栏的按钮组
class="btn-toolbar">
class="btn-group">
按钮组中下拉菜单
 User
class="btn-group">
class="dropdown-menu">
class="divider">
按钮尺寸
 Star  Star  Star
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
Base · Bootstrap
bootstrap4 按钮样式应用其他标签
PHP:如何在模态URL中放置和传递变量
HTML5 CSS3构建同页面表单间的动画切换
Bootstrap的常用类(CSS和布局组件)的总结
Bootstrap-全局css样式之按钮
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服