一,默认样式:.btn-default , .btn-primary , .btn-success  ,.btn-info, btn-warning ,btn-link

二,尺寸:.btn-lg, .btn-sm, .btn-xs和。.btn-block:可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。

三,激活状态:对于<button> 元素,是通过 :active 状态实现的。对于 <a> 元素,是通过 .active 类实现的

四,禁用状态:<button> 元素添加 disabled 属性,使其表现出禁用状态 disabled="disabled"

  但是在a元素的禁用用.disabled类;

五,图片

  1,响应式图片:

     .img-responsive 类可以让图片支持响应式布局

    .center-block图片水平居中

  2,图片形状:**请时刻牢记:Internet Explorer 8 不支持 CSS3 中的圆角属性。

    .img-rounded:方形图片

    .img-circle:圆形图片

    .img-thumbnail:边框带空心的放心图片

六,辅助类

  情境文本颜色:

    <p class="text-muted">...</p>

    <p class="text-primary">...</p>

    <p class="text-success">...</p>

    <p class="text-info">...</p>

    <p class="text-warning">...</p>

    <p class="text-danger">...</p>

  情景背景色:.bg-primary...

  关闭按钮:<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

  三角符号:<span class="caret"></span>

  快速浮动:.pull-left,  .pull-right

  导航条中浮动:.navbar-left 或 .navbar-right

  内容快居中:<div class="center-block">...</div>

  清除浮动:通过为父元素添加 .clearfix

  图片替换:<h1 class="text-hide">Custom heading</h1>

bootstrap快速入门笔记(八)-按钮,响应式图片的更多相关文章

  1. bootstrap快速入门笔记(二)-栅格系统,响应式类

    一,栅格系统大致有以下: 1,行row必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,一行有12列 2.“列(column)”在水平方向创建一 ...

  2. bootstrap快速入门笔记(三)响应式,行,列,偏移量,排序

    一,响应式列重置 .clearfix <div class="row"> <div class="col-xs-6 col-sm-3"> ...

  3. bootstrap快速入门笔记(七)-表格,表单

    一,表格 1,<table>中加.table类 2,条纹表格:通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式. **跨浏览器兼容性: ...

  4. bootstrap快速入门笔记(九)-响应式工具

    一,可用的类   超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面 (≥992px) 大屏幕桌面 (≥1200px) .visible-xs-* 可见 隐藏 隐藏 隐藏 ...

  5. bootstrap快速入门笔记(四)-less用法指南, mixin和变量

    一,less变量,less文件 1.bootstrap.less 这是主要的 Less 文件.该文件中导入了一些其他的 less 文件.该文件中没有任何代码. 2.forms.less 这个 Less ...

  6. bootstrap快速入门笔记(一)

    一,头部基本格式:<head lang="en"> <meta charset="UTF-8"> <meta name=" ...

  7. bootstrap快速入门笔记(六)-代码

    一,内联代码<code>:For example, <code><section></code> should be wrapped as inline ...

  8. bootstrap快速入门笔记(五)-文本元素类,各种标签,排版

    1,h1到h6这里也有定义了 2,全局元素被直接赋予font-size 设置为 14px,line-height 设置为 1.428,<p> (段落)元素还被设置了等于 1/2 行高(即 ...

  9. 【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势

    A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...

随机推荐

  1. Jmeter BeanShell 时间格式化处理

    工作中碰到的,记录下 在XML格式的请求数据中,Soap接口请求中的日期参数格式是这样的"2016-07-20T18:03:00" 在日和时之间多了一个T 所以在Jmeter--& ...

  2. 关于css+div布局的疑问 2017-03-19

    第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个地方的高宽是多少,争取精确 ...

  3. 第37篇 Asp.Net源码解析(二)--详解HttpApplication

    这篇文章花了点时间,差点成烂到电脑里面,写的过程中有好几次修改,最终的这个版本也不是很满意,东西说的不够细,还需要认真的去看下源码才能有所体会,先这样吧,后面有时间把细节慢慢的再修改.顺便对于开发的学 ...

  4. Unity 3D Framework Designing(1)—— MVVM 模式的设计和实施(Part 1)

    初识 MVVM 谈起 MVVM 设计模式,可能第一映像你会想到 WPF/Sliverlight,他们提供了的数据绑定(Data Binding),命令(Command)等功能,这让 MVVM 模式得到 ...

  5. iOS开发之MapKit

    1.概述 MapKit框架使用前提: 导入框架: 导入主头文件: #import <MapKit/MapKit.h> MapKit框架使用须知: MapKit框架中所有数据类型的前缀都是M ...

  6. 使用gem安装jekyll错误记录

    准备在windows7上安装Jekyll, 安装好了Ruby和RubyDevKit之后,准备使用: $ gem install jekyll 安装jekyll,但是返回错误: ERROR: While ...

  7. CrawlScript脚本语言实现网络爬虫

    前段时间我们学习了几种爬虫技术,我们来回顾一下,webCollector,htmlParser,Jsoup,各有优劣,但是如果能灵活运用,其实都是很不错的.那么,今天呢,我们来学习一种脚本语言,这是一 ...

  8. taobao-pamirs-proxycache开源缓存代理框架实现原理剖析

    写在前面 taobao-pamirs-proxycache 是一款开源缓存代理框架, 它将 缓存代码 与 业务代码 解耦.让开发专注coding业务, 缓存通过xml配置即可实现.本文先从此工具如何使 ...

  9. js两个判断&&的值与||的值

    var value1="val1"; var value2="val2"; alert(value1&&value2);    //结果为val ...

  10. Windows 10 系统Microsoft Edge的使用手册

    Windows 10 默认浏览器(Edge)使用手册 体验网络有了一种新的方法.只有在 Windows 10 上才能找到它. 下面详细介绍一下Edge浏览器的使用规范: 一.打开Windows10系统 ...