Bootstrap4（3）

最新推荐文章于 2023-07-23 12:07:50 发布
最新推荐文章于 2023-07-23 12:07:50 发布
阅读量258 收藏
点赞数
分类专栏： Bootstrap4 文章标签： bootstrap html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxcWh/article/details/120509883
版权
这篇博客详细介绍了Bootstrap4的多种组件，包括表单的布局和控件，如输入框、复选框、单选框和下拉菜单。此外，还讲解了轮播、模态框、提示框和滚动监听功能的创建和使用，以及如何通过设置data属性和CSS类来实现不同效果。
摘要由CSDN通过智能技术生成

1.Bootstrap4 表单

表单元素 <input>, <textarea>, 和 <select> elements 在使用 .form-control 类的情况下，宽度都是

设置为 100%

Bootstrap4 表单布局

1.堆叠表单 (全屏宽度)：垂直方向

2.内联表单：水平方向

例如：

​
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>堆叠表单</h2>
        <form>
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" class="form-control" id="email" placeholder="Enter email">
            </div>
            <div class="form-group">
                <label for="pwd">Password:</label>
                <input type="password" class="form-control" id="pwd" placeholder="Enter password">
            </div>
            <div class="form-check">
                <label class="form-check-label">
                    <input class="form-check-input" type="checkbox"> Remember me
                </label>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
        <h2>内联表单</h2>
        <p>屏幕宽度在大于等于 576px 时才会水平显示。如果小于 576px 则会生成堆叠表单。</p>
        <form class="form-inline">
            <label for="email">Email:</label>
            <input type="email" class="form-control" id="email" placeholder="Enter email">
            <label for="pwd">Password:</label>
            <input type="password" class="form-control" id="pwd" placeholder="Enter password">
            <div class="form-check">
                <label class="form-check-label">
                    <input class="form-check-input" type="checkbox"> Remember
                </label>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</body>
</html>

​

2.Bootstrap4 表单控件

Bootstrap4 支持以下表单控件：input / textarea / checkbox / radio / select

Bootstrap Input

Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month,

time, week, number, email, url, search, tel, 以及 color

注意：: 如果 input 的 type 属性未正确声明，输入框的样式将不会显示

例如：

​
<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">   
      <h2>表单控件</h2>
        <div>
            <label for="usr">用户名:</label>
            <input type="text" class="form-control" id="usr">
        </div>
        <div class="form-group">
            <label for="pwd">密码:</label>
            <input type="password" class="form-control" id="pwd">
        </div>
    </div>
</body>
</html>

​

Bootstrap textarea

例如：

​
<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
    <h2>表单控件---textarea</h2>
    <form>
        <div class="form-group">
            <label form="com">评论：</label>
            <textarea class="form-control" rows="5" id="com"></textarea>
        </div>
    </form>
</body>
</html>

​

Bootstrap 复选框(checkbox)

复选框用于让用户从一系列预设置的选项中进行选择，可以选一个或多个。

使用 .form-check-inline 类可以让选项显示在同一行上

例如：

​
<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
    <h2>表单控件---checkbox</h2>
    <form>
        <div class="form-check">
            <label class="form-check-label">
                <input type="checkbox" value="" class="form-check-inline">checkbox 1
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input type="checkbox" value="" class="form-check-inline">checkbox 2
            </label>
        </div>
        <div class="form-check disabled">
            <label class="form-check-label">
                <input type="checkbox" value="" class="form-check-inline" disabled>checkbox 3
            </label>
        </div>
    </form>
</body>
</html>

​

Bootstrap 单选框(Radio)

单选框用于让用户从一系列预设置的选项中进行选择，只能选一个。

使用 .radio-inline 类可以让选项显示在同一行上

例如：

​
<!DOCTYPE html>
<html>

<head>
      <title>Bootstrap 实例</title>
      
    <meta charset="utf-8">
      
    <meta name="viewport" content="width=device-width, initial-scale=1">
      
    <link rel="stylesheet" href="https: //cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
      
    <script src="https: //cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
      
    <script src="https: //cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
      
    <script src="https: //cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <h2>表单控件---radio</h2>
        <from>
            <label class="radio-inline"><input type="radio" name="radio"> radio 1</label>
            <label class="radio-inline"><input type="radio" name="radio"> radio 2</label>
            <label class="radio-inline"><input type="radio" name="radio" disabled> radio 3</label>
        </from>
    </div>
</body>

</html>

​

Bootstrap select 下拉菜单

当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框

例如：        

​
<!DOCTYPE html>
<html>

<head>
      <title>Bootstrap 实例</title>
      
    <meta charset="utf-8">
      
    <meta name="viewport" content="width=device-width, initial-scale=1">
      
    <link rel="stylesheet" href="https: //cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
      
    <script src="https: //cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
      
    <script src="https: //cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
      
    <script src="https: //cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <h2>表单控件---select</h2>
        <form>
            <div class="form-group">
                <label for="1"单选下拉菜单></label>
                <select class="form-control" id="1">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </div>
            <br>
                <label for="2"多选下拉菜单></label>
                <select multiple class="form-control" id="2">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
        </form>
    </div>
</body>

</html>

​

3.Bootstrap4 输入框组

 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮

使用 .input-group-prepend 类可以在输入框的的前面添加文本信息， .input-group-append 类添加

在输入框的后面

例如：

​
<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>输入框组</h2>
        <form action="/action_page.php">
            <div class="input-group md-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">@</span>
                </div>
                <input type="text" id="usr" name="username" placeholder="Username" class="form-control">
            </div>
            <div class="input-group mb-3">
                <input type="text" placeholder="Your Email" id="mail" name="email" class="form-control">
                <div class="input-group-append">
                    <span class="input-group-text">@163.com</span>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">submit</button>
        </form>
</div>
</body>
</html>

​

输入框大小

 .input-group-sm 类来设置小的输入框， .input-group-lg 类设置大的输入框

例如：

​
<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>输入框大小</h2>
        <form>
            <div class="input-group md-3 input-group-sm">
                <div class="input-group-prepend">
                    <span class="input-group-text">small</span>
                </div>
                <input type="text" class="form-control">
            </div>
        </form>
        <form>
            <div class="input-group md-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">middle</span>
                </div>
                <input type="text" class="form-control">
            </div>
        </form>
        <form>
最低0.47元/天 解锁文章
山i
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap-4.3.1
06-30
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScri 在2018年1月下旬，Bootstrap团队发布了Bootstrap 4 正式版，4的最主要变化包括以下方面： 从 Less 迁移到 Sass 改进网格系统 缺省弹性框支持 Dropped wells, thumbnails, and panels for cards 合并所有 HTML resets 到一个新的模块中：Reboot 全新自定义选项 不再支持 IE8 重写所有的 JavaScript 插件 改进工具提示和 popovers 的自动定位 改进文档 其他大量改进 Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站，其中包括以下组件： 下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。 Bootstrap自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了“生命”。其中包括： 模式对话框、标签页、滚动条、弹出框等。
bootstrap框架4.3.1
qq_34942428的博客
12-12 1098
bootstrap 入门模板 包括引入bootstrap中css和js库,以及jquery.js和popper.js，以及引导以移动优先的原响应标记 <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8...
bootstrap-4.3.1-dist.zip
03-15
bootstrap-4.3.1-dist.zipbootstrap-4.3.1-dist.zipbootstrap-4.3.1-dist.zipbootstrap-4.3.1-dist.zipbootstrap-4.3.1-dist.zipbootstrap-4.3.1-dist.zipbootstrap-4.3.1-dist.zipbootstrap-4.3.1-dist.zipbootstrap-4.3.1-dist.zipbootstrap-4.3.1-dist.zip
Bootstrap前端框架 4.3.1
09-30
Bootstrap是最受欢迎的HTML、CSS和JS的前端开发框架，用于开发响应式布局、移动设备优先的WEB项目。它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式。 Bootstrap 4.3.1 更新日志
Bootstrap正式版v4.3.1
07-31
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。 Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 几乎每个示例都经过稳定的 v4 版本的重大修改，其中删除了一些过时的示例，添加了一些新的示
bootstrap4实现购物商城
06-18
在"bootstrap4实现购物商城"这个项目中，我们将会探讨如何利用Bootstrap 4的强大功能来创建一个功能完备、视觉吸引人的在线购物平台。 首先，Bootstrap 4 提供了一套完整的网格系统，允许开发者轻松地创建多列布局...
bootstrap-slider：Bootstrap 3和Bootstrap 4的滑块控件
01-29
从主要版本11.0.0开始，我们仅支持Bootstrap 4！ 安装 要使用凉亭吗？ bower install seiyria-bootstrap-slider 要使用npm吗？ npm install bootstrap-slider 想要从CDN获得它吗？ 基本设定 从目录中获取已编译...
Datatables bootstrap4_database_WebVB6_zip_bootstrap4_源码
10-04
《Datatables Bootstrap4在WebVB6中的应用及数据库集成》 在现代网页开发中，数据展示和管理是一项重要任务，而Datatables与Bootstrap4的结合则为开发者提供了强大的工具。本资源“Datatables bootstrap4_database_...
Bootstrap4 for Axure9
12-29
Bootstrap 4 是一个广泛使用的前端开发框架，专为构建响应式和移动优先的网站而设计。它提供了丰富的组件、样式和JavaScript插件，使得...总的来说，"Bootstrap4 for Axure9"是提升原型设计效率和质量的有力资源。
bootstrap4案例
12-10
这个“bootstrap4案例”集合提供了一个实用的示例，适用于那些已经掌握了基础的Bootstrap知识，想要进一步实践和提升技能的开发者，同时也非常适合教师作为教学材料。 在Bootstrap 4中，有以下几个核心知识点： 1....
bootstrap-4.3.1.zip
06-18
bootstrap最新jar包，适用于前端页面开发，移动端页面开发，是一款强大的工具
bootstrap-fileinput-4.3.2
04-29
官方的bootstrap-fileinput-4.3.2 bootstrap fileinput 4.3.2 官方 文件图片上传
bootstrap-fileinput：用于Bootstrap 4.x.3.x的增强型HTML 5文件输入，具有文件预览，多项选择和更多功能
02-02
引导文件输入 用于Bootstrap 3.x和4.x的增强型HTML 5文件输入，具有针对各种文件的文件预览，提供多项选择，可恢复的块上载等等。 该插件使您可以通过一种简单的方法来设置一个高级文件选择器/上载控件，该控件专门用于Bootstrap 3.x或4.x CSS3样式。 通过提供对预览各种文件（即图像，文本，html，视频，音频，flash和对象）的支持，它进一步增强了文件输入功能。 此外，它包括基于AJAX的上载，拖放文件，查看上载进度以及有选择地预览，添加或删除文件。 注意：5.x版是重要的重写。 在版本5.x中，该插件代码已进行了改进，以增强的文件管理，可恢复的块上载支持以及其他新功能。 您可以浏览各种封闭的增强功能和特性，并记录在。 注意： bootstrap-fileinput起，用于bootstrap-fileinput的替代新（如下所示预览）已发布并可用。 有关更多主题选择和建议，请参考。 文档和演示 在Krajee JQuery插件上查看和。 先决条件 最新的 大多数支持HTML5（输入和FileReader API）的现代浏览器，包括CSS3和JQu
bootstrap-4.3.0
02-18
引导是一个开放源码工具包，用于使用HTML、CSS和JS进行开发。快速原型您的想法或建立您的整个应用程序与我们的Sass变量和混合，响应网格系统，广泛的预建组件，和强大的插件之上构建的jQuery
bs-custom-file-input：一个用于Bootstrap 4自定义文件输入的小插件
01-31
bs定制文件输入 一个小插件，可以使Bootstrap 4自定义文件输入动态化，而无需依赖。 您也可以在和上使用它，因为此插件是使用最常用JavaScript框架。 特征： 与Bootstrap 4一起使用 无需依赖和jQuery即可工作 显示文件名 显示multiple输入的文件名 将您的自定义文件输入重置为其初始状态 处理表格重置 允许自定义选择器进行输入和表单 允许拖放文件 允许您更改<label>元素中带有子元素的默认显示 内置UMD，可在任何地方使用 很小，只有2kb或更少（如果您将其压缩） 目录 安装 与npm npm install bs-custom-file-input --save CDN CDN 链接 jsDelivr jsDelivr，缩小 如何使用它 您应该等待文档就绪事件，然后调用init方法使您的自定义文件输入动态化。 我们公开了一个随处可用的全局变量： bsCustomFileInput $ ( document ) . ready ( function ( ) { bsCustomFileInput . init ( ) } ) 与
Bootstrap-4.3.1版本的使用方法
Y1916326465的博客
09-10 1429
1、Bootstrap有如下连网引用文件： 　　bootstrap.css （ 未经压缩 ） 　　bootstrap.min.js（ 压缩版，体积小，传输速度快 ） 　　bootstrap.js 　　bootstrap.min.js 以上引用文件均为4.3.1版，且bootstrap的使用依赖 jQuery ，故使用前需引入 jquery-3.4.1.js 文件，实例如下（引...
BootStrap4-fileinput 小图标无法显示：
Wu_learner的博客
10-13 3434
BootStrap4-fileinput 小图标无法显示： 如下图 一、出现这种情况的原因？ 从Bootstrap4后图标开始收费，文件中不再提供免费的图标。图标分离。 二、具体解决办法 首先：bootstrap4以上版本相对于3，在bootstrap.css中缺少图标样式代码，同时减掉了提供样式依赖的fonts文件夹，如下： 以下为可以运行后的完整文件：具体一一说明： 1.首先第一步 一、在bootstrap.min.css文件末尾粘贴缺少的图标样式代码：（代码在文章末尾，自行复制） 二、将Boo
4.3 Bootstrap CSS编码规范
最新发布
梁辰兴的博客
07-23 639
例如，HTML 的 heading 元素只需要设置上、下边距（margin）的值，因此，在必要的时候，只需覆盖这两个值就可以。过度使用简写形式的属性声明会导致代码混乱，并且会对属性值带来不必要的覆盖从而引起意外的副作用。MDN（Mozilla Developer Network）上一片非常好的关于shorthand properties 的文章，对于不太熟悉简写属性声明及其行为的用户很有用。当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。
4.3 BootStrap案例实战
热门推荐
kzl_knight的博客
05-22 1万+
1.3 BootStrap案例实战 关于BootStrap的文档详见： https://v3.bootcss.com/
bootstrap入门
F的博客
02-08 185
bootstrap是一套现成的样式 如何在jsp页面使用bootstrap？ 1.先在官网下载用于生产环境的bootstrap版本 https://v3.bootcss.com/getting-started/#download 2.将解压的这三个文件夹复制到项目目录下，我放到了bootstrap文件夹下 3，下载jQuery放到项目目录下 https://www.jq22.com/jquery-info122 4.在jsp页面引用（顺序不能乱） <%--这个
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值