按钮标签

在<a>,<button>或input元素上使用按钮class。但是为了避免跨浏览器的不一致性，建议使用<button>标签。

<!DOCTYPE html>

<html>

   <head>

      <title>Bootstrap 模板</title>

      <meta charset="utf-8">

      <!-- 引入 Bootstrap -->

      <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

   </head>

   <body>

          <!--记录不同的标签使用bootstrap的btn类-->

      <a class="btn btn-default" href="#" role="button">链接</a>

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

	  <input class="btn btn-default" type="button" value="输入">

	  <input class="btn btn-default" type="submit" value="提交">

      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->

      <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

      <!-- 包括所有已编译的插件 -->

      <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

   </body>

</html>

感觉link标签的不怎么明显，但是还是能够从边距上看出是一个button的，这里只是说明了怎样利用不同的标签来使用btnclass。

可以使用在以上标签的样式

基本样式

  • btn 为按钮添加基本的按钮样式，一般与下面的类联合只用，这样可以保证按钮大小和边距的统一。

颜色

  • btn-default默认的按钮样式，就是白底黑字灰框，要跟btn联合使用，下同
  • btn-primary 原始的按钮样式，蓝底白字
  • btn-success 成功的样式，绿底白字
  • btn-info表示点击后会弹出信息，淡蓝色底白字
  • btn-warning 表示需要谨慎操作的按钮，黄底白字
  • btn-danger表示危险的操作，红底白字
  • btn-link让按钮看起来像一个连接，仍然保持按钮的行为

大小

  • btn-lg 比普通的图标要大的大图标
  • btn-sm 小图标
  • btn-xs 超小图标
  • btn-block 块级按钮，拉伸至父元素100%的宽度

按钮这里并不能构成响应式分布，如果三个都写了，最后一个类会覆盖前面的样式。

状态

  • active 表示按钮被激活，按钮会比普通的按钮宽一些
  • disabled disabled属性和disabled类都能将按钮禁用，两者效果相同。对于link，用disabled属性会让link显示出和button相同的效果。鼠标移上去就变成禁止的样式
	  <!--应用了disabled类的只是禁用了连接-->

      <a class="btn btn-danger disabled"  role="button" href="#">应用disabled类</a>

	  <!--使用了disabled属性则禁用了整个按钮-->

	  <a class="btn btn-danger"  role="button" disabled="disabled" href="#">应用disabled标签</a>

	  <button class="btn btn-default btn-danger disabled"  type="submit">按钮</button>

bootstrap学习笔记系列4------bootstrap按钮的更多相关文章

  1. Bootstrap学习笔记系列1-------Bootstrap网格系统

    Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>B ...

  2. Bootstrap学习笔记系列3-------Bootstrap简单表单显示

    表单布局 垂直或基本表单 基本的表单结构时BootStrap自带的,创建基本表单的步骤如下: 向父<form>元素添加role = "form": 为了获取最佳的间距, ...

  3. bootstrap学习笔记<八>（bootstrap核心布局风格——栅格系统）

    栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...

  4. bootstrap学习笔记<一>（bootstrap用法）

    首先引入bootstrap官网链接:http://www.bootcss.com/ bootstrap 3下载地址:http://v3.bootcss.com/getting-started/#dow ...

  5. bootstrap 学习笔记（4）---- 按钮

    平常我们自己写按钮,这次不用我们自己写 了,直接应用bootstrap中的按钮样式,就能设计出很漂亮的按钮样式.接下来就让我们一起学习吧. 1.可以作为按钮使用的标签或元素:<a>< ...

  6. Bootstrap学习笔记系列5------Bootstrap图片显示

    通过添加一下的class来实现bootstrap对图片的支持 img-round 通过border-radius:6px 来获得图片圆角 img-circle 通过border-radius:50%来 ...

  7. Bootstrap学习笔记系列7-----Bootstrap简单背景CSS及其他辅助类

    背景 通过添加下列类,可以快捷的变换背景颜色,如果是链接的话,鼠标移动上去会变暗 bg-primary 被修饰元素将会应到primary类,显示吃淡蓝色,文本颜色会变成白色. bg-success 被 ...

  8. Bootstrap学习笔记系列6-----Bootstrap文本显示

    通过对文本或者链接添加下面的类,会使其展示不同的颜色,如果文本是个链接,鼠标移动到文本上,颜色会变暗. text-muted柔和的文本(深色) text-primary 表示基础的文本(蓝色) tex ...

  9. Bootstrap学习笔记系列2-------Bootstrap简单表格处理

    标签 <table> 为表格添加基础样式 <thead> 表格标题行的容器元素,用来识别列 <tbody> 表格主提中的表格行的容器元素 <tr> 单行 ...

随机推荐

  1. FusionCharts简单教程（四）-----基本数字格式

          在统计图例中什么是最基本,最重要的元素?那就是数据.一个数据的统计图像那就是一堆空白.但是数据存在多种形式,比如小数,比如千分位等等.又如若一个数据是12.000000001,对于数据要求 ...

  2. js函数实现转换css中常用的颜色编码

    //转换css中常用颜色编码 var toRGB = function (val){ var reg1 = /^#([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i; ...

  3. C#版的eval，C#Light开源嵌入式脚本，unity热更新不再愁

    目前最新版本AlphaV0.06 完全的c#语法,可用于一切能运行C#的场合,wp windows xamarin mono asp.net unity3d 内嵌了int uint bool stri ...

  4. Atitit jsr规范化分类 attilax总结

    Atitit jsr规范化分类 attilax总结 按照技术类别可以分成以下几类:1.Java EE (39 JSRs) --- J2EE平台规范 2.Java SE (42 JSRs) --- J2 ...

  5. EasyUI分页索引不能输入非数字

    //分页索引不能输入非数字 function PagerCheck() { $(".pagination-num").keydown(function (event) { even ...

  6. ServletConfig对象详解

    在Servlet 的配置文件中,可以用一个或多个<init-param>标签为servlet配置一些初始化参数. 当servlet配置了初始化参数之后,web容器在创建servlet实例对 ...

  7. 【Discuz】云平台服务：出了点小错，由于站点ID/通信KEY等关键信息丢失导致Discuz!云平台服务出现异常

    提示信息 出了点小错,由于站点ID/通信KEY等关键信息丢失导致Discuz!云平台服务出现异常 版本X3.2.20160601 解决方案 Step1.修改云平台开通状态为未开通状态 Step2.访问 ...

  8. 实现List按与一个字符串的相似度和字母顺序排序（适用于模糊查询后的排序）

    因公司业务需要,自己写了一个,保存起来以后可能还会用到.如果还有更好的方法或者算法,希望大家提出来. 1.简单的相似度算法(自己想到的)      因为List中每个String都会包含一个标准的字符 ...

  9. QQ左侧滑动显示之自定义属性

    上一篇为大家实现了最基本的侧滑效果,相信很多小伙伴已经发现一个小问题了,修改Menu右侧的宽度时,我们需要修改我们的自定义方法,这样非常不方便,下面就为大家介绍一下如何通过自定义属性来控制这个的变化. ...

  10. 【5.1送礼】国内第一部Matlab和C#.Net混合编程视频教程【免费】

                  本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新    Matlab和C#混合编程文章目录 :[目录]Matlab和C#混合编程文章目录 上一次写博客很久了 ...