【学习笔记】Bootstrap常用组件整理

Bootstrap作为twitter推出的前端开发工具包,短时间内便红遍业界。确实它功能强大并且界面美观。

虽然在实际工作中较少会在非服务器端的项目中用到,但是bootsrap依然是值得我们在平常学习研究的优秀框架。


这里整理出了一些bootstrap的组件,供大家参考。

一、工具类:




	
		Bootstrap 工具类
		
		
		
		
		

	

	
		
关闭按钮
浮动pull-left
浮动pull-right
show/hidden
居中center-block
Skip to main content
截图:


二、组件




	
		Bootstrap 组件
		
		
		
		
		

	

	

		

		

表格

商品编号 商品名称 商品描述 商品种类 操作 操作
1 macbook air 苹果最新超薄笔记本 笔记本 修改 删除
2 ipad pro 苹果最新平板电脑 平板电脑 修改 删除
3 iphone6s plus 苹果最新大屏手机 手机 修改 删除

胶囊式导航条

垂直胶囊导航条

面包屑导航条

箭头

按钮组

垂直按钮组

两端对齐按钮组

嵌套按钮组

input控件组 搜索框

搜索框2 带下拉菜单

搜索框—+文字

输入完成后回车

列表后面加徽章 badge

分页

更大或更小的分页 pagination-lg pagination-sm

上下页

加previous next 两端对齐

各种标签

Default Primary Success Info Warning Danger

提示信息

面板

基础面板示例
面板页头
面板内容省略...

面板配色同标签

进度条

进度条 颜色命名规律同标签

加斜条纹效果 progress-bar-striped


截图:

【学习笔记】Bootstrap常用组件整理_第1张图片

三、js




	
		bootstrap js特效

		

		
		

	

	
		

创建模模态对话框(Modal)

标签页

我是商品介绍
我是规格参数
我是包装清单
我是商品评价
我是售后保障

tooltip

工具提示

弹出框

点击了解更多

提示信息

警告,服务器挂了! X
截图:

【学习笔记】Bootstrap常用组件整理_第2张图片



你可能感兴趣的:(学习笔记)