.btn          基础class
.btn-default  白底黑字的按钮
.btn-warning  红色按钮
.btn-success  绿色按钮
.btn-info     浅蓝色按钮
.btn-primary  深蓝色按钮
.btn-lg       大号按钮
.btn-sm       小号按钮
.btn-xs       超小号按钮
.btn-block    块级按钮

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

     <title>Bootstrap 101 Template</title>

     <!-- Bootstrap -->

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

     <!--[if lt IE 9]>

     <script src="js/html5shiv.min.js"></script>

     <script src="js/respond.min.js"></script>

     <![endif]-->

 </head>

 <body>

 <div class="container"></div>

 <h1>全局Css样式---按钮</h1>

 <h3>三种形式的按钮</h3>

 <button class="btn btn-default">button按钮</button>

 <input type="button" class="btn btn-default" value="input按钮">

 <a href="#" class="btn btn-default">LINK按钮</a>

 <h3>三种形式的按钮</h3>

 <button class="btn ">button按钮</button>

 <input type="button" class="btn " value="input按钮">

 <a href="#" class="btn ">LINK按钮</a>

 <h3>按钮的常用颜色总共有五中常用颜色</h3>

 <a href="#" class="btn btn-danger">红色按钮-危险色</a>

 <a href="#" class="btn btn-warning">黄色按钮-警告色</a>

 <a href="#" class="btn btn-success">绿色按钮-成功色</a>

 <a href="#" class="btn btn-info">浅蓝色-提示色</a>

 <a href="#" class="btn btn-primary">深蓝色按钮-基础色</a>

 <h3>按钮的四种大小</h3>

 <a href="#" class="btn btn-success btn-lg" >大号按钮</a>

 <a href="#" class="btn btn-success" >默认号按钮</a>

 <a href="#" class="btn btn-success btn-sm" >小号按钮</a>

 <a href="#" class="btn btn-success btn-xs" >超小号按钮</a>

 <h3>块级按钮</h3>

 <a href="#" class="btn btn-primary btn-block" >深蓝色-块级按钮</a>

 <a href="#" class="btn btn-info btn-block" >浅蓝色-块级按钮</a>

 <a href="#" class="btn btn-danger btn-block" >红色-块级按钮</a>

 <a href="#" class="btn btn-warning btn-block" >黄色-块级按钮</a>

 <a href="#" class="btn btn-success btn-block" >绿色-块级按钮</a>

Bootstrap-按钮相关的class的更多相关文章

  1. 简单叨叨bootstrap按钮无限层级下拉菜单的实现

    0.写在前面的话 最近看书都懈怠了,又正值新项目,虽说并不是忙得不可开交,好吧我老实交待,我就是偷懒了其实,博客也没更.言归正传,对于前端的不熟悉现在确实是个让我头疼的事情,以至于一些功能要在网络上漫 ...

  2. Bootstrap 按钮

    本章将通过实例讲解如何使用 Bootstrap 按钮.任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: ...

  3. BootStrap 按钮组简单介绍

    学会按钮组需要掌握以下几个类. btn   btn-group btn-toolbar  btn-group-vertical   和 下拉菜单的基本类 dropdown-toggle dropdow ...

  4. Bootstrap 按钮分组

    Bootstrap 按钮分组: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  5. bootstrap 按钮 文本 浮动 隐藏

    bootstrap 按钮 文本 浮动 隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  6. Bootstrap按钮插件

    前面的话 按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件 加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示 ...

  7. Bootstrap -- 按钮样式与使用

    Bootstrap -- 按钮样式与使用 1. 可用于<a>, <button>, 或 <input> 元素的按钮样式 按钮样式使用: <!DOCTYPE h ...

  8. 使用bootstrap的相关配置

    <html> <head> <title>java微辅导</title> <meta charset="UTF-8"/> ...

  9. 第二百四十七节，Bootstrap按钮和折叠插件

    Bootstrap按钮和折叠插件 学习要点: 1.按钮 2.折叠 本节课我们主要学习一下 Bootstrap 中的按钮和折叠插件. 一．按钮 可以通过按钮插件创建不同状态的按钮,也就是点击后为选中状态 ...

  10. Bootstrap 按钮，图片，辅助类

    Bootstrap 按钮 任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: 以下样式可用于<a&g ...

随机推荐

  1. 一道hive SQL面试题

    一.hive中实现方法 基表: 组表: gt   gid gname 1001 g1 1002 g2 1003 g3 create table g( gid int, gname string )ro ...

  2. C语言中点操作符(.)和箭头操作符(->)

    C语言中点操作符(.)和箭头操作符(->) 点说语法不太准确,许多都称该之为点运算符/操作符,箭头运算符/操作符.但是OC中叫点语法,感觉理解起来还蛮舒服.毕竟基础的C操作符中是 相同点 两个都 ...

  3. Flash and Scalform CLIK

    Flash shift + f7 打开组件检查面板 Scaleform As bit define bool                Unrolling       :1;    // indi ...

  4. linux学习：【第2篇】常用命令

    狂神声明 : 文章均为自己的学习笔记 , 转载一定注明出处 ; 编辑不易 , 防君子不防小人~共勉 ! linux学习:[第2篇]常用命令 基本命令 //打开终端: CentOS:在任何地方,右键-- ...

  5. cocoapod引入FLEX，debug模式正常，Release报错library not found for -lXXX

    cocoapod引入FLEX,debug模式正常,Release报错library not found for -lXXX, 因为podfile是这么写的: pod 'FLEX', '~> 2. ...

  6. AndroidStudio_ListView

    在这里梳理一下ListView的用法: 1.建立一个activity,例如建立一个ListViewActivity,这时将生成两个文件:ListViewActivity.java和activity_l ...

  7. vue打包后出现"Failed to load resource: net::ERR_FILE_NOT_FOUND"错误

    创建vue脚手架搭建项目之后,用npm run build经行打包,运行index.html后出现异常: 打开dist/index.html, 诸如这些的,引入是有问题的, 这边的全部是绝对路径,而本 ...

  8. 不看好运维竖井产品模式，优云打造融合化运维PaaS平台

    2018年1月13号中国双态运维用户大会上,优云软件总裁刘东海接受了36Kr记者的专访,期间谈到了新时代下的企业运维模式,新兴技术和传统运维的融合以及优云未来的发展方向等问题.以下为访谈实录: 优云软 ...

  9. java Web开发基础（一）工程项目文档结构

    2013年毕业后,在深圳工作开始是用.NET ASP.NET MVC做的项目,后来公司用java来做.于是就从.NET转java了.从.NET转java不是那么的难.今天刚好是清明节放假三天,整理了j ...

  10. Redis所支持的数据结构

    1.启动Redis2.Redis所支持的数据结构 2.1.Redis常用操作 2.2.String类型及操作 2.3.Hash类型及操作 2.4.List类型及操作 2.5.Set类型及操作 2.6. ...