文档章节

bootstrap 3, 全局样式、组件 学习总结。

h
 horacerain
发布于 2016/11/02 18:00
字数 2549
阅读 131
收藏 2

全局样式css

  • 概览
    1. 移动设备优先 为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签。 user-scalable=no表示禁止缩放。

<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> ```

2. 布局容器
    .container 类用于固定宽度并支持响应式布局的容器       
    .container-fluid  类用于 100% 宽度,占据全部视口(viewport)的容器
  • 栅格系统
    1. .row > .col- 列必须包含在行内, 默认12列 根据媒体查询将列前缀分为4种 col-lg-* , col-md-* , col-sm-* , col-xs-*
      在阈值处改变作用范围。 分别为 width 等于 768px ,992px ,1200px。
    2. 列偏移    col-lg-offset-*    表示向右偏移*列。
      
  • 排版
    1. 对齐: .text-left .text-right .text-center .justify (两端对齐) .nowrap (不换行)
    2. 改变大小写: .text-lowercase .text-uppercase .text-capitalize
    3. 基本缩略语 : <abbr title=""></abbr>
    4. 首字母缩略语 : <abbr title="" class=“initialism”></abbr>
    5. 引用 :<blockquote></blockquote>
    6. 列表 : .list-unstyled 无样式列表 .list-inline 内联列表
  • 代码
    1. 内联代码 : <code></code>
    2. 用户输入 : <kbd></dbd>
    3. 代码块 : <pre></pre>
    4. 变量 : <var></var>
    5. 程序输出 :<samp></samp>
  • 表格
    1. 表格基本样式  .table   (每个表格先加上的类 ,默认无边框)
      
    2. 条纹状表格    .table-striped    (给<tbody>里行添加斑马线效果)
      
    3. 带边框表格    .table-bordered
      
    4. 鼠标悬停效果   .table-hover
      
    5. 紧缩型表格    .table-condensed
      
    6. 状态类 (改变单元格<td>或者行<tr>颜色)     .success    .info    .danger    .warning    .active
      
    7. 响应式表格(根据页面大小改变大小,文字不隐藏,超出出现滚动条)    .table-responsive
      
  • 表单
    1. 基本格式 <form> <div class="form-group"> <label class="sr-only"></label><input class="form-control">...

      所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%; 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

    2. 内联表单 .form-inline 只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。
    3. 水平排列表单

    通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了 表单元素对不齐:标签可能写错了 <label>--<lable>?

输入图片说明

> 内联单选和多选框
通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框(checkbox)或单选框(radio)控件    上,可以使这些控件排列在一行。

4. 下拉选

使用默认选项或添加 multiple 属性可以同时显示多个选项。 eg: <select multiple class="form-control"> 5. 静态控件 如果需要在表单中将一行纯文本和 label 元素放置于同一行,为 <p> 元素添加 .form-control-static 类即可。 6. 校验状态 > Bootstrap 对表单控件的校验状态,如 error、warning 和 success 状态,都定义了样式。使用时,添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。 7. 控制尺寸 通过 .input-lg 类似的类可以为控件设置高度,通过 .col-lg-* 类似的类可以为控件设置宽度。 水平排列的表单组的尺寸--- 通过添加 .form-group-lg 或 .form-group-sm 类,为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。

  • 按钮
    1. 声明类.btn 预定义样式类.btn-info .btn-danger .btn-warning .btn-success .btn-primary .btn-default
    2. 按钮尺寸 类 .btn-lg .btn-sm .btn-xs
    3. 通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。
    4. 激活/禁用状态 .active .disabled
    5. <a>元素创建按钮 .btn .btn-default(任意与定义样式) .active(可选)
    6. <input>元素创建按钮 同上
  • 图片
    1. 响应式图片

在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%; 和 height: auto; 属性,从而让图片在其父元素中更好的缩放。

在 Internet Explorer 8-10 中,设置为 .img-responsive 的 SVG 图像显示出的尺寸不匀称。为了解决这个问题,在出问题的地方添加 width: 100% \9; 即可。Bootstrap 并没有自动为所有图像元素设置这一属性,因为这会导致其他图像格式出现错乱。 2. 图片形状 类 .img-rounded .img-circle .img-thumbnail

  • 响应式工具
    1. 可用的类 对应屏幕是否可见、如何显示 .visible-xs-* .visible-sm-* .visible-md-* .visible-lg-*
      .hidden-xs .hidden-sm .hidden-md .hidden-lg *可能是.visible--block .visible--inline .visible-*-inline-block
    2. 打印类 对应打印机是否可见、如何显示 .visible-print-block .visible-print-inline .visible-print-inline-block .hidden-print

组件

  • Glyphicons 字体图标

    1. 不要和其他组件混合使用
    2. 只对内容为空的元素起作用
    3. 应该创建一个嵌套的 <span> 标签,并将图标类应用到这个 <span> 标签上。
    4. 必须加一类 .glyphicon 再加一个名称类 如 glyphicon-ok-sign
  • 下拉菜单 用于显示链接列表的可切换、有上下文的菜单。

    将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。

    1. 结构。div .dropdown data-toggle="dropdown" > button + span.caret + ul .dropdown-menu > li
    2. 对齐 右对齐: div .dropdown .pull-right , ul .dropdown-menu dropdown-menu-right
    3. 标题 li .dropdown-header
    4. 分割线 li .divider
    5. 禁用 li .disabled
  • 按钮组 通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为。

    1. 实例 div . btn-group
    2. 工具栏 div .btn-toolbar > div btn-group + div btn-group ..
    3. 尺寸 .btn-group-* (xs、sm、lg)
    4. 嵌套 .btn-group > .btn-group
      把下拉选混入按钮组。 不需要.dropdown
    5. 垂直排列 .btn-group .btn-group-vertical
    6. 两端对齐 .btn-group .btn-group-justified (若是<a>元素按钮,justified可用。若是<button>,每一个<button>元素都要单独放在一个div .btn-group中)
  • 按钮式下拉菜单

    1. 分列式下拉菜单,将<span class="caret"> 和 按钮名 分别放在一个<button>中.
    2. 向上弹出式菜单 .dropup
  • 输入框组 通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮,可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 类,可以给 .form-control 的前面或后面添加额外的元素。

    1. 仅支持<input>元素 不支持在输入框的单独一侧添加多个额外元素 不支持在单个输入框组中添加多个表单控件
    2. 尺寸 .input-group-*
    3. 作为额外元素的多选框和单选框 写在 <span input-group-addon>中
    4. 作为额外元素的按钮 : 写在 <span input-group-btn>中
    5. 作为额外元素的按钮式下拉菜单 : 只能用按钮式下拉菜单。
    6. 作为额外元素的分裂式按钮下拉菜单: 同上。
  • 导航 Bootstrap 中的导航组件都依赖同一个 .nav 类,状态类也是共用的。改变修饰类可以改变样式。

    1. 标签页 :ul .nav .nav-tabs > li

      注意 .nav-tabs 类依赖 .nav 基类。

    2. 胶囊式标签页 :ul .nav .nav-pills > li

    3. 两端对齐的标签页 : .nav-justified

    4. 禁用的链接 : li .disabled

    5. 添加下拉菜单 : li .dropdown (下拉选)

    6. 导航点击交互效果 js 代码

<script type="text/javascript"> $("#mytab a").click(function(e){ e.preventDefault(); $(this).tab("show"); }) </script>

- 导航条
        导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式。
    1. 格式: nav .navbar .navbar-* > div .navbar-header + div .collapse  .navbar-collapse >导航ul .nav  .navbar-nav +form .navbar-form .navbar-left  + 导航.navbar-right  .navbar-nav .nav
    2. 表单    在导航条里添加表单 加类 .navbar-form    
    3. 按钮    在导航条里添加按钮   添加类.navbar-btn 可垂直居中   也可以直接方法哦上述表单中,不需添加这个类。
    4. 文本    在导航条里添加文本      .navbar-text
    5. 非导航的链接
            或许你希望在标准的导航组件之外添加标准链接,那么,使用 .navbar-link 类可以让链接有正确的默认颜色和反色设置。
    6. 组件排列    .navbar-left     .navbar-right
    7. 固定在顶部    固定在底部
            添加 .navbar-fixed-top/.navbar-fixed-bottom 类可以让导航条固定在顶部,还可包含一个 .container 或 .container-fluid 容器,从而让导航条居中,并在两侧添加内部(padding)。
    >这个固定的导航条会遮住页面上的其它内容,除非你给 <body> 元素底部设置了 padding。用你自己的值,或用下面给出的代码都可以。提示:导航条的默认高度是 50px。
    ```
body { padding-top: 70px; }    body { padding-bottom: 70px; }
8. 静止在顶部    .navbar-static-top
        它会随着页面向下滚动而消失,不用给 body 添加任何内部(padding)
9. 反色的导航条         
          通过添加 .navbar-inverse 类可以改变导航条的外观
  • 路径导航 ul中添加 .breadcrumb

  • 分页 .pagination

    1. 尺寸 .pagination-lg .pagination-sm
    2. 翻页 (只有向前、向后)ul中添加 .pager

    对齐链接 在翻页ul >li 中添加类 .previous .next 3. 可选的禁用状态, 激活状态 li .active li .disabled

  • 标签 span .label .label-default

/ .label-primary / .label-success / .label-info /.label-danger /.label-warning

  • 徽章 给链接、导航等元素嵌套 <span class="badge"> 元素,可以很醒目的展示新的或未读的信息条目。

  • 巨幕 .jumbotron

  • 页头
    页头组件能够为 h1 标签增加适当的空间,并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果,还支持大部分其他组件(需要增加一些额外的样式)。

  • 缩略图 .thumbnail (图片建议放在<a>元素中)

    1. 自定义内容 div .thumbnail > img +div.caption
  • 警告框

    1. .alert ( 这个必须设置) .alert-success 等 没有默认选项。
    2. 可关闭的警告框 务必给 <button> 元素添加 data-dismiss="alert" 属性。 (× 是 ‘ × ’ 号)
    3. 警告框中的链接 a .alert-link
  • 进度条

    1.  格式     div .progress > div .progress-bar style="width:**%" >**%
      
    2. 进度条数字较低情况  : 在style 中添加   min-width:20px;
      
    3. 根据情景变换效果 progress-bar-info 、..success 、 ..warning 、..danger
    4. 条纹效果 在 .progress里添加 .progress-striped或 在 .progress-bar 里添加.progress-bar-striped
    5. 动画效果 在 .progress 里加 active . 或者 .progress-bar里加active
    6. 堆叠效果 在 .progress里添加多个 .progress-bar (超过100%会换行。。)
  • 媒体对象

    1. 默认样式 div .media > (a .media-left > img ) +(div .media-body >h*.media-heading)

    2. 媒体对象列表 ul .media-list > li .media .......

      (媒体对象的meida-body里嵌入媒体对象可现实出层级缩进效果)

  • 列表组

    1. 基本实例 ul .list-group > li .list-group-item
    2. 徽章 在 li 中 加入徽章 <span class="badge>
    3. 链接 把ul 元素换成 div, 吧 li 标签换成 <a>标签。
    4. 被禁用的条目 a .disabled
    5. 情景类 列表项.list-group-item 中添加类 .list-group-item-info ...等
    6. 定制内容 列表项中可添加 定制内容,可以类 .list-group-item-heading .list-group-item-text
  • 面板 panel 默认的 .panel 组件所做的只是设置基本的边框(border)和内补(padding)来包含内容。

    1. 带标题的面板 面板 .panel 面板标题.panel-heading 面板内容 .panel-body .panel-title
    2. 带脚注的面板    .panel-footer
      
    3. 情景效果 .panel-primary ..info...danger...warning...success...default
    4. 带表格的面板 在.panel 中 .panel-body外添加 table .table
    5. 带列表组的面板 同上 加入 ul .list-group
  • 具有响应式特性的嵌入内容 div .embed-responsive-16by9 (或者 4by3) > <iframe>、<embed>、<video> 和 <object> 可直接行程响应式的元素。如果你希望让最终样式与其他属性相匹配,还可以明确地使用一个派生出来的 .embed-responsive-item 类。

超级提示: 不需要为 <iframe> 元素设置 frameborder="0" 属性,因为我们已经替你这样做了!

  • Well 把 Well 用在元素上,能有嵌入(inset)的的简单效果。 div .well
    1. 可选类 .well-lg .well-sm

未完!

本文转载自:bootcss.com

h
粉丝 0
博文 18
码字总数 2064
作品 0
海淀
私信 提问
Bootstrap 简介

什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thor...

wybo521
2016/01/25
52
0
webapp项目前端总结

1.整体把握,从设计稿入手 —— 技术选型 新项目到手,算是运气好,设计稿都已经全部完成了,40多个页面。不用担心边做边改的情况。能够提前确定重用性和一些规范。 项目主要要求: 兼容PC、...

WEB攻程狮
2017/10/28
0
0
Less在Bootstrap3中解析过程(详细)

前言 首先阅读本文之前建议先看一下Bootstrap基础以及Less简介,不然你不会知道我在云什么.因为最近打算用Bootstrap+Less进行开发,但是Less虽然有一些资料,不过大都是Example类型的,感觉比较抽...

顽Shi
2014/03/28
1K
1
Bootstrap 响应式项目分享一

网页链接地址:http://chem960.vicp.cc:9128 该页面中主要用到的有 1. 全局 CSS 样式 -- 栅格系统 2. 全局 CSS 样式 -- 按钮 3. 全局 CSS 样式 -- 辅助类 4. 组件 -- 按钮式下拉菜单 5. 组件...

Neuro_annie
2017/12/27
0
0
精读《使用 CSS 属性选择器》

1 引言 虽然现在 Css Module 与 Css-in-js 更流行,但使用它们会导致过分依赖 滥用 class 做唯一定位,违背了 Css 选择器的初衷。 本期精读的文章是:attribute-selectors-splicing-html-dna...

黄子毅
2018/11/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

一套基于SpringBoot+Vue+Shiro 前后端分离 开发的代码生成器

一、前言 最近花了一个月时间完成了一套基于Spring Boot+Vue+Shiro前后端分离的代码生成器,目前项目代码已基本完成 止步传统CRUD,进阶代码优化: 该项目可根据数据库字段动态生成 controll...

郑清
22分钟前
2
0
javascript-十六进制随机颜色

<script> // 编写一个函数,获得一个十六进制的随机颜色的字符串(如#20CD4F) // function randomColor(){ // var r = random(0,255).toString(16); // var g = random(0,255).toString(16......

ACKo
24分钟前
2
0
springBoot +mybatis 出现sql 语句在数据库可以查询到,但是赋值到实体类上就没有的情况?

1.不要老是反复查看自己是否写错了,为啥有的能出来有的出不来? 可以查看配置文件中是否配置全: 如果在application.yml 文件中是如下配置: mybatis: mapper-locations: classpath:mapp...

kuchawyz
37分钟前
2
0
正则表达式

一、RegExp对象 进行验证和查找的API 1、创建对象: (1)用/创建(直接量):var reg=/正则/ig,表达式固定不变时使用 (2)用new创建:var reg=new RegExp(‘正则’,‘ig’),表达式需要...

wytao1995
37分钟前
2
0
实战限流(guava的RateLimiter)

关于限流 常用的限流算法有漏桶算法和令牌桶算法,guava的RateLimiter使用的是令牌桶算法,也就是以固定的频率向桶中放入令牌,例如一秒钟10枚令牌,实际业务在每次响应请求之前都从桶中获取...

程序员欣宸
38分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部