html 列表bootstrap,bootstrap都有哪些类?

Bootstrap通过给标签赋予一个类名(class name),来生成对应类名的效果标签。那么bootstrap都有哪些类?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

92141b1adf6ab38026d73125e1cd8adf.png

网格选项row :行

col-*-*:列 (第一个*可以为xs[超小]/sm[小型]/md[中型]/lg[大型]第二个*必须为12以内的[列数])

col-*-offset-* :列偏移(第一个*和上面一样,第二个*范围是1到11,表示把该列的左外边距(margin)增加*列)

col-*-*-*:列排序(第一个*和上面一样,第二个*可以为push[向右]/pull[向左],第三个*范围是1到11[列数])

排版

small:内联子标题

lead:引导主体副本

text-*:文本样式(*号可以为left[左对齐]/center[居中对齐]/right[右对齐]/muted[减弱文本]

/primary/success/info/warning/danger

/justify[自动换行]/nowrap[不换行]

/lowercase[小写]/uppercase[大写]/capitalize[首字母大写])

list-inline:列表置于同一行

表格

table:基本样式(只有横向分隔线)

table-*:表格样式(*可以为striped[添加条纹]/bordered[添加边框]/hover[启用悬停]/condensed[更加紧凑])

tr/th/td 有active/success/info/warning/danger来改变背景颜色

将任意的table放在table-responsive内,实现响应式表格

bootstrap里active/success/info/warning/danger对应的背景颜色

0a6404592b567e973c45a065057e49cd.png

表单

创建基本表单(垂直表单)的步骤

1.向父

元素添加 role="form"。

2. 把标签和控件放在一个带有 class .form-group 的

中。这是获取最佳间距所必需的。

3. 向所有的文本元素 、 和 添加 class .form-control。

创建水平表单的步骤

1.向父

元素添加 class .form-horizontal。

2.把标签和控件放在一个带有 class .form-group 的

中。

3.向标签添加 class .control-label。

常见的表单控件主要是 input、textarea、checkbox、radio 和 select。

input: 声明type有text、password、datetime、datetime-local、date、month、time、week、

number、email、url、search、tel 和 color。

textarea:row决定高度

checkbox:复选框

radio:单选框

checkbox-inline:内联的复选框和单选框

select:选择框

对父元素添加验证状态has-*:验证样式(*可以为warning/error/success)

按钮

btn:基本样式

btn-*:其他样式(*可以为default/primary/success/info/warning/danger

/link[让按钮看起来像个链接]

/lg/sm/xs/

block[块级按钮,拉伸至父元素100%的宽度]/active/disabled)

图片

img-*:图片样式(*可以为rounded[圆角6px]

/circle[圆形]

/thumbnail[添加内边距和一个灰色的边框]/responsive)

辅助类

Bootstrap里的一些辅助类,除了上面的active/success/info/warning/danger 还有

pull-left/right 元素浮动到左边/右边

center-block 设置元素为 display:block 并居中显示

clearfix 清除浮动

show/hidden 强制显示/隐藏

close 显示关闭按钮

caret 显示下拉式功能

divider 分隔线

字体图标

在 fonts 文件夹内可以找到字体图标,它包含了下列这些文件:glyphicons-halflings-regular.eot

glyphicons-halflings-regular.svg

glyphicons-halflings-regular.ttf

glyphicons-halflings-regular.woff

更多图标参考http://www.runoob.com/bootstrap/bootstrap-glyphicons.html

下拉菜单

dropdown:下拉菜单

dropdown-menu: 下拉菜单

dropdown-header:下拉菜单区域标题

按钮组

btn-group:里面放置一系列btn

btn-toolbar:里面放置几组btn-group

btn-group-*:调整按钮组的样式(*可以为xs/sm/lg/vertical)

.btn-group 容器添加 .dropup实现按钮上拉菜单

输入框组

向 .form-control 添加前缀或后缀元素的步骤如下:

1.把前缀或后缀元素放在一个带有 class .input-group 的

中。

2.接着,在相同的

内,在 class 为 .input-group-addon 的 内放置额外的内容。

3.把该 放置在 元素的前面或者后面。为了保持跨浏览器的兼容性,请避免使用 元素,因为它们在 WebKit

浏览器中不能完全渲染出效果。也不要直接向表单组应用输入框组的 class,输入框组是一个孤立的组件。

导航元素

nav nav-tabs :标签式的导航菜单

nav nav-pills: 胶囊式的导航菜单

//同时使用nav-stacked 让胶囊垂直堆叠

//同时使用nav-justified 让标签式或胶囊式导航菜单与父元素等宽

导航栏

创建一个默认的导航栏的步骤如下:

1.向 标签添加 class .navbar、.navbar-default。

2.向上面的元素添加 role="navigation",有助于增加可访问性。

3.向

元素添加一个标题 class .navbar-header,内部包含了带有 class navbar-brand 的 元素。这会让文本看起来更大一号。

为了向导航栏添加链接,只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

navbar-btn: 导航栏中的按钮

navbar-text:导航栏中的文本

navbar-link:非标准导航链接

navbar-left/right:向左/向右对齐

navbar-fixed-top/bottom:固定在顶部/底部(为了防止导航栏与页面主体中的其他内容的顶部相交错,请向

标签添加至少 50 像素的内边距(padding),内边距的值可以根据您的需要进行设置)

navbar-static-top:能随着页面一起滚动的导航栏

nav-inverse :带有黑色背景白色文本的导航栏

面包屑导航

breadcrumb

fed932e71caaebbf4653ff16287d3761.png

分页

`pagination`:分页

`disabled/active` :不可点击/当前页面

`pager`:翻页

`previous/next`:把链接向左/向右对齐

标签

label-*:标签(*可以为default/primary/success/info/warning/danger)

徽章

badge

9ecaf1fefc7d9afdec30e3df8348d906.png

超大屏幕

jumbotron

页面标题

page-header

缩略图

thumbnail

添加自定义的内容

现在我们有了一个基本的缩略图,我们可以向缩略图添加各种 HTML 内容,比如标题、段落或按钮。具体步骤如下:

1、把带有 class .thumbnail 的

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值