bootstrap常用组件

BOOTSTRAP ginotang 959℃ 0评论

按钮(Button)

bootstrap可以为<a><button><input>元素添加按钮类以使用按钮组件,为了更好地解决跨浏览器显示问题,最好统一使用<button>元素。

bootstrap按钮依赖.btn样式,通过为button元素设置该样式即可创建一个简单的按钮。

bootstrap预定义了一系列的按钮样式,主要体现在颜色的不同。它们分别是:

  • btn-default:默认颜色
  • btn-primary: 蓝色
  • btn-info:浅蓝色
  • btn-success: 绿色
  • btn-warning: 黄色
  • bt-danger: 红色

样式如下:

bootstrap button style

bootstrap还提供了链接样式的按钮,使用btn-link标识

按钮尺寸

bootstrap的按钮有4中尺寸,分别是大(large)、默认(default)、小(small)、超小(extra small)

显示如下:

bootstrap button size

按钮状态

按钮可分为三种状态,它们是静止、激活、禁用。静止状态指按钮未被激活和禁用。这里主要讨论激活和禁用状态。

激活状态(按钮被按下):

通过添加.active样式把按钮设置为激活状态

通过设置元素属性disabled值为disabled把按钮设置为禁用状态

效果如下:

bootstrap button state

另外,如果按钮是使用<a>标签创建的,不能使用disabled属性,而是使用.disabledcss样式。

按钮组

按钮组用于把一组按钮放到同一行里。把.gtn-group样式应用到div上创建按钮组。按钮组里面的按钮互相之间没有补白(padding)

效果如下:

bootstrap button group

按钮组尺寸

按钮组同样也有4种尺寸,超小、小、默认、大。

效果如下:

bootstrap button group size

 

按钮工具栏

按钮工具栏可用于包裹按钮组,创建类似应用程序的toolbar样式。按钮工具栏使用.btn-toolbar标识。

效果如下:

bootstrap button toolbar

导航条

导航条是网页开发中最有用的组件,导航条的重要性不言而喻。bootstrap按导航条位置划分预定义了三种类型的导航条。

分别是固定在顶部、固定在底部和静止在顶部,对应的css样式分别是:

  • navbar-fixed-top        固定在顶部,会跟随页面滚动
  • navbar-fixed-bottom
  • navbar-static-top       静止在顶部,不会跟随页面滚动

 

bootstrap中的导航条由两部分组成,品牌商标和真正的导航组件。品牌商标主要用于放置公司的商标或标志性文字。

例如:

bootstrap navigation bar

上图中红框中的就是品牌图标,绿框就是真正的导航内容

创建最简单的导航条:

default navigation bar

navbar样式说明该div是一个导航条,而navbar-default则是创建默认样式的导航条。bootstrap导航条预定义两种样式,除了navbar-default外还有navbar-inversenavbar-inverse是黑底灰字。

响应式导航条

虽然上面的代码创建了一个完全可用的导航条,但是,当浏览器窗口缩少的时候,该导航条的外观就显得比较丑了。因此,最好是创建一个响应式的导航条。

响应式导航条的行为是:当浏览器窗口缩少到一定程度的时候,导航条内容隐藏到一个可折叠的菜单之中。

bootstrap responsive navigation

注意:响应式导航条需要jquery支持。

导航条中的表单

最常见的需求就是搜索。为form元素添加.navbar-form样式就可以获得导航条的表单支持,目的是为了取得较好的显示效果。

bootstrap navigation form

 

导航条按钮

最常见的需求是登录和注册。导航条按钮使用样式.navbar-btn标识,好处是应用了该样式的按钮在导航条中会自动垂直居中显示。

bootstrap navigation button

导航条文本

把文本包裹在 .navbar-text中时,为了有正确的行距和颜色,通常使用 <p> 标签。

该文本可应用于已登录提醒

bootstrap navigation text

警告框

警告框使用.alert样式设置,分别有4种类型的警告框

  • alert-success
  • alert-info
  • alert-warning
  • alert-danger

可关闭的警告框

使用.alert-dismissible样式设置可关闭的警告框,此类型的警告框需要另外添加一个关闭按钮。

警告框中的链接

通过为警告框中的<a>元素添加.alert-link样式来设置警告框链接。

进度条

进度条通过.progress样式设置。一个完整的进度条由两个div构成,一个是进度条的边框,一个是进度条本身的进度。进度条边框由.progress样式设置,实际进度由.progress-bar设置,而且需要显式设置progress-bar的进度样式。

bootstrap progress bar

带文字的进度条

如果要使用文字显示当前进度,只需要在.progress-bar中使用文字标出即可。

进度条的颜色

根据不同的环境,bootstrap可设置4中颜色的进度条。

bootstrap progress bar style

这四种样式分别对应progress-bar-success、progress-bar-info、progress-bar-warning和progress-bar-danger。

条纹效果的进度条

使用.progress-bar-striped样式设置进度条的条纹效果。

bootstrap striped progress bar

进度条动画

使用.active样式设置进度条的动画效果

 

 

 

转载请注明:Pure nonsense » bootstrap常用组件

喜欢 (0)
0 0 投票数
文章评分
订阅评论
提醒
guest
0 评论
内联反馈
查看所有评论
0
希望看到您的想法,请您发表评论x
()
x