• 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>
    
  • 相关阅读:
    一本通1269 有限背包
    python3 threading.Lock() 多线程锁的使用
    Sqlite3错误:Recursive use of cursors not allowed 的解决方案
    linux 常用命令
    90%的人说Python程序慢,5大神招让你的代码像赛车一样跑起来
    python3 使用flask连接数据库出现“ModuleNotFoundError: No module named 'MySQLdb'”
    Navicat Premium12远程连接MySQL数据库
    pymysql pymysql.err.OperationalError 1045 Access denied最简单解决办法
    CentOS7 安装MySQL8修改密码
    CentOS7 升级Openssl的办法
  • 原文地址:https://www.cnblogs.com/MaFeng0213/p/6091158.html
Copyright © 2020-2023  润新知