初识bootstrap

bootstrap一些类名和用法的总结

1.dropdown 下拉菜单
.dropdown-menu 创建下拉菜单。
.dropdown-menu-right 下拉菜单右对齐。
.dropdown-header 下拉菜单中添加标题。
.dropup 向上弹出下拉菜单。
.divider 分割线。
.disabled 不可被选择。
aria-expanded=“false” 表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值：true表示元素是展开的；false表示元素不是展开的。
2.按钮

类名	作用
.btn	为按钮添加基本样式
.btn-default	默认/标准按钮
.btn-link	让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg	制作一个大按钮
btn-block	块级按钮(拉伸至父元素100%的宽度)
.active	按钮被点击
.disabled	禁用按钮

<div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-6">
               <a href="" class="btn btn-default">Link</a>
               <button class="btn btn-primary">Button</button>
               <input type="button" class="btn btn-success" value="登录">
               <input type="submit" class="btn btn-danger" value="删除">
            </div>
            <div class="col-xs-12 col-md-6">
               <a href="" class="btn btn-default">default</a>
               <a href="" class="btn btn-primary">primary</a>
               <a href="" class="btn btn-success">success</a>
               <a href="" class="btn btn-danger">danger</a>
               <a href="" class="btn btn-warning">warning</a>
               <a href="" class="btn btn-info">info</a>
               <a href="" class="btn btn-link">link</a>
            </div>
            <div class="col-xs-12 col-md-6">
                <a href="" class="btn btn-default btn-lg">btn-lg</a>
                <a href="" class="btn btn-primary">默认尺寸</a>
                <a href="" class="btn btn-success btn-sm">btn-sm</a>
                <a href="" class="btn btn-danger btn-xs">btn-xs</a>
            </div>
            <div class="col-xs-12 col-md-6">
                <a href="" class="btn btn-success btn-sm btn-block">提交</a>
            </div>
        </div>
    </div>

3.表单
formizontal 水平显示一组
form-group 将 label 元素和控件包裹在 .form-group 中可以获得最好的排列
form-control
所有设置了 .form-control 类的 、 和 元素都将被默认设置宽度属性为 width: 100%;
control-label 为label添加样式
col-sm-xx 通过该格栅系统来指定各个控件的宽度。
input-lg input-sm 通过该类来指定空间的高度。