Bootstrap学习笔记-css组件Hello_yihao的博客

最新推荐文章于 2021-12-21 16:36:18 发布

Hello_yihao

最新推荐文章于 2021-12-21 16:36:18 发布

阅读量419

点赞数 2

分类专栏：学习笔记文章标签： bootstrap 博客表单 class

本文链接：https://blog.csdn.net/Hello_yihao/article/details/78323253

版权

学习笔记专栏收录该内容

19 篇文章 2 订阅

订阅专栏

输入框组

输入框前面，后面或是两边加上文字或按钮
只支持文本输入框
不要将表单组或栅格列（column）类直接和输入框组混合使用而是将输入框组嵌套到表组或栅格相关元素内部。

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

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

图标

在内联元素上使用（glyphicon glyphicon-*）
图标类不能和其他组件直接联合使用
bootstrap假定所有的图标字体文件全部位于../fonts/目录内，相对于预编译版css文件的目录

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

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

下拉菜单

在网页交互的时候经常会需要上下文菜单或者隐藏/展开菜单
下拉菜单的javascript插件能让它具有交互性
下拉菜单的用法：
-名为 .dropdown样式所在的是大容器
-.dropdown-menu是放菜单li的容器
-.open可以控制菜单展开与否

<!--下拉-->
<div 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>
</div>

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

按钮组：把按钮放在名为btn-group的容器内即可除第一个、最后一个按钮和dropdown按钮外其他按钮取消圆角
按钮工具栏：把按钮组放在名为btn-toolbar的容器内即可
按钮尺寸：btn-group-lg、btn-group-sm、btn-group-xs

<div 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>
</div>
<!--按钮组-->
<div class="box btn-toolbar">
    <!--大按钮-->
    <div 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>
    </div>
    <!--小按钮-->
    <div 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>
        <div 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>
        </div>
    </div>
    <!--超小按钮-->
    <div 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>
    </div>
</div>

垂直分组按钮：将btn-group替换为btn-group-vertical
嵌套分组：按钮组与下拉菜单综合使用
自适应分组：该样式仅完美支持a元素按钮

<!--自适应按钮组 btn-group-justified-->
<div 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>
</div>

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

最方便还是使用a元素 a元素也可以模拟出按钮的效果：Bootstrap学习笔记-css布局

按钮下拉菜单
-组合式下拉菜单：下拉菜单外部容器的样式从.dropdown改为.btn-group
-分离式菜单按钮和箭头分离的菜单

<div 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="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

导航

选项卡导航（nav-tabs）
胶囊式选项卡导航（nav-pills）
堆叠式导航（nav-stacked）
自适应导航（nav-justified）
二级导航

<div 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="divider"></li>
                <li><a href="#">买金币</a></li>
            </ul>
        </li>
        <li><a href="#">购物车</a></li>
        <li><a href="#">客服中心</a></li>
    </ul>

</div>

Hello_yihao

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap学习笔记-css组件Hello_yihao的博客

输入框组输入框前面，后面或是两边加上文字或按钮只支持文本输入框不要将表单组或栅格列（column）类直接和输入框组混合使用而是将输入框组嵌套到表组或栅格相关元素内部。<div class="input-group"> <input type="text" class="form-control" placeholder="请输入内容"/
复制链接

扫一扫

专栏目录