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 ...
随机推荐
- 使用IDEA的gradle整合spring+ mybatis 采用javaconfig配置
1.新建一个工程 2.工程目录 3.添加gradle.propertes文件 activeMQVersion=5.7.0 aspectJVersion=1.7.2 commonsLangVersion ...
- 你可记得曾经的-------- C#面向对象的“基础”
1.C#中构造函数定义的理解: ①构造函数名与所在的类名相同 ②构造函数可以重载 ③构造函数可以带参数 ④构造函数没有返回值,且不允许写出void,可以有参也可以无参 ...
- Java中实现短信发送
最近跟着做公司的项目偶然接触到的,顺势把这个给记录下来,给自己梳理一下. 采用引入第三方工具的方式,网上查了半天,发现简单的实现方式便是注册一个中国网建的账号,新建账号的时候会附带赠几条免费短信,彩信 ...
- Java中的函数对象
初次听说java中的函数对象可能,比较的陌生.可以类比着来理解一下,人们常说java中没有了指针,殊不知,java中的对象引用就是指针,有时候我们说一个对象往往指的就是这个对象的引用,也就是说基本上把 ...
- 对VC++6.0爱得深沉(一)安装vc++6.0,支持winXP,win7,win8.1,win10
[欢迎入坑] 从这里起,我称VC++6.0为小c. 为什么我对小c爱得深沉? 虽然饱受非议,但是,我只想说,我太单纯,小c轻轻松松成功运行在各个win平台,对于我来说她:高速.小巧.便捷.听话.可定制 ...
- 在vs中打开cuda工程
以往都是在linux环境下使用cuda,编写cuda程序,因为一篇论文的源码要求用win系统+vs,首次在vs中打开.编译cuda工程,遇到一些阻碍,特此记录. 我的计算机环境是win10,cuda7 ...
- Alamofire源码解读系列(九)之响应封装(Response)
本篇主要带来Alamofire中Response的解读 前言 在每篇文章的前言部分,我都会把我认为的本篇最重要的内容提前讲一下.我更想同大家分享这些顶级框架在设计和编码层次究竟有哪些过人的地方?当然, ...
- python 、mmap 实现内存数据共享
import mmap mmap_file = None ##从内存中读取信息, def read_mmap_info(): global mmap_file mmap_file.seek(0) ## ...
- POJ1185炮兵阵地【动态规划】
炮兵阵地 Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 26892 Accepted: 10396 Descriptio ...
- ELK日志分析系统的应用
收集和分析日志是应用开发中至关重要的一环,互联网大规模.分布式的特性决定了日志的源头越来越分散, 产生的速度越来越快,传统的手段和工具显得日益力不从心.在规模化场景下,grep.awk 无法快速发挥作 ...