zoukankan      html  css  js  c++  java
  • bootstrap学习笔记系列4------bootstrap按钮

    按钮标签

    <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>
    
  • 相关阅读:
    MySql数据库时区异常,java.sql.SQLException: The server time zone value '?й???׼ʱ?' is unrecognized or represents more than one time zone.
    SpringBoot中自定义properties文件配置参数并带有输入提示
    Springboot2.x 集成jsp
    Spring Boot使用AOP实现REST接口简易灵活的安全认证
    Spring Boot使用过滤器和拦截器分别实现REST接口简易安全认证
    Spring Boot使用RestTemplate消费REST服务的几个问题记录
    Spring Boot开发MongoDB应用实践
    Spring Boot定时任务应用实践
    Spring Boot缓存应用实践
    Spring Boot消息队列应用实践
  • 原文地址:https://www.cnblogs.com/MaFeng0213/p/6091158.html
Copyright © 2011-2022 走看看