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 ...
随机推荐
- 2929: [Poi1999]洞穴攀行
2929: [Poi1999]洞穴攀行 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 80 Solved: 41[Submit][Status][Di ...
- 1131: [POI2008]Sta
1131: [POI2008]Sta Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 783 Solved: 235[Submit][Status] ...
- MySQL创建数据库与创建用户以及授权
1.create schema [数据库名称] default character set utf8 collate utf8_general_ci;--创建数据库 采用create schema和c ...
- 在Ubuntu Linux下制作Windows 启动安装 USB盘
最近想 ,在Ubuntu上刻录个windows的安装U盘,在网上看了些资料,不过好多都说的很模糊,于是乎,我走了不少弯路.这里记录下来,希望了帮到大家. 首先你的有个USB吧,这里我们假定USB在ub ...
- mybatis 使用场景
1.Database design is often a separate function (with separate management) from OO domain design 数据库设 ...
- 基于ELK的数据分析实践——满满的干货送给你
很多人刚刚接触ELK都不知道如何使用它们来做分析,经常会碰到下面的问题: 安装完ELK不知从哪下手 拿到数据样本不知道怎么分解数据 导入到elasticsearch中奇怪为什么搜不出来 搜到结果后,不 ...
- java的特点跨平台原理以及JDK的安装
终于开始了期待已久的java,了解java首先要了解下计算机语言的发展历史 机器语言--->汇编语言--->--->高级语言(面向过程的语言和面向对象的语言) 机器语言 每一个计算机 ...
- win8效果的横向布局
有一个月没写过博客了,自己的博客也没有看过,前段时间一直在忙着写代码,公司有一个制漆的产品,与传统纵向布局不一样,要求页面横向布局,类似win8的那种布局效果,最开始,我也没有什么头绪,然后硬着头皮做 ...
- Mycat安装与使用
1.下载: https://github.com/MyCATApache/Mycat-download 具体下载哪个版本以发布为准,推荐1.4,1.5. 2.安装: 安全前,在Linu ...
- 第1章1zabbix快速入门
p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-bottom: .0001pt; text-align: justify; t ...