按钮标签

在<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. SiteMesh3整合SpringMVC+FreeMarker

    SiteMesh3配置 添加maven依赖 添加filter 配置servlet 添加sitemesh配置文件 decorator示例 SpringMVC.FreeMarker配置(404问题处理) ...

  2. 了解了这些才能开始发挥jQuery的威力

    由于当前jQuery如此的如雷贯耳,相信不用介绍什么是jQuery了,公司代码中广泛应用了jQuery,但我在看一些小朋友的代码时发现一个问题,小朋友们使用的仅仅是jQuery的皮毛,只是使用id选择 ...

  3. NanoProfiler - 适合生产环境的性能监控类库 之 实践ELK篇

    上期回顾 上一期:NanoProfiler - 适合生产环境的性能监控类库 之 大数据篇 上次介绍了NanoProfiler的大数据分析理念,一晃已经时隔一年多了,真是罪过! 有朋友问到何时开源的问题 ...

  4. Behind RabbitMQ Exchange Types

    what's the underlying philosophy behind "exchange types"? In a word, it is all about imple ...

  5. IOS Socket 05-XMPP开始&安装服务器openfire&安装配置客户端

    1. 即时通讯技术简介(IM) 即时通讯技术(IM-Instant Messageing)支持用户在线实时交谈.如果要发送一条信息,用户需要打开一个小窗口,以便让用户及其朋友在其中输入信息并让交谈双方 ...

  6. iOS-MVC模式

    提到ios中的mvc不得不提2011秋季斯坦福课程的老头,他的iphone开发公开课是所有描述ios中mvc模式最为准确并且最为浅显易懂的. 模型-视图-控制器 这个模式其实应该叫做MCV,用控制器把 ...

  7. angularjs之插件ngRoute和ngAnimate

    使用ngRoute和ngAnimate配合使用,可以实现页面切换的效果. 如果有使用过swiper,就知道这个效果是怎么样的. 代码: <!DOCTYPE html> <html l ...

  8. HTML5横竖屏提示

    HTML代码: <div class="screen-prompt"></div> CSS判断代码: /*横竖屏提示*/ @media screen and ...

  9. Account problem-There may be a problem with your account. Please contact us. Sign out

    很多人在使用开发者账号AppleID的时候,都会碰到如下问题 There may be a problem with your account. Please contact us. 登录到苹果的开发 ...

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

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