1、输入框组
input文本框与其它组件的组合,实现对表单控件的扩展
基本类:input-group
修饰类:input-group-lg、input-group-sm 调整输入框尺寸
额外元素:input-group-addon、input-group-btn,包裹添加在输入框两侧的额外元素
1、添加字体图标:glyphicon(基本类),glyphicon-envelope、glyphicon-jpy(修饰类)
2、添加下拉菜单:btn(基本类),btn-default、dropdown(修饰类,与自定义属性)
2、导航
不同风格的导航样式,利用修饰类改变外观
基本类:nav
修饰类:nav-tabs(标签页样式)、nav-pills(胶囊样式)、nav-stacked(垂直导航)
3、导航条
导航条组成比较复杂,依靠基本类做为主容器,利用修饰类改变外观及元素添加
基本类:nav
修饰类:navbar-default、navbar-inverse
4、分页
在nav标签中实现分页
基本类:pagination
修饰类:pagination-lg 改变分页外观尺寸
分页的另一种形式,翻页
基本类:pager
5、标签与徽章
标签:有背景的文本,可用在分类说明、标题的声明
包含在一对<span>标签中
基本类:label
修饰类:label-default、label-primary、label-success等,改变标签背景色
徽章:与标签非常相似,有背景的文本,大多用于显示计数,也是放在一对span标签内
基本类:badge
6、巨幕
巨幕通常用于首页展示关键内容,可以延伸至整个页面
基本类:jumbotron
利用container-fluid将巨幕延伸至整个页面
7、缩略图
以栅格样式展示图片、视频等内容
基本类:thumbnail
缩略图标题:caption
与按钮组合,实现商城功能
Bulma框架
Bulma 框架最大的特点,就是简单好用。所有样式都基于class,只需为 HTML 元素指定class,样式立刻生效。Bulma 是一个手机优先的框架,提供五个宽度断点,具有良好的自适应特性,可以随心所欲为不同设备设置不同样式。它提供二十多种常用组件,比如表单 、表格、图标、面包屑、菜单、导航、Modal 窗口等等。简单的网站,可以不用写任何 CSS 代码。