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小结的更多相关文章

  1. Bootstrap 小结

    Bootstrap 小结 Bootstrap4特点:1.兼容IE10+ 2.使用flexbox 布局 3.抛弃Nomalize.css 4.提供布局和 reboot 版本 Bootstrap组成:1. ...

  2. bootStrap小结3

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  3. bootStrap小结2

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  4. bootStrap小结1

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Node.js + Express 构建的订餐系统

    Node.js的版本 - v0.8.12 Express的版本 – v3.3.3  (安装 $ npm install -g express) 系统的登录逻辑是:获取用户名 + 密码,向内网RTX服务 ...

  6. 关于Bootstrap table的回调onLoadSuccess()和onPostBody()使用小结

    关于Bootstrap table的回调onLoadSuccess()和onPostBody()使用小结 Bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件, ...

  7. Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结

    Bootstrap时间日历插件bootstrap-datetimepicker配置与应用小结   by:授客 QQ:1033553122 1.   测试环境 win7 JQuery-3.2.1.min ...

  8. Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结

    Bootstrap表格插件bootstrap-table配置与应用小结   by:授客 QQ:1033553122 1.   测试环境 win7 JQuery-3.2.1.min.js 下载地址: h ...

  9. bootstrap与Select2使用小结

    这个select2组件的功能确实很强大,可以将图片放入到select里面随着文字一起显示. 组件的下载地址以及API说明地址: 1.Select2使用示例地址:https://select2.gith ...

随机推荐

  1. StringBuilder 大量字符串时使用,速度比较快

    public static void Main(string[] args) { Stopwatch sw = new Stopwatch(); //程序计时器 StringBuilder str = ...

  2. ecstore生成二维码

    利用phpqrcode库生成二维码: /* *二维码添加 */ ////////////////////////////////////// /*引入文件*/ @include(APP_DIR.'/i ...

  3. JS判断手机端和PC端自动跳转

    <script type="text/javascript">     function browserRedirect() {     var sUserAgent ...

  4. [POJ] 2239 Selecting Courses(二分图最大匹配)

    题目地址:http://poj.org/problem?id=2239 Li Ming大学选课,每天12节课,每周7天,每种同样的课可能有多节分布在不同天的不同节.问Li Ming最多可以选多少节课. ...

  5. js运算符的优先级

    自上向下优先级降低 运算符 描述 . [] () 字段访问.数组下标.函数调用以及表达式分组 ++ -- - ~ ! delete new typeof void 一元运算符.返回数据类型.对象创建. ...

  6. Bloglines订阅Blog部落格RSS网摘 - Blog透视镜

    网络信息蓬勃发展,Blog部落格越来越普及,如果逐一地去浏览网站,势必费时费力,倘若信息可以自己送上门,那就可以节省不少时间,就好像看报纸的标题,有兴趣才点连结,进到网站浏览文章内容,Blogline ...

  7. 基于AForge.Net框架的扑克牌识别

    原文:基于AForge.Net框架的扑克牌识别 © 版权所有 野比 2012 原文地址:点击查看 作者:Nazmi Altun Nazmi Altun著,野比 译  下载源代码 - 148.61 KB ...

  8. ASP.NET WEB API 如何使用基于Post的方式传递多个值(二)

    前面我曾经写过一篇文章,是基于HttpContext的请求上下文中读取表单参数,其实还可以将其单独拆分出来. 基于Filter的方式 获取表单值:(核心代码)   public void OnActi ...

  9. Linux生成core文件、core文件路径设置

    在Linux下产生并调试core文件 先看看我用的是个什么机器: $ uname -aLinux dev 2.4.21-9.30AXsmp #1 SMP Wed May 26 23:37:09 EDT ...

  10. jQuery中ajax的使用和缓存问题解决 $getjson 与$get都会被IE缓存

    原文地址:http://www.cnblogs.com/fullhouse/archive/2012/01/17/2324842.html 1:GET访问 浏览器 认为 是等幂的就是 一个相同的URL ...