bootstrap轮播图+表单+导航

最新推荐文章于 2022-05-02 15:51:11 发布

VIP文章 @Debug

最新推荐文章于 2022-05-02 15:51:11 发布

阅读量507

点赞数

文章标签：其他 c# 前端

本文链接：https://blog.csdn.net/qq_56275535/article/details/121579857

版权

轮播图

类名	描述
.carousel	创建一个轮播
.carousel-indicators	添加轮播指标，这些是每张轮播图底部的小点（指示轮播中有多少张轮播图，以及用户当前正在查看哪些轮播图）
.carousel-inner	将图片添加到轮播
.carousel-item	指定每张轮播图的内容
.carousel-control-prev	向轮播图添加一个左（上一个）按钮，允许用户在幻灯片之间返回
.carousel-control-next	向轮播图添加一个右（下一个）按钮，允许用户在幻灯片之间前进
.carousel-control-prev-icon	与.carousel-control-prev一起使用以创建“上一个”按钮
.carousel-control-next-icon	与.carousel-control-next一起使用以创建“下一步”按钮
.slide	当从一项滑动到另一项时，添加CSS过渡和动画效果。如果您不想要此效果，请删除该类

将标题添加到轮播图

在每个 <div class="carousel-item"> 中的 <div class="carousel-caption"> 中添加元素，以为每个幻灯片创建标题：

表单

表单控件会通过 Bootstrap 自动接收一些全局样式：

类 .form-control 的所有文本<input> ，<textarea> 和 <select> 元素的宽度均为100％。

下面的示例创建具有两个输入字段，一个复选框和一个提交按钮的堆叠表单。

在每个窗体控件周围添加一个带有 .form-group 的 wrapper 元素，以确保适当的边距：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/jquery-3.4.1.js"></script>
    <title>表单</title>
</head>

<body>
    <div class="container">
        <form action="">
            <div class="form-group">
                <!-- .form-group确保适当的边距 -->
                <label for="email">邮箱地址：</label>
                <input type="email" class="form-control" id="email" placeholder="请输入邮箱">
            </div>
            <div class="form-group">
                <label for="pwd">密码：</label>
                <input type="password" class="form-control" id="pwd" placeholder="请输入密码">
            </div>

            <div class="form-group form-check">
                <label for="form-check-label">
                    <input type="checkbox" class="form-check-input">勾选同意
                </label>
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>
</body>

</html>

内联表单

以内联形式，所有元素都是内联且左对齐。

注意：这仅适用于视口内至少576px宽的表单；在小于576px的屏幕上，它将水平堆叠。

内联表单的附加规则：将类 .form-inline 添加到 <form> 元素。

下面的示例创建一个内联表单，其中包含两个输入字段，一个复选框和一个提交按钮：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="js/jquery-3.4.1.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <title>表单2</title>
</head>

<body>
    <div class="container">
        <form class="form-inline">
            <label for="email">邮箱地址：</label>
            <input type="email" class="form-control" placeholder="请输入邮箱" id="email">
            <label for="pwd">密码：</label>
            <input type="password" class="form-control" placeholder="请输入密码" id="pwd">
            <div class="form-check">
                <label class="form-check-label">
                    <input type="checkbox" class="form-check-input">勾选同意
                </label>
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>
</body>

</html>

上面的内联形式感觉“已压缩”，使用 Bootstrap 的间距实用程序会看起来更好。

下面的示例在所有设备（小型和大型）上的每个输入上添加一个右边界 .mr-sm-2。当输入字段中断时（由于没有足够的空间/宽度，从水平到垂直），使用空白边距类 .mb-2 设置样式：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/jquery-3.4.1.js"></script>
    <title>表单3</title>
</head>

<body>
    <div class="container">
        <form class="form-inline">
            <label for="email" class="mr-sm-2">邮箱地址:</label>
            <input type="email" class="form-control mb-2 mr-sm-2" placeholder="请输入邮箱" id="email">
            <label for="pwd" class="mr-sm-2">密码：</label>
            <input type="password" class="form-control mb-2 mr-sm-2" placeholder="请输入密码" id="pwd">
            <div class&

最低0.47元/天解锁文章

@Debug

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
bootstrap轮播图+表单+导航

轮播图类名描述 .carousel 创建一个轮播 .carousel-indicators 添加轮播指标，这些是每张轮播图底部的小点（指示轮播中有多少张轮播图，以及用户当前正在查看哪些轮播图） .carousel-inner 将图片添加到轮播 .carousel-item 指定每张轮播图的内容 .carousel-control-prev 向轮播图添加一个左（上一个）按钮，允许用户在幻灯片之间返回 .carousel-control-next
复制链接

扫一扫