博客列表 >Bootstrap组件与插件--2019年5月28日

Bootstrap组件与插件--2019年5月28日

ChenPJ的博客
ChenPJ的博客原创
2019年06月10日 12:01:271064浏览

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 代码。


 

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议