Bootstrap之css组件Hello、css布局代码教程

输入框组

输入框前面，后面或是两边加上文字或按钮

只支持文本输入框

不要将表单组或栅格列(column)类直接和输入框组混合使用 而是将输入框组嵌套到表组或栅格相关元素内部。

<!--文本框组 input-group-->
<p class="input-group">

    <input type="text" class="form-control" placeholder="请输入内容"/>
    <!--变成按钮的样式 input-group-addon 放在 后 面-->
    <span class="input-group-addon">百度一下</span>
</p>

图标

在内联元素上使用(glyphicon glyphicon-*)

图标类不能和其他组件直接联合使用

bootstrap假定所有的图标字体文件全部位于../fonts/目录内，相对于预编译版css文件的目录

<a href="#" class="glyphicon  glyphicon-floppy-open a"></a>

bootstrap 提供了上百种图标可以到官网直接复制类名使用即可

下拉菜单

在网页交互的时候经常会需要上下文菜单或者隐藏/展开菜单

下拉菜单的javascript插件能让它具有交互性

下拉菜单的用法：

-名为 .dropdown样式所在的是大容器

-.dropdown-menu是放菜单li的容器

-.open可以控制菜单展开与否

<!--下拉-->
<p class="dropdown">
    <!--必须加data-toggle="dropdown" 才可以实现下拉效果-->
    <button class="btn btn-primary" data-toggle="dropdown">
        click here!
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li>这是下拉的菜单</li>
        <li>这是下拉的菜单</li>
        <li>这是下拉的菜单</li>
        <li>这是下拉的菜单</li>
        <li>这是下拉的菜单</li>
        <li>这是下拉的菜单</li>
    </ul>
</p>

span标签里的 class=”caret” 是下拉图标，当需要实现上拉菜单时， 只需要给最外层的父容器p标签 class=”dropdown” 修改成 class=”dropup” 即可 ，而且向下的图标也会自动变成向上的图标。

按钮组

按钮组：把按钮放在名为btn-group的容器内即可 除第一个、最后一个按钮和dropdown按钮外其他按钮取消圆角

按钮工具栏：把按钮组放在名为btn-toolbar的容器内即可

按钮尺寸：btn-group-lg、btn-group-sm、btn-group-xs

<p class="box btn-group">
    <button class="btn btn-primary">look here!</button>
    <button class="btn btn-danger">look here!</button>
    <button class="btn btn-default">look here!</button>
    <button class="btn btn-info">look here!</button>
    <button class="btn btn-success">look here!</button>
</p>
<!--按钮组-->
<p class="box btn-toolbar">
    <!--大按钮-->
    <p class=" btn-group btn-group-lg">
        <button class="btn btn-primary">look here!</button>
        <button class="btn btn-danger">look here!</button>
        <button class="btn btn-default">look here!</button>
    </p>
    <!--小按钮-->
    <p class=" btn-group btn-group-sm">
        <button class="btn btn-primary">look here!</button>
        <button class="btn btn-danger">look here!</button>
        <button class="btn btn-default">look here!</button>
        <p class="btn-group">
            <button class="btn btn-primary" data-toggle="dropdown">
                click here!
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li>look here !</li>
                <li>look here !</li>
                <li>look here !</li>
            </ul>
        </p>
    </p>
    <!--超小按钮-->
    <p class=" btn-group btn-group-xs">
        <button class="btn btn-primary">look here!</button>
        <button class="btn btn-danger">look here!</button>
        <button class="btn btn-default">look here!</button>
    </p>
</p>

垂直分组按钮：将btn-group替换为btn-group-vertical

嵌套分组：按钮组与下拉菜单综合使用

自适应分组：该样式仅完美支持a元素按钮

<!--自适应按钮组 btn-group-justified-->
<p class=" btn-group btn-group-justified">
    <!--使用button按钮并不能完美适应浏览器-->
    <!--<button class="btn btn-primary">look here!</button>-->
    <!--最好使用a元素-->
    <a href="#" class="btn btn-success">look there!</a>
    <a href="#" class="btn btn-success">look there!</a>
    <a href="#" class="btn btn-success">look there!</a>
    <a href="#" class="btn btn-success">look there!</a>
    <a href="#" class="btn btn-success">look there!</a>
</p>

<!--如果必须要使用button-->
<p class="btn-group btn-group-justified">
    <p class="btn-group">
        <button class="btn btn-success">click here!</button>
    </p>
    <p class="btn-group">
        <button class="btn btn-success">click here!</button>
    </p>
    <p class="btn-group">
        <button class="btn btn-success">click here!</button>
    </p>
    <p class="btn-group">
        <button class="btn btn-success">click here!</button>
    </p>
</p>

最方便还是使用a元素 a元素也可以模拟出按钮的效果：

按钮下拉菜单

-组合式下拉菜单：下拉菜单外部容器的样式从.dropdown改为.btn-group

-分离式菜单按钮和箭头分离的菜单

<p class="btn-group">
        <!--让按钮和箭头分离 裂变式按钮-->
        <button class="btn btn-success">look here!</button>
        <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
    <ul class="dropdown-menu">
        <!--在li标签里面加上a标签效果会更好 文字会自动排版-->
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="pider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</p>

导航

选项卡导航(nav-tabs)

胶囊式选项卡导航(nav-pills)

堆叠式导航(nav-stacked)

自适应导航(nav-justified)

二级导航

<p class="container">
    选项卡导航
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">买家</a></li>
        <li><a href="#">卖家</a></li>
        <li><a href="#">店主</a></li>
        <li><a href="#">淘金币</a></li>
        <li><a href="#">购物车</a></li>
        <li><a href="#">客服中心</a></li>
    </ul>
    胶囊式选项卡导航
    <ul class="nav nav-pills">
        <!--class="active" 表示被选中的状态-->
        <li><a href="#">首页</a></li>
        <li class="active"><a href="#">买家</a></li>
        <li><a href="#">卖家</a></li>
        <li><a href="#">店主</a></li>
        <li><a href="#">淘金币</a></li>
        <li><a href="#">购物车</a></li>
        <li><a href="#">客服中心</a></li>
    </ul>
    堆叠式导航
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">买家</a></li>
        <li><a href="#">卖家</a></li>
        <li><a href="#">店主</a></li>
        <li><a href="#">淘金币</a></li>
        <li><a href="#">购物车</a></li>
        <li><a href="#">客服中心</a></li>
    </ul>
    自适应
    <ul class="nav nav-pills nav-justified">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">买家</a></li>
        <li><a href="#">卖家</a></li>
        <li><a href="#">店主</a></li>
        <li><a href="#">淘金币</a></li>
        <li><a href="#">购物车</a></li>
        <li><a href="#">客服中心</a></li>
    </ul>
    二级导航
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">买家</a></li>
        <li><a href="#">卖家</a></li>
        <li><a href="#">店主</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">淘金币
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">抢金币</a></li>
                <li><a href="#">送金币</a></li>
                <li><a href="#">花金币</a></li>
                <!--角色   分割线          分频器-->
                <li role="separator" class="pider"></li>
                <li><a href="#">买金币</a></li>
            </ul>
        </li>
        <li><a href="#">购物车</a></li>
        <li><a href="#">客服中心</a></li>
    </ul>

</p>