html 列表bootstrap,bootstrap都有哪些类?
Bootstrap通过给标签赋予一个类名(class name),来生成对应类名的效果标签。那么bootstrap都有哪些类?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
网格选项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对应的背景颜色
表单
创建基本表单(垂直表单)的步骤
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.接着,在相同的
3.把该 放置在 元素的前面或者后面。为了保持跨浏览器的兼容性,请避免使用 元素,因为它们在 WebKit
浏览器中不能完全渲染出效果。也不要直接向表单组应用输入框组的 class,输入框组是一个孤立的组件。
导航元素
nav nav-tabs :标签式的导航菜单
nav nav-pills: 胶囊式的导航菜单
//同时使用nav-stacked 让胶囊垂直堆叠
//同时使用nav-justified 让标签式或胶囊式导航菜单与父元素等宽
导航栏
创建一个默认的导航栏的步骤如下:
1.向 标签添加 class .navbar、.navbar-default。
2.向上面的元素添加 role="navigation",有助于增加可访问性。
3.向
为了向导航栏添加链接,只需要简单地添加带有 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
分页
`pagination`:分页
`disabled/active` :不可点击/当前页面
`pager`:翻页
`previous/next`:把链接向左/向右对齐
标签
label-*:标签(*可以为default/primary/success/info/warning/danger)
徽章
badge
超大屏幕
jumbotron
页面标题
page-header
缩略图
thumbnail
添加自定义的内容
现在我们有了一个基本的缩略图,我们可以向缩略图添加各种 HTML 内容,比如标题、段落或按钮。具体步骤如下:
1、把带有 class .thumbnail 的
html 列表bootstrap,bootstrap都有哪些类?相关推荐
- 前端三件套系例之BootStrap——BootStrap基础、 BootStrap布局
文章目录 1 BootStrap基础 1 什么是BootStrap 2 BootStrap的版本 3 BootStrap 下载 4 CDN服务 5 目录结构 6 基本模板 7 浏览器支持 8 浏览器兼 ...
- Object类 任何类都是object类的子类 用object对象接收数组 object类的向上向下转型...
任何类都是object类的子类 用object对象接收数组 object类的向上向下转型 转载于:https://www.cnblogs.com/qingyundian/p/7744351.html
- 私有方法与静态私有方法_每个私有静态方法都是新类的候选人
私有方法与静态私有方法 您是否有私有的静态方法来帮助您将算法分解为更小的部分? 我做. 每当我编写一个新方法时,我就会意识到它可以是一个新类. 当然,我不会从所有课程中选修课程,但这必须是目标. 私有 ...
- 每个私有静态方法都是新类的候选人
您是否有私有的静态方法来帮助您将算法分解为更小的部分? 我做. 每次编写新方法时,我都会意识到它可以是一个新类. 当然,我不会从所有课程中选修课程,但这是目标. 私有静态方法不可重用,而类则可重用,这 ...
- 继承(四):new方法都与基类中方法无关
using System; using System.Collections.Generic; using System.Linq; using System.Text;namespace Inher ...
- v67.03 鸿蒙内核源码分析(字符设备) | 绝大多数设备都是这类 | 百篇博客分析OpenHarmony源码
曾子曰:"君子以文会友,以友辅仁." <论语>:颜渊篇 百篇博客系列篇.本篇为: v67.xx 鸿蒙内核源码分析(字符设备篇) | 绝大多数设备都是这类 文件系统相关篇 ...
- 计算机术语bootstrap,Bootstrap及jackknife刀切法中文讲义.pdf
Bootstrap及jackknife刀切法中文讲义 上节课内容总结 统计推断基本概念 统计模型:参数模型与非参数模型 统计推断/模型估计:点估计.区间估计.假设检验 估计的评价:无偏 ...
- 爬虫入门------从数据看奥斯卡陪跑健将到底是谁?学院派评委都热衷于哪类电影?
前言 奥斯卡颁奖季虽已过去有些日子,<寄生虫>夺得最佳影片,<1917>也不拉下风,全片的长镜头的确震撼,这都不是今天要蹭的过气热点.作为一个电影死忠,当然还是想通过数据看看谁 ...
- java 中操作字符串都有哪些类?它们之间有什么区别?
java 中操作字符串都有哪些类?它们之间有什么区别? String.StringBuffer.StringBuilder String : final修饰,String类的方法都是返回new Str ...
最新文章
- QT5利用chromium内核与HTML页面交互
- [云炬创业基础笔记]成长资源培养与控制
- tomcat错误:The page you tried to access (/manager/login.do) does not exist
- 前端学习(3059):vue+element今日头条管理-优化文章状态
- 机器人 魂斗罗铁血兵团_《魂斗罗铁血兵团:反叛》XBLA游戏下载
- vue项目中eslint检查警告——“Trailing spaces not allowed”
- Java 蓝桥杯 算法 和为T
- [python基础] 浮点数乘法的误差问题
- 数字信号处理matlab实验心得,数字信号处理学习心得体会3篇
- 油猴安装错误问题(下载中断问题)及脚本安装
- MYSQL查询语句大全集锦
- 安卓谷歌地图离线包_手机卫星地图
- 计算机论文物业管理系统,物业小区管理系统 计算机专业毕业论文
- 金笛JDMAIL邮件系统办公管理—文件中转站
- makefile if 使用
- Go select chan操作
- 行星月球科学探索成绩斐然 桌面实验或可理解黑洞性质
- python教程马哥_【60集全】全新马哥教育 运维必备python基础语法全讲解_IT教程网...
- 国密SM2算法(JS加密,C#、Java解密)
- 还原扩容的缩水U盘真实容量方法(转载)
热门文章
- 机器学习类别/标称(categorical)数据处理:目标编码(target encoding)
- 词袋模型(bag of words)构建并使用主题模型(topic models)特征进行文本聚类分析(clustering analysis)实战
- AIC+BIC+HQ+赤池信息量+贝叶斯信息量
- limma包分析差异表达基因
- Hybrid Error Correction approach and DeNovo Assembly for MinIon Sequencing Long Reads
- GATB的使用小例子test.cpp
- 什么检索是借助计算机技术进行自动标引的,自动文献检索系统
- JAVA基础2-输出语句
- php session_start() 非常慢,PHP session_start()很慢问题分析与解决办法
- java8 流操作_java8中的流操作