三、bootstrap表格,按钮,图片

2017-10-18  本文已影响0人  东东丶酱

知识点:

1、表格
2、按钮
3、图片

1、表格

  1)基本表格
  <table class="table">
 2)条纹表格
  <table class="table table-striped">
 3)边框表格
  <table class="table table-bordered">
 4)悬停表格
  <table class="table table-hover">
 5)精简表格
  <table class="table table-condensed">
 6)状态表格
  active、success、info、warning、danger
 7)隐藏某一行
  <tr class="sr-only">
 8)响应式表格
  //表格父元素设置响应式,小于 768px 出现边框
  <div class="table-responsive">

2、按钮

1)按钮标签
   //转化成普通按钮
   <a href="###" class="btn btn-default">Link</a>
   <button class="btn btn-default">Button</button>
   <input type="button" class="btn btn-default" value="input">
   注意:为了跨浏览器展现,尽量使用button
2)按钮大小
   .btn-lg  这会让按钮看起来比较大。
   .btn-sm  这会让按钮看起来比较小。
   .btn-xs  这会让按钮看起来特别小。
3)预定义样式
   .btn-default 默认/标准按钮
   .btn-primary 首选项样式
   .btn-success 成功样式
   .btn-info    一般信息样式
   .btn-warning 警告样式
   .btn-danger  危险样式
   .btn-link    链接样式
4)块级按钮
   .btn-block   块级按钮(拉伸至父元素100%的宽度)
5)激活状态
   <button class="btn active">Button</button>
6)禁用状态
   <button class="btn active disabled">Button</button>

3、图片

.img-rounded    圆角 (IE8 不支持)
.img-circle 圆形 (IE8 不支持)
.img-thumbnail  缩略图功能
.img-responsive 图片响应式 (将很好地扩展到父元素)
上一篇下一篇

猜你喜欢

热点阅读