bootstrap快速入门笔记(八)-按钮,响应式图片
一,默认样式:.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">×</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快速入门笔记(八)-按钮,响应式图片的更多相关文章
- bootstrap快速入门笔记(二)-栅格系统,响应式类
一,栅格系统大致有以下: 1,行row必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,一行有12列 2.“列(column)”在水平方向创建一 ...
- bootstrap快速入门笔记(三)响应式,行,列,偏移量,排序
一,响应式列重置 .clearfix <div class="row"> <div class="col-xs-6 col-sm-3"> ...
- bootstrap快速入门笔记(七)-表格,表单
一,表格 1,<table>中加.table类 2,条纹表格:通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式. **跨浏览器兼容性: ...
- bootstrap快速入门笔记(九)-响应式工具
一,可用的类 超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面 (≥992px) 大屏幕桌面 (≥1200px) .visible-xs-* 可见 隐藏 隐藏 隐藏 ...
- bootstrap快速入门笔记(四)-less用法指南, mixin和变量
一,less变量,less文件 1.bootstrap.less 这是主要的 Less 文件.该文件中导入了一些其他的 less 文件.该文件中没有任何代码. 2.forms.less 这个 Less ...
- bootstrap快速入门笔记(一)
一,头部基本格式:<head lang="en"> <meta charset="UTF-8"> <meta name=" ...
- bootstrap快速入门笔记(六)-代码
一,内联代码<code>:For example, <code><section></code> should be wrapped as inline ...
- bootstrap快速入门笔记(五)-文本元素类,各种标签,排版
1,h1到h6这里也有定义了 2,全局元素被直接赋予font-size 设置为 14px,line-height 设置为 1.428,<p> (段落)元素还被设置了等于 1/2 行高(即 ...
- 【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势
A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...
随机推荐
- 【转】Django HTTP请求的处理流程
Django 和其他 Web 框架的 HTTP 处理的流程大致相同,Django 处理一个 Request 的过程是首先通过中间件,然后再通过默认的 URL 方式进行的.我们可以在 Middlewar ...
- java 学习 todoList
1.并发包的使用 2.线程相关的源码,怎么结束一个线程 3.单例模式代码 4.mixin 相关的理解代码 书单: effective java java 编程思想 spring 编程指南 深入理解jv ...
- 深入浅出数据结构C语言版(2)——简要讨论算法的时间复杂度
所谓算法的"时间复杂度",你可以将其理解为算法"要花费的时间量".比如说,让你用抹布(看成算法吧--)将家里完完全全打扫一遍大概要5个小时,那么你用抹布打扫家里 ...
- 使用Hibernate中出现了Caused by: java.sql.SQLException: Field 'gid' doesn't have a default value
那是因为表中没有设置主键自动增长,只需要改变表中的主键设置为自动增长即可
- Python之路-Linux命令基础(3)
作业一: 1)将用户信息数据库文件和组信息数据库文件纵向合并为一个文件/1.txt(覆盖) 2)将用户信息数据库文件和用户密码数据库文件纵向合并为一个文件/2.txt(追加) 3)将/1.txt./2 ...
- Uva 11609 Teams (组合数学)
题意:有n个人,选不少于一个人参加比赛,其中一人当队长,有多少种选择方案. 思路:我们首先C(n,1)选出一人当队长,然后剩下的 n-1 人组合的总数为2^(n-1),这里用快速幂解决 代码: #in ...
- MySQL flashback 功能
1. 简介 mysqlbinlog flashback(闪回)用于快速恢复由于误操作丢失的数据.在DBA误操作时,可以把数据库恢复到以前某个时间点(或者说某个binlog的某个pos).比如忘了带wh ...
- Android自定义ListView的Item无法响应OnItemClick的解决办法(转)
原文链接:http://www.linuxidc.com/Linux/2011-09/43205.htm 如果你的自定义ListViewItem中有Button或者Checkable的子类控件的话,那 ...
- C#遍历指定文件夹中的所有文件(转)
原文链接:http://www.cnblogs.com/qianqianfy/archive/2009/07/08/1518974.html 1. C#遍历指定文件夹中的所有文件 DirectoryI ...
- 简单分析下用yii2的yii\helpers\Html类和yii.js实现的post请求
yii2提供了很多帮助类,比如Html.Url.Json等,可以很方便的实现一些功能,下面简单说下这个Html.用yii2写view时时经常会用到它,今天在改写一个页面时又用到了它.它比较好用的地方就 ...