Blogger Information
Blog 32
fans 0
comment 0
visits 28185
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Bootstrap组件与插件--2019年5月28日
ChenPJ的博客
Original
1068 people have browsed it

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


 

Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments