.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. iOS 模拟器运行不能联网 PAC Fetch failed with error

    app在模拟器是哪个启动成功会自动连接服务器,然后Xcode控制台报错, 模拟器 PAC Fetch failed with error [NSURLErrorDomain:-1001] 这类问题有好 ...

  2. Exception 04 : java.lang.ClassNotFoundException: Could not load requested class : org.hsqldb.jdbcDriver

    异常详细信息 org.hibernate.boot.registry.classloading.spi.ClassLoadingException: Unable to load class [org ...

  3. xpath路径表达式

    简单说,xpath就是选择XML文件中节点的方法. 所谓节点(node),就是XML文件的最小构成单位,一共分成7种. - element(元素节点)- attribute(属性节点)- text ( ...

  4. https://pypi.org/project/py-mysql2pgsql/

    https://packages.ubuntu.com/trusty/postgresql-server-dev-9.3 所以使用下面的命令即可安装python-dev: yum install py ...

  5. Xcode报错Expected selector for Objective-C and Expected method body

    昨天把键盘拿起来拍一下清清灰,然后就发现Xcode报错了,Xcode报错Expected selector for Objective-C and Expected method body,也不知道什 ...

  6. [tcpreplay] tcpreplay高级用法--使用tcpreplay-edit进行循环动态发包

    tcpreplay-edit提供了可对包进行修改的高级用法: --unique-ip Modify IP addresses each loop iteration to generate uniqu ...

  7. JNI 入门

    1.http://cherishlc.iteye.com/blog/1756762 Android 学习笔记--利用JNI技术在Android中调用.调试C++代码 2.http://my.eoe.c ...

  8. 如何在安装node\npm\cnpm

    1.安装node.js node.js的官方地址为:https://nodejs.org/en/download/. 根据windows版本后,选择要下载的安装包,下载完毕,按照windows一般应用 ...

  9. Java+Selenium 如何处理Try/Catch

    场景:为了检查数据是否存在,如果存在就把数据删除,不存在则新增保存.因为我们需要做下数据初始化准备工作. 一.:Feature 示例: Scenario: E-251:维护薪资帐套明细 When I ...

  10. C# cmd bcp 导出数据

    背景需求:应用系统间数据自动同步处理,要求高效无人工干预 技术实现:C#启动cmd,通过BCP命令传入必要参数,实现数据导出 /// <summary> /// cmd下,启动应用程序命令 ...