文档章节

bootstrap 类 归类

N
 NNigel
发布于 2015/07/16 09:00
字数 512
阅读 12
收藏 1

bootstrap类总结

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



© 著作权归作者所有

N
粉丝 3
博文 13
码字总数 35191
作品 0
长春
私信 提问
[2015-15] 周会和分享 [李宝财, 刘政, 苏彬, 吴楠, 康顺, 李宝财, 赵殿有, 亓萌, 吴楠, 邢小燕, 赵殿有, 相龙强]

下周需要调整的内容 页面兼容性问题 去掉顶部的分类 企业发布的问题, 分类的调整, 涉及到城市的变更, 施总的产品方案 跟踪广告的处理 在线店和网店的整改方案 个人注册 企业注册 车企注册 网...

多厘
2015/04/14
6
0
把pdf文件转成静态html页面

【业务需求】 一份pdf文件,是一个玩具的说明书, 需要在app上呈现这个说明书,按内容归类分成3个静态html页面。 但当前html的版本不够美观细致,新的html页面可以使用第三方css,比如mdui,...

桥雾
2017/02/16
10
8
Linq:Group By用法

1.简单形式: var q =from p in db.Products group p by p.CategoryID into g select g; 语句描述:使用Group By按CategoryID划分产品。 说明:from p in db.Products 表示从表中将产品对象取...

随智阔
2013/07/17
138
0
养成这五个习惯,成为资深设计师(一)

习惯有一股强大的力量,它在不经意间改变你的生活方式,工作方式。良好的工作习惯可以极大地提高工作效率和专业能力。新人设计师刚刚从事在工作岗位,平时养成一些良好的习惯可以快速提升成长...

博为峰教研组
2016/12/21
7
0
Java 博客系统--Zblog 2

Zblog是一个java实现的开源博客系统。 核心功能 文章/页面发布、分类、统计阅读次数。 提供文章形式的RSS聚合。 提供链接的添加、归类功能。 附件上传添加管理功能。 评论的管理,垃圾信息过...

dongfangshangren
2015/07/12
9.5K
7

没有更多内容

加载失败,请刷新页面

加载更多

springboot2.0 maven打包分离lib,resources

springboot将工程打包成jar包后,会出现获取classpath下的文件出现测试环境正常而生产环境文件找不到的问题,这是因为 1、在调试过程中,文件是真实存在于磁盘的某个目录。此时通过获取文件路...

陈俊凯
今天
6
0
BootStrap

一、BootStrap 简洁、直观、强悍的前端开发框架,让web开发更加迅速、简单 中文镜像网站:http://www.bootcss.com 用于开发响应式布局、移动设备优先的WEB项目 1、使用boot 创建文件夹,在文...

wytao1995
今天
10
0
小知识:讲述Linux命令别名与资源文件的区别

别名 别名是命令的快捷方式。为那些需要经常执行,但需要很长时间输入的长命令创建快捷方式很有用。语法是: alias ppp='ping www.baidu.com' 它们并不总是用来缩短长命令。重要的是,你将它...

老孟的Linux私房菜
今天
8
0
《JAVA核心知识》学习笔记(6. Spring 原理)-5

它是一个全面的、企业应用开发一站式的解决方案,贯穿表现层、业务层、持久层。但是 Spring 仍然可以和其他的框架无缝整合。 6.1.1. Spring 特点 6.1.1.1. 轻量级 6.1.1.2. 控制反转 6.1.1....

Shingfi
今天
8
0
Excel导入数据库数据+Excel导入网页数据【实时追踪】

1.Excel导入数据库数据:数据选项卡------>导入数据 2.Excel导入网页数据【实时追踪】:

东方墨天
今天
11
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部