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 图片类 和 按钮类 部分的更多相关文章

  1. Cocos2dx项目启程二 之 封装属于我的按钮类

    不知道为什么,很讨厌cocos2dx的 各菜单类,比如按钮:如果一张图片上就已经有按钮的几个状态了,我还是要创建多张资源图片, 最起码要指定这张图片上哪块区域是这个普通状态,哪块区域是那个选中状态.. ...

  2. MFC的PNG贴图按钮类(详细注释)

    MFC的PNG贴图按钮类(详细注释) (转载请注明出处) 作者:梦镜谷雨 萌新第二次写帖子,请多多包涵.末尾附上相应代码(PS公司繁体系统所以部分注释繁体请别介意). 因自带控件不美观,于是网上参考学 ...

  3. bootstrap之强调文本的类(带颜色)

    bootstrap之强调文本的类(带颜色) <small>本行内容是在标签内</small><br> <strong>本行内容是在标签内</str ...

  4. 背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, AppBarButton, AppBarToggleButton

    [源码下载] 背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButt ...

  5. 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, AppBarButton, AppBarToggleButton

    介绍背水一战 Windows 10 之 控件(按钮类) ButtonBase Button HyperlinkButton RepeatButton ToggleButton AppBarButton ...

  6. 利用php获取图片完整Exif信息类 获取图片详细完整信息类

    <?php /** * @Author: TonyLevid * @Copyright: TonyLevid.com * @Name: Image Exif Class * @Version: ...

  7. Bootstrap -- 网格系统、排版样式类、 <blockquote>、 <abbr> 元素

    Bootstrap -- 网格系统.排版样式类. <blockquote>. <abbr> 元素 1. Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏 ...

  8. 八、pyqt5按钮类控件——QPushButton、QRadioButton、QCheckBox

    pyqt5中常用的按钮类控件有QPushButton.QRadioButton.QCheckBox.QToolButton等.这些按钮类的基类都是QAbstracButton类.所以这些类有部分方法是 ...

  9. 解决bootstrap和easyUI部分css类冲突问题。

    今天发现bootstrap和easyui的css类重复用了一个很笨的办法解决了,这种小事网上都不好搜啊. 我先引用的bootstrap后引用的easy UI,bootstrap的会被覆盖,boot的样 ...

随机推荐

  1. 端口扫描器--利用socket协议

    #!/usr/bin/env python # -*- coding:UTF-8 -*- import optparse import socket import threading # 用法 pyt ...

  2. OpenJ_Bailian 4103 踩方格(搜索 动态规划 )

    题目传送门OpenJ_Bailian 4103 描述 有一个方格矩阵,矩阵边界在无穷远处.我们做如下假设:a.    每走一步时,只能从当前方格移动一格,走到某个相邻的方格上:b.    走过的格子立 ...

  3. 虚拟机下 windows 自动配置 IPv4 地址 169.254.X.X(首选)

    问题: windows server上,自己手动配置的ip不生效,自动获取地址虽然ok,但是服务器必须指定ip. 诊段: ipconfig/all里查看 自动配置 IPv4 地址  169.254.X ...

  4. scratch3.0二次开发scratch3.0基本介绍(第一章)

    为什么要自己开发而不使用官方版本? 这个问题要看我们的做少儿编程教育的需求是怎么样的. scratch本身提供了离线版本以及官网在线平台供我们使用,这足以满足我们对于编程教学模块的需求.但是对于一些教 ...

  5. vue+jest+vue-test-utils 单元测试

           jest是Facebook的一套开源的JavaScript测试框架,它集成了快照测试.断言.mock以及覆盖率报告等功能,很全面而且基本不需要太多的配置便可使用Vue-Test-Util ...

  6. 【转】KAFKA分布式消息系统

    Kafka[1]是linkedin用于日志处理的分布式消息队列,linkedin的日志数据容量大,但对可靠性要求不高,其日志数据主要包括用户行为(登录.浏览.点击.分享.喜欢)以及系统运行日志(CPU ...

  7. Java入门 - 语言基础 - 06.变量类型

    原文地址:http://www.work100.net/training/java-variable-type.html 更多教程:光束云 - 免费课程 变量类型 序号 文内章节 视频 1 概述 2 ...

  8. Elasticsearch系列---结构化搜索

    概要 结构化搜索针对日期.时间.数字等结构化数据的搜索,它们有自己的格式,我们可以对它们进行范围,比较大小等逻辑操作,这些逻辑操作得到的结果非黑即白,要么符合条件在结果集里,要么不符合条件在结果集之外 ...

  9. [bzoj2186] [洛谷P2155] [Sdoi2008] 沙拉公主的困惑

    Description 大富翁国因为通货膨胀,以及假钞泛滥,政府决定推出一项新的政策:现有钞票编号范围为1到N的阶乘,但是,政府只发行编号与M!互质的钞票.房地产第一大户沙拉公主决定预测一下大富翁国现 ...

  10. [bzoj1297] [洛谷P4159] [SCOI2009] 迷路

    Description windy在有向图中迷路了. 该有向图有 N 个节点,windy从节点 0 出发,他必须恰好在 T 时刻到达节点 N-1. 现在给出该有向图,你能告诉windy总共有多少种不同 ...