bootstrap 图片类 和 按钮类 部分
bootstrap框架,来自 Twitter,基于 html ,css ,js.简介灵活。
首先引入 bootstrap.js bootstrap.css 及 jquery.js 这里不考虑兼容
对图片的操作的类class:
.img-rounded 图片圆角 大概是 border-radius: 6px IE8不支持
.img-circle 让整个图片变成圆形 ===border-radius=50% IE8不支持
.img-thumbnail 带padding和border的缩略图,和照片效果很像
.img-responsive 把图片设置成 响应式
用法: <img src="data:images/path.jpg" alert="类名" class="img"/>
按钮类(扁平化)class:
.btn 为按钮添加基本样式 .btn-default 标准/默认的按钮
功能性按钮: .btn-info .btn-success .btn-warning .btn-danger 不同的情况使用不同的按钮
点击弹出表示 信息 /成功/警告/危险 不同的按钮具有不同的颜色
单击按钮的过程: .btn-primary .active 原始按钮样式(未点击)/激活后的按钮(点击后)
按钮的大小: .btn-xs .btn-sm .btn-lg 小号/中号/大号按钮
移动页面上常看到一个按钮独占一行 width: 100%父元素: .btn-block 块级按钮 超大号按钮
.btn-lg,
.btn-group-lg > .btn {
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
可见,按钮的大小,是改变 padding ,font-size, line-height等值
禁用按钮: .disabled .
特殊的按钮: .btn-link 连接按钮 外观像超链接,但保持按钮的功能, 改变额按钮的外观
用法: <button type="button" class="btn btn-info btn-lg"></button> .btn类必须引入 +按钮的样式+ 按钮的大小+按钮状态 呵呵
bootstrap 图片类 和 按钮类 部分的更多相关文章
- Cocos2dx项目启程二 之 封装属于我的按钮类
不知道为什么,很讨厌cocos2dx的 各菜单类,比如按钮:如果一张图片上就已经有按钮的几个状态了,我还是要创建多张资源图片, 最起码要指定这张图片上哪块区域是这个普通状态,哪块区域是那个选中状态.. ...
- MFC的PNG贴图按钮类(详细注释)
MFC的PNG贴图按钮类(详细注释) (转载请注明出处) 作者:梦镜谷雨 萌新第二次写帖子,请多多包涵.末尾附上相应代码(PS公司繁体系统所以部分注释繁体请别介意). 因自带控件不美观,于是网上参考学 ...
- bootstrap之强调文本的类(带颜色)
bootstrap之强调文本的类(带颜色) <small>本行内容是在标签内</small><br> <strong>本行内容是在标签内</str ...
- 背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, AppBarButton, AppBarToggleButton
[源码下载] 背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButt ...
- 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, AppBarButton, AppBarToggleButton
介绍背水一战 Windows 10 之 控件(按钮类) ButtonBase Button HyperlinkButton RepeatButton ToggleButton AppBarButton ...
- 利用php获取图片完整Exif信息类 获取图片详细完整信息类
<?php /** * @Author: TonyLevid * @Copyright: TonyLevid.com * @Name: Image Exif Class * @Version: ...
- Bootstrap -- 网格系统、排版样式类、 <blockquote>、 <abbr> 元素
Bootstrap -- 网格系统.排版样式类. <blockquote>. <abbr> 元素 1. Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏 ...
- 八、pyqt5按钮类控件——QPushButton、QRadioButton、QCheckBox
pyqt5中常用的按钮类控件有QPushButton.QRadioButton.QCheckBox.QToolButton等.这些按钮类的基类都是QAbstracButton类.所以这些类有部分方法是 ...
- 解决bootstrap和easyUI部分css类冲突问题。
今天发现bootstrap和easyui的css类重复用了一个很笨的办法解决了,这种小事网上都不好搜啊. 我先引用的bootstrap后引用的easy UI,bootstrap的会被覆盖,boot的样 ...
随机推荐
- 端口扫描器--利用socket协议
#!/usr/bin/env python # -*- coding:UTF-8 -*- import optparse import socket import threading # 用法 pyt ...
- OpenJ_Bailian 4103 踩方格(搜索 动态规划 )
题目传送门OpenJ_Bailian 4103 描述 有一个方格矩阵,矩阵边界在无穷远处.我们做如下假设:a. 每走一步时,只能从当前方格移动一格,走到某个相邻的方格上:b. 走过的格子立 ...
- 虚拟机下 windows 自动配置 IPv4 地址 169.254.X.X(首选)
问题: windows server上,自己手动配置的ip不生效,自动获取地址虽然ok,但是服务器必须指定ip. 诊段: ipconfig/all里查看 自动配置 IPv4 地址 169.254.X ...
- scratch3.0二次开发scratch3.0基本介绍(第一章)
为什么要自己开发而不使用官方版本? 这个问题要看我们的做少儿编程教育的需求是怎么样的. scratch本身提供了离线版本以及官网在线平台供我们使用,这足以满足我们对于编程教学模块的需求.但是对于一些教 ...
- vue+jest+vue-test-utils 单元测试
jest是Facebook的一套开源的JavaScript测试框架,它集成了快照测试.断言.mock以及覆盖率报告等功能,很全面而且基本不需要太多的配置便可使用Vue-Test-Util ...
- 【转】KAFKA分布式消息系统
Kafka[1]是linkedin用于日志处理的分布式消息队列,linkedin的日志数据容量大,但对可靠性要求不高,其日志数据主要包括用户行为(登录.浏览.点击.分享.喜欢)以及系统运行日志(CPU ...
- Java入门 - 语言基础 - 06.变量类型
原文地址:http://www.work100.net/training/java-variable-type.html 更多教程:光束云 - 免费课程 变量类型 序号 文内章节 视频 1 概述 2 ...
- Elasticsearch系列---结构化搜索
概要 结构化搜索针对日期.时间.数字等结构化数据的搜索,它们有自己的格式,我们可以对它们进行范围,比较大小等逻辑操作,这些逻辑操作得到的结果非黑即白,要么符合条件在结果集里,要么不符合条件在结果集之外 ...
- [bzoj2186] [洛谷P2155] [Sdoi2008] 沙拉公主的困惑
Description 大富翁国因为通货膨胀,以及假钞泛滥,政府决定推出一项新的政策:现有钞票编号范围为1到N的阶乘,但是,政府只发行编号与M!互质的钞票.房地产第一大户沙拉公主决定预测一下大富翁国现 ...
- [bzoj1297] [洛谷P4159] [SCOI2009] 迷路
Description windy在有向图中迷路了. 该有向图有 N 个节点,windy从节点 0 出发,他必须恰好在 T 时刻到达节点 N-1. 现在给出该有向图,你能告诉windy总共有多少种不同 ...