Bootstrap学习Day2

最新推荐文章于 2024-08-14 10:15:16 发布

OnMy22

最新推荐文章于 2024-08-14 10:15:16 发布

阅读量167

点赞数

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/weixin_38654336/article/details/80205297

版权

Bootstrap 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Bootstrap构建不同样式和尺寸的按钮、按钮组及下拉菜单，并展示如何结合图标和响应式布局。

摘要由CSDN通过智能技术生成

一、按钮和图片

代码：

<body>
    <div class="container">
        <button type="button" class="btn btn-default">default</button>
        <button type="button" class="btn btn-primary">primary</button>
        <button type="button" class="btn btn-success">success</button>
        <button type="button" class="btn btn-info">info</button>
        <button type="button" class="btn btn-warning">warning</button>
        <button type="button" class="btn btn-link">link</button>
        <button type="button" class="btn btn-danger">danger</button>

    </div>
    <div class="div">
        <button type="button" class="btn btn-info btn-lg">info</button>
        <button type="button" class="btn btn-info">info</button>
        <button type="button" class="btn btn-info btn-sm">info</button>
        <button type="button" class="btn btn-info btn-xs">info</button>
    </div>

    <!--disable禁用状态-->
    <button type="button" class="btn btn-default btn-block" disabled="disabled">hello</button> <!--按钮充满整个屏幕-->

    <a href="#" class="btn btn-default btn-lg active" role="button">default</a>
    <input class="btn btn-default" type="button" value="input">


<img src="" alt="" class="img-circle"><!--这是一个圆形图片-->
<img src="" alt="" class="img-rounded"><!--圆角图片-->
<img src="" alt="" class="img-thumbnail"><!--这是一个带边框的图片-->
</body>

效果：

二、下拉菜单

引入js文件：

引入bootstrap所依赖的jquery文件（jquery官网上下载）：

代码：

<body>
    <div class="container">
        <div class="dropdown pull-right">
            <button class="btn btn-default dropdown-toggle " type="button" data-toggle="dropdown">
                下拉菜单
                <span class="caret"></span>

            </button>
            <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
                <!--<li role="presentation" class="dropdown-header">大写一到四</li>--> <!--分类标识-->
                <li><a href="#" role="menuitem">一</a></li>
                <li><a href="#" role="menuitem">二</a></li>
                <li><a href="#" role="menuitem">三</a></li>
                <li><a href="#" role="menuitem">四</a></li>
                <li role="presentation" class="divider"></li> <!--分割线-->
                <!--<li role="presentation" class="dropdown-header">小写一道四</li>-->
                <li><a href="#" role="menuitem">1</a></li>
                <li><a href="#" role="menuitem">2</a></li>
                <li class="disabled"><a href="#" role="menuitem">3</a></li>
                <li><a href="#" role="menuitem">4</a></li>

            </ul>
        </div>
    </div>


    <script src="jquery-3.3.1.min.js"></script><!--需要引入jquery与js文件，否则无法弹出下拉框-->
    <script src="bootstrap.min.js"></script>
</body>

效果：

三、按钮组

为了能够正常的看到图标，需要引入cdn：https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

（一）按钮组实例：

<div class="container">
    <div class="btn-group">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>

    </div>
</div>

<div class="btn-toolbar">
    <div class="btn-group">
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
    </div>

效果：

（二）设置按钮组的尺寸

<!--控制按钮的大小-->
<div class="container">
    <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
    </div>
    <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
    </div>
    <div class="btn-group btn-group-xs">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
    </div>
</div>

效果：

（三）按钮与下拉菜单嵌套使用

<div class="btn-group">
    <button type="button" class="btn btn-default">1</button>
    <button type="button" class="btn btn-default">2</button>
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            下拉菜单
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">点我</a> </li>
            <li><a href="#">点我</a> </li>
        </ul>
    </div>
</div>

效果：

（四）让按钮充满整个屏幕

<div class="btn-group btn-group-justified">
    <div class="btn-group">
        <button type="button" class="btn btn-default">Left</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">Middle</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">Right</button>
    </div>
</div>

效果：

四、按钮式下拉菜单

（一）分裂式下拉菜单

<body>
    <div class="container">
        <div class="btn-group">
            <button type="button" class="btn btn-info">分裂式下拉菜单</button>
            <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">

                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
            </ul>
        </div>
    </div>
<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>

效果：

（二）改变按钮的大小

<button type="button" class="btn btn-info btn-xs">分裂式下拉菜单</button>

在button中添加属性btn-..