.btn-default——button的默认样式。

.btn-primary——button的首选样式；

.btn-success——button的成功样式；

.btn-info——button的一般信息样式；‘

.btn-warning——button的警告样式；

.btn-danger——button的危急样式。

.btn-link——button的链接样式；

.btn-lg——大button样式；

.btn-sm——小button样式；

.btn-xs——超小button样式。

.btn-block——将button设置为充满父元素；

.active——设置button为激活状态；

.disabled——设置button为禁用状态；

.img-circle——将图片设置为圆形。

.img-rounded——为图片设置为圆角。

.img-thumbnail——将图片设置为方形。

.img-responsive——为图片加入响应式；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>CSS全局样式_按钮和图片</title>

    <link rel="stylesheet" href="bootstrap.min.css" type="text/css">

</head>

<body>

<div class="container">

        <p>

            <button type="button" class="btn btn-default">（默认样式）Default</button>

            <button type="button" class="btn btn-primary">（首选项）Primary</button>

            <button type="button" class="btn btn-success">（成功）Success</button>

            <button type="button" class="btn btn-info">（一般信息）Info</button>

            <button type="button" class="btn btn-warning">（警告）Warning</button>

            <button type="button" class="btn btn-danger">（危急）Danger</button>

            <button type="button" class="btn btn-link">（链接）Link</button>

        </p>

        <p>

            <button type="button" class="btn btn-success btn-lg" disabled>success</button>

            <button type="button" class="btn btn-success active">success</button>

            <button type="button" class="btn btn-success btn-sm">success</button>

            <button type="button" class="btn btn-success btn-xs">success</button>

        </p>

        <button type="button" class="btn btn-success btn-block">success</button>

        <a href="#" class="btn btn-primary btn-block">登录</a>

        <input class="btn btn-primary btn-block" value="提交"/>

        <img src="images/g.jpg" alt="girl" class="img-circle"/>

        <img src="images/g.jpg" alt="girl" class="img-rounded"/>

        <img src="images/g.jpg" alt="girl" class="img-thumbnail"/>

        <img src="images/937654.jpg" alt="girl" class="img-responsive"/>

</div>

</body>

</html>

Bootstrap全局CSS样式之button和图片的更多相关文章

  1. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

  2. 响应式布局和BootStrap 全局CSS样式

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  3. 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  4. bootstrap 全局 CSS 样式

    http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

  5. bootstrap全局css样式

    以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间. hidden-xs @media (max-width: 767px){ ...

  6. 15、响应式布局和BootStrap 全局CSS样式知识点总结-part2

    1.表格 <div class="container"> <table class="table "> <thead> &l ...

  7. Bootstrap全局CSS样式之表单

    .form-control--将单独的表单控件赋予一些全局样式,如默认宽度width:100%. .form-group--包裹表单控件,获得最好的排列: .form-inline--将表单设置为内联 ...

  8. Bootstrap全局CSS样式之排版

    Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. ...

  9. Bootstrap全局CSS样式之表格

    .table--基础表格样式. .table-striped--给<tbody>之内的每一行添加斑马条纹样式: .table-bordered--为表格添加边框: .table-hover ...

随机推荐

  1. perl学习之：subs函数

    在Perl中,sub关键字主要是为了定义一个子例程,那么subs又是什么呢? 首先subs是一个函数,用于预先声明子例程,函数的参数是预声明的函数名列表.那么这个函数存在的意义是什么?首先,通过该函数 ...

  2. 【转发】【composer】composer 命令行介绍

    首页 入门 下载 安装包列表 中国镜像 命令行 你已经学会了如何使用命令行界面做一些事情.本章将向你介绍所有可用的命令. 为了从命令行获得帮助信息,请运行 composer 或者 composer l ...

  3. [转]ARM平台下独占访问指令LDREX和STREX

    参考:ARM平台下独占访问指令LDREX和STREX的原理与使用详解 全文转载如下: 为了实现线程间同步,一般都要在执行关键代码段之前加互斥(Mutex)锁,且在执行完关键代码段之后解锁.为了实现所谓 ...

  4. eclipse中新建maven项目无法添加src/main/java问题

    eclipse创建maevn web项目,在选择maven_archetype_web原型后,默认只有src/main/resources这个Source Floder. 按照maven目录结构,添加 ...

  5. python基础-对象

    1. 对象:一组数据和操作数据方法的集合 >>> class Person(object): ...     def __init__(self,name): ...         ...

  6. selenium常见控件操作

    下拉选择框 第一种方法:from selenium.webdriver.support.select import Select# 实例化一个Select类的对象 selector = Select( ...

  7. Python第三方库之openpyxl(5)

    Python第三方库之openpyxl(5) 气泡图 气泡图类似于散点图,但使用第三个维度来确定气泡的大小,图表可以包括多个项目 from openpyxl import Workbook from ...

  8. C/C++的类型安全

    类型安全很大程度上可以等价于内存安全,类型安全的代码不会试图访问自己没被授权的内存区域.“类型安全”常被用来形容编程语言,其根据在于该门编程语言是否提供保障类型安全的机制:有的时候也用“类型安全”形容 ...

  9. .NET重构（六）：删除用户和结账的理解

    导读:这是第二回机房了,第一回不明不白,不清不楚的就过去了(相对),这一回,有了新的发现.就是在用户删除的时候,涉及到的一些逻辑问题,以及结账时的数据来源问题. 一.用户删除 问题:第一次机房,包括重 ...

  10. 【Luogu】P2015二叉苹果树（DP，DFS）

    题目链接 设f[i][j][k]表示给以i为根节点的子树分配j条可保留的树枝名额的时候,状态为k时能保留的最多苹果. k有三种情况. k=1:我只考虑子树的左叉,不考虑子树的右叉,此时子树能保留的最多 ...