bootstrap小结
bootstrap总结
bootstrap总结
base css 我分为了几大类
1,列表
.unstyled(无样式列表),.dl-horizontal(dl列表水平排列)
2,代码
code(行级),pre(块级),.pre-scrollable(显示滚动条), 显示行号和美化: .prettyprint,.linenums
3,表格
.table(基础样式) .table-bordered(样式边框) , .table-striped(间隔效果) , .table-condensed(缩小表格)
4,表单
.from-inline(所有元素在一列) , .form-horizontal(没一横排一个表单项)
.form-horizontal -->需要结合组件:
fieldset.control-group
|
|-->label.control-label
|
|-->.controls
5,按钮
.btn(基础样式) , .btn-primary(重要,蓝色) , .btn-info(信息,浅蓝), .btn-success(成功,绿色), .btn-warning(警告,黄色) .btn-danger(危险,红色) , .btn-inverse(相反,黑色)
6,标签
.label(基础样式), .label-important(重要,红色) , .label-success(成功, 蓝色), .label-warning(警告,黄色), .label-info(信息,浅蓝色) .label-inverse(相反,黑色)
7,标记
.badge(基础样式), .badge-success(成功,绿色), .badge-warning(警告,黄色),badge-error(错误,红色), .badge-info(信息,浅蓝色)
8,警告
.alert(基础样式), .alert-success(成功,绿色), .alert-error(错误,红色), .alert-info(信息,蓝色) , .alert-block(获得更多的padding), 里面可以 .alert-heading(标题) , <a class="close" data-dismiss="alert"$amp;>amp;$amp;times;</a>(关闭按钮)
9,图标
.icon-user(用户), .icon-drash(删除), .icon-refrash(刷新), .icon-cog(齿轮) icon-white(反白)
10,手风琴
.accordion
|
|->.accordion-group
| |
| |->.accordion-heading
| | |
| | |->.accordion-toggle (data-toggle="collapse" #demo1" data-parent="#accordion2")
| |
| |->accordion-body
| | |
| | |->accordion-inner
组件。
1,导航
.navbar (.navbar-fixed-top|.navbar-fixed-bottom)
|
|-->.navbar-inner
|
|->container
|
|->brand (项目名)
|
|->ul.nav (菜单)
| |
| |->li.divider-vertical 竖分割线
|
|->form.navbar-form(搜索框)
| |
| |->search-query
|
|->.dropdown (下拉菜单)
|
|->pull-right(使元素有右浮动)
2,面包屑
ul.breadcrumb
|
|->li
|
|->a
|
|->span.divider(分割线<span class="divider">/</div>)
3,排版
(1) 主角元素
.hero-unit
|
|->h1(主标题)
|
|->p(副内容)
(2) 页面标题,有下边框
.page-header
|
|->h1
|->small
4,tab页
div.tabbable (tabs-below|tabs-left|tabs-bottom)
|
|->ul.nav (nav-tabs|nav-pills|nav-list) nav-stracked(竖立折叠式)
| |
| |->li.active
| | |
| | |->a--> #id", data-toggle="tab"
| |
| |->li.nav-header (nav-list时用,表示一个菜单头)
| |
| |->li.divider(nav-list时用,分割线)
| |
| |->li.dropdown
|
|->tab-content
| |
| |->div#id .tab-pane (active)
5,缩略列表
ul.thumbnails
|
|->li.span*
|
|->.thumbnail
|
|->(.caption) 详情描述
6,按钮组
.btn-toolbar
|
|->.btn-group
|
|->.btn
7,下拉菜单
.btn-group | .dropdown |.dropup
|
|->.btn .dropdown-toggle (data-toggle="dropdown")
| |
| |->span.caret
|
|->ul.dropdown-menu
|
|->li.divider
8,进度条
.progress (.progress-striped| .actvie)
|
|->.bar ()
9,页码
.pagination (.pagination-centered|.paginaction-right)
|
|->ul
|
|->li(.active)
javascript:
1,对话框
(1)对话框组件:
.modal (设置宽度)
|
|->.modal-header
| |
| |->.close (data-dismiss="modal") [注,.close必须放在前面]
| |
| |->h3
|
|->.modal-body
|
|->.modal-footer
| |
| |->.btn
(2)标记触发
<a #mymodal" data-toggle="modal" data-backdrop="false" data-keyboard="false">打开对话框</a>
(3)javascript
a)初始化:
$("#mymodal").modal({
dropback:true,
keyboard:true,
show:true
});
b) 触发
$("#mymodal").modal(
bootstrap小结的更多相关文章
- Bootstrap 小结
Bootstrap 小结 Bootstrap4特点:1.兼容IE10+ 2.使用flexbox 布局 3.抛弃Nomalize.css 4.提供布局和 reboot 版本 Bootstrap组成:1. ...
- bootStrap小结3
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
- bootStrap小结2
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
- bootStrap小结1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Node.js + Express 构建的订餐系统
Node.js的版本 - v0.8.12 Express的版本 – v3.3.3 (安装 $ npm install -g express) 系统的登录逻辑是:获取用户名 + 密码,向内网RTX服务 ...
- 关于Bootstrap table的回调onLoadSuccess()和onPostBody()使用小结
关于Bootstrap table的回调onLoadSuccess()和onPostBody()使用小结 Bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件, ...
- Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
Bootstrap时间日历插件bootstrap-datetimepicker配置与应用小结 by:授客 QQ:1033553122 1. 测试环境 win7 JQuery-3.2.1.min ...
- Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结
Bootstrap表格插件bootstrap-table配置与应用小结 by:授客 QQ:1033553122 1. 测试环境 win7 JQuery-3.2.1.min.js 下载地址: h ...
- bootstrap与Select2使用小结
这个select2组件的功能确实很强大,可以将图片放入到select里面随着文字一起显示. 组件的下载地址以及API说明地址: 1.Select2使用示例地址:https://select2.gith ...
随机推荐
- 武汉科技大学ACM :1003: 零起点学算法67——统计字母数字等个数
Problem Description 输入一串字符,统计这串字符里的字母个数,数字个数,空格字数以及其他字符(最多不超过100个字符) Input 多组测试数据,每行一组 Output 每组输出一行 ...
- 3月20日html(二) 图片热点,网页划分,表单
1.图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. <img src=" usemap="map" name=" ...
- PHP页面中文乱码问题
首先纯html页要用meta标签声明编码<meta http-equiv="Content-Type" content="text/html; charset=&q ...
- Symfony2中的设计模式——装饰者模式
装饰者模式的定义 文章链接:http://www.hcoding.com/?p=101 个人站点:http://www.hcoding.com/ 在不必改变原类文件和使用继承的情况下,动态地扩展一个 ...
- 绘制数据图表的又一利器:C3.js
- android studio如何查看数据库文件
android studio查看数据库文件有两种方式: 1.SQLSCOUT 优点:集成在as中,功能强大. 缺点:收费,破解麻烦. 2.Android Device Monitor 中的File E ...
- windows mongodb 安装
window平台一下所有命令 务必以管理员身份运行 且在window系统命令行下,如git bash不可以 具体以管理员身份运行的快捷键是 1. win+x 2. shift + a 设置文件存储目录 ...
- 进程外组件通信之免注册com通信【原创】
最近在搞进程外组件通信的东西,写了个demo,免注册的,一直没调通,其实就是两个问题卡了好几天,也没找到有用的资料,试了好几天终于才解决,现简单记录下来,免得大家跟我走一样的弯路.下面com端程序名称 ...
- Request对象 --web浏览器向web服务端的请求
一]Request对象常用方法 1)StringBuffer getRequestURL() url表示访问web应用的完整路径 2)Stri ...
- jQuery实现置顶和置底特效
原文地址:http://www.jqueryba.com/3403.html <script src="jquery.min.js" type="text/java ...