(二)Bootstrap表格和按钮

本节知识点

  • 表格
  • 按钮

(一)表格

  • 基础样式 class = "table"
<table class="table">
     <theader>
         <tr>
             <th>1</th>
             <th>2</th>
             <th>3</th>
             <th>4</th>
         </tr>
     </theader>
</table>
  • 表格加上边框 table-bordered
<table class="table table-bordered">
  • 响应式表格

表格的父元素设置成响应式,小于768px出现边框

<body class="table-responsive">

(二) 按钮

  • 注意事项
    a超链接要是在导航里面,想变成按钮必须要加上role="button"属性 才能使用class="btn"的属性
    尽量使用<button>这个标签。input标签在火狐下面可能不能完全与行高保持高度

  • 预留信息 btn-warning等等

 class = "btn btn-default"  //默认颜色
 class = "btn btn-primary"  //浅蓝色
 class = "btn btn-success"  //绿色
 class = "btn btn-info"    //信息蓝色
 class= "btn btn-danger"  //危险红色
 class = "btn btn-warning"  //黄色
 class = "btn btn-link"  //超链接
    <button class="btn btn-default">天津</button>
    <button class="btn btn-primary">天津</button>
    <button class="btn btn-success">天津</button>
    <button class="btn btn-danger">天津</button>
    <button class="btn btn-warning">天津</button>
    <button class="btn btn-info">天津</button>
    <button class="btn btn-link">天津</button>
  • 尺寸大小 btn-xs ,btn-lg 等等
  <button class="btn btn-xs">手机上的小按钮</button>
    <button class="btn btn-sm">平板上的小按钮</button>
    <button class="btn btn-md">电脑上的小按钮</button>
    <button class="btn btn-lg">手机上的大按钮</button>
  • 按钮块级元素 一个按钮占了一行
<button class=" btn btn-block">按钮块级元素</button>
<button class=" btn btn-block">按钮块级元素2</button>
  • 按钮禁用状态
 <button class=" btn disabled">这个按钮被禁用了</button>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 5,426评论 0赞 66
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,376评论 1赞 92
  • 一、Bootstrap 网格系统如何跨多个设备工作![Uploading Paste_Image_217205.p...
    Lareina林暖暖阅读 514评论 0赞 1
  • 题目描述一只青蛙一次可以跳上1级台阶,也可以跳上2级。求该青蛙跳上一个n级的台阶总共有多少种跳法。
    juexin阅读 208评论 0赞 0
  • “如果有一天你看见我疯了,那就是你疯了” 用这句话来谈《天才在左,疯子在右》这本书,感觉再贴切不过。阅读书中的每一...
    时不待我不辜负阅读 432评论 0赞 4

友情链接更多精彩内容