码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap 组件

时间:2017-01-06 10:30:34      阅读:265      评论:0      收藏:0      [点我收藏+]

标签:ges   username   禁用   put   navbar   otto   ted   通过   边框   

  bootstrap  组件
1下拉菜单(dropdown)
 下拉菜单切换(dropdown-toggle)
 下拉菜单对齐(dropdown-menu-right-右对齐)
下拉菜单分割线(divider)
禁用菜单(disabled)
 
2按钮组(btn-group)
 按钮组尺寸(btn-group-lg,btn-group-sm,btn-group-xs)
 嵌套:只须把 .btn-group 放入另一个 .btn-group 中
 eg:<div class="btn-group">
        <div class="btn-group">
        </div>
     </div>
 垂直排列(btn-group-vertical)
3按钮式下拉菜单:把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了。
 单按钮下拉菜单
 
 eg;<div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Action <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
   </div>
 
 分列式按钮下拉菜单
 eg:<div class="btn-group">
        <button type="button" class="btn btn-danger">Action</button>
      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
      </ul>
    </div>
 按钮尺寸
(btn-group-lg,btn-group-sm,btn-group-xs)
4 向上弹出式菜单(dropup)
5 输入框组(input-group):通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮,可以实现对表单控件的扩展
 eg:<div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" placeholder="Username">
    </div>
  也可在span的类里加字体图标
6导航(nav)
 标签页:注意 .nav-tabs 类赖.nav 基类
 eg:
     <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation"><a href="#">Messages</a></li>
     </ul>
 胶囊式标签页
  HTML 标记相同,但使用 .nav-pills 类:
  胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类。
7 导航条
  为了增强可访问性,务必给每个导航条加上 role="navigation" 属性。
  eg:
      <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">
                <img alt="Brand" src="...">可以放图片 标签
            </a>
        </div>
      </div>
    </nav>
  表单
  将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐,并  在较窄的视口(viewport)中呈现折叠状态。 使用对齐选项可以  规定其在导航条上出现的位置。
  按钮
  对于不包含在 <form> 中的 <button> 元素,加上 .navbar-btn   后,可以让它在导航条里垂直居中。
  文本
  把文本包裹在 .navbar-text中时,为了有正确的行距和颜色,通   常使用 <p> 标签。
  固定在顶部
  添加 (.navbar-fixed-top) 类可以让导航条固定在顶部,还可包含  一个 .container 或 .container-fluid 容器,从而让导航条居 中,并在两侧添加内部(padding)。
 
   固定在底部
   添加 .navbar-fixed-bottom
   静止在顶部
   通过添加 .navbar-static-top 类即可创建一个与页面等宽度的    导航条,它会随着页面向下滚动而消失
8分页(pagination)
  翻页(pager)链接居中对齐   
 两端对齐(class="previous",class="next")
  eg;
    <ul class="pager">
        <li class="previous"><a href="#">&larr; Older</a></li>
        <li class="next"><a href="#">Newer &rarr;</a></li>
    </ul>
 9徽章
 
  给链接、导航等元素嵌套 <span class="badge"> 元素,可以很  醒目的展示新的或未读的信息条目。
10关闭的警告框
  为警告框添加一个可选的 .alert-dismissible 类和一个关闭按  钮。
11 进度条(progress)
   动画效果
   为 .progress-bar-striped 添加 .active 类,使其呈现出由右   向左运动的动画效果。
12 媒体对象(media)
 
这是一个抽象的样式,用以构建不同类型的组件,这些组件都具有在文本内容的左或右侧对齐的图片
13列表组(list-group)给列表组加入徽章组件,它会自动被放在右边。
  eg:<ul class="list-group">
 
      <li class="list-group-item">Vestibulum at eros</li>
       .
       .
       .
     </ul>
14面板(panel)
  标题的面版(.panel-heading)
  带脚注的面版
   把按钮或次要的文本放入 .panel-footer 容器内。注意面版的   脚注不会从情境效果中继承颜色,因为他们并不是主要内容。
  带表格的面版
  为面板中不需要边框的表格添加 .table 类,是整个面板看上去更   像是一个整体设计。如果是带有 .panel-body 的面板,我们为表   格的上方添加一个边框,看上去有分隔效果。

bootstrap 组件

标签:ges   username   禁用   put   navbar   otto   ted   通过   边框   

原文地址:http://www.cnblogs.com/nan-3/p/6255001.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!