码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap——组件

时间:2018-01-09 21:13:36      阅读:271      评论:0      收藏:0      [点我收藏+]

标签:strip   导航条   led   图片   com   音频   简单的   orm   组件   

1.字体图标

<span class="glyphicon glyphicon-star" aria-hidden="true"></span> 
  • glyphicon:图标的通用类
  • glyphicon-star:图标类型(样式)
  • aria-hidden="true":通用,避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容

实例:

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

效果:

技术分享图片

 

2.下拉菜单

  • dropup:向上弹出
  • dropdown:向下弹出
  • dropdown-menu:下拉菜单的通用类
  • dropdown-menu-right:向右对齐
  • dropdown-menu-left:向左对齐(默认情况)
  • role="separator" class="divider":为下拉菜单添加一条分割线
  • disabled:禁用菜单的选项
  • dropdown-toggle:下拉菜单通用类

 

3.按钮组

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
</div>

btn-group:按钮容器通用类

role=“group”:按钮,为了正确传达按钮分组

role=“toolbar”:工具栏,就是里面再包裹多个role=“group”

btn-group-lg/sm/xs:按钮组的尺寸(大/略小/很小)

btn-group-vertical:让按钮垂直排列

btn-group-justified:两段对齐排列按钮组(居于屏幕中间)

btn-lg/sm/xs:按钮时下拉菜单的所有尺寸

 

4.输入框组

 input-group:输入框组

input-group-addon:input框两边添加字符

input-group-btn:input框两边添加按钮

input-group-lg/sm:input框的大小

 

5.导航

role="navigation":如果想在导航组件上实现导航功能,必须添加

nav:导航的基类

nav-tabs:基本标签页

nav-pills:胶囊式标签页

nav-stacked:垂直方向(只适合胶囊)

 nav-justified:两端对齐的(置于屏幕中间,自动调整尺寸)

disabled:禁用的链接(任何导航组件都可以添加)

 

6.导航条

 navbar:导航条通用类

navbar-default:默认样式(颜色、高度等)

role="navigation":增加访问性

navbar-header:导航标题

navbar-brand:让字体变粗,一般包含在标题之内

navbar-form:将表单放在里面可以垂直对齐

navbar-left/right:让导航链接、表单、按钮或文本对齐

navbar-btn:不包含在form中的元素,使用此属性可以在导航条中居中

navbar-text:导航条中的文本

navbar-link:让链接有正确的默认颜色和反色设置

navbar-fixed-top:让导航条固定在顶部,可以包含容器,让导航条居中。

  导航条可能会遮住页面其它内容,需要设置一个padding-top。

navbar-fixed-bottom:让导航条固定到底部,需设置padding-bottom,不然也会遮住其它内容

navbar-static-top:创建夜歌与页面等宽度的导航条,但是往下拉会消失。

navbar-inverse:反色,改变导航条的外观。

技术分享图片

技术分享图片

 

7.路径导航

pagination:路径导航通用类

 

 

8.分页

 Page navigation:分页

 pagination-lg/sm:尺寸

pager:翻页

previous/next:对齐链接

disabled:禁用状态

技术分享图片

技术分享图片

 

 

9.标签

label-default/primary/success/info/warning/danger:标签的外观

<h1>~<h6>:尺寸

 

10.徽章

badge:徽章 

 技术分享图片

 

11.巨幕

jumbotron:巨幕 

 

12.页头

page-header:页头组件能够为h1标签增加适当的空间,与其他页面也有一些分隔。

 

 

13.警告框

alert-dismissible:可关闭的警告框

 alert-success/info/warning/danger:为弹出框设置颜色

 

14.进度条

progress:进度条通用类

progress-bar:进度条本身设置

progress-bar-success/info/warning/danger:设置颜色 

progress-bar-striped:进度条条纹

active:动画效果

 

15.媒体对象

 media: 允许将媒体对象里的多媒体(图像、视频、音频)浮动到内容区块的左边或者右边。

media-right/left:浮动到左边或右边

media-body/heading:媒体对象主体或头部

media-list:媒体对象中的列表

 

16.列表组

list-group :用于以列表形式呈现复杂的和自定义的内容

list-group-item:列表中的项

 

17.面板

panel:面板基本类

panel-default:默认属性 

panel-heading:面板头部

panel-body:面板标题会和表格连接起来,没有空隙

panel-title:面板标题

<h1>-<h6>:字体大小

panel-footer:带脚注的面板

 

18.well

well:嵌入简单的效果

well-sm/lg:尺寸

 

Bootstrap——组件

标签:strip   导航条   led   图片   com   音频   简单的   orm   组件   

原文地址:https://www.cnblogs.com/yangmingxianshen/p/8253529.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!