bootStrap的小知识

代码模块

  <code> 内联代码

  <kbd> 用户输入

  <pre>代码段

  <var>数学字符

  <samp>程序输出

表格

  <thead>表头

  <th>表格表题

  <table-striped> 表格(斑马线)

  <table-bordered> 表格边框

  <table-hover> 鼠标经过,变色

  <table-responsive> 鼠标响应式

表单

  label   必须要有

  sr-only  隐藏label

  form-horizontal  水平表单

  fieldset disabled 禁用全部

  has-warning 警告

  has-success 成功

  has-error 错误

下拉菜单

  dropdown 可下拉

  dropdown-toggle 下拉菜单

  caret  小三角

  dropdown-menu  role=“menu” 下拉菜单列表

  dropup 小三角变上

  data-toggle="drop-down'

  toggle 切换

输入框

  <input-group-addon>

导航nav

  tablist

  presentaction

  nav-pills 胶囊式

  nav-stacked 垂直

  nav-justified 占满全屏

  breadcrumb 路径导航

media 媒体

  media-left

  media-body

  media-heading

  media-top

  media-middle

  media-bottom

  media-list

面板 panel

  panel-heading 面板头部

  panel-body 面板身体

embed-responsive 响应式

well

page

  <—— previous

  ——> next

  <<  &laquo

  >> &raquo

label 标题

badge 徽章

jumbotron 巨幕

thumbnail 缩略图

caption 标题

可关闭的警告框  class=“close” data-dismiss=“alert”

fade 过度

modal的data-dismiss属性

<button type="button" class="btn default" data-dismiss="modal">关闭</button>
如果你的modal弹窗里面加上这个按钮,那么点击则会关闭当前弹窗,关键在于data-dismiss="modal",它让按钮有了这个功能。这是bootstrap.js中MODAL插件相关代码中定义的:


aria-expanded表示展开状态
aria-hidden字符串。可选值为true和false,true表示元素隐藏(不可见),false表示元素可见。

data
    backdrop 鼠标点击消失

     scroll 滚动条

    tooltp 工具提示

    collapse  手工琴效果

             carousel   轮播

    affix 列表组侧边栏

原文地址:https://www.cnblogs.com/mm163/p/10454292.html