📝 Bootstrap教程
418篇技术文档📅 最后修改于: 2021-05-25 18:11:13 🧑 作者: Mango
Bootstrap为我们提供了可以与不同标签(例如<button>，<a>，<input>和<label>)一起使用的不同类，以应用自定义按钮样式。 Bootstrap还提供可用于更改按钮状态和大小的类，还提供用于应用切换，复选框和单选按钮(如效果)的类。实心按钮：Bootstrap为我们提供了一系列对应于不同实心按钮样式的类。这些类在下面列出：btn-primarybtn-secondarybt...
📅 最后修改于: 2021-05-25 18:11:44 🧑 作者: Mango
简介与安装网格系统按钮，字形图标，表格下拉菜单和响应式标签进度栏和超大屏幕在本文中，我们将学习创建表单。表格几乎在每个网站中都使用，它们用于收集用户输入。形式：Bootstrap提供三种类型的表单布局，即：垂直形式(默认)水平表格内联表格我们将分别研究它们中的每一个：垂直形式：首先，我们将使用<form>标记初始化表单。我们将所有标签和表单控件包装在标签<div class =“ form-gro...
📅 最后修改于: 2021-05-25 18:12:10 🧑 作者: Mango
在本文中，我们将学习如何在HTML的一行中接受两个输入。 HTML支持各种类型的输入，例如文本，密码，日期时间，日期，时间，星期，数字，电子邮件等等。在多种情况下，我们必须在一行中或彼此相邻处接受多个输入，这可以通过.input-group和inline元素来实现。内联元素不会占用整条线，而是会根据需要占用尽可能多的宽度。示例1：在两个连续的字段中进行输入。htmlhtmlhtml输出：示例2：将...
📅 最后修改于: 2021-05-25 18:14:07 🧑 作者: Mango
HTML或超文本标记语言以及CSS(级联样式表)和JavaScript可用于开发可执行某些功能的交互式用户应用程序。同样，可以完全使用HTML，CSS和JS开发二进制计算器。二进制计算器对二进制数执行算术运算。二进制计算器的缓冲区限制为8位。如果算术运算的结果超过8位，则多余的位将被截断。算术运算是使用JavaScript函数完成的。该应用程序包括一个显示屏，在该显示屏上显示用户输入以及算术运算的...
📅 最后修改于: 2021-05-25 18:14:44 🧑 作者: Mango
在本文中，我们将学习如何在Bootstrap中正确使用图像叠加。但是在此之前，首先，我们需要知道什么是图像叠加层。图像叠加层：图像叠加层通常是指该图像是背景图像，并在该图像内部插入文本，链接。可以使用引导程序中存在的‘card-img-overlay’属性来完成此操作。我们也可以使用普通的CSS和bootstrap主题来做到这一点。今天，我们将学习两种了解属性的技术。示例1：在引导程序中使用“ c...
📅 最后修改于: 2021-05-25 18:15:14 🧑 作者: Mango
简介与安装网格系统按钮，字形图标，表格垂直形式，水平形式，内联形式下拉菜单和响应式标签进度栏和超大屏幕快讯我们通常会在完成某项操作之前或之后在某些网站上看到某些警报。这些警报消息是突出显示的文本，在执行过程时要考虑这些文本。 Bootstrap允许我们使用预定义的类在我们的网站上显示这些警报消息。如何使用引导程序类添加警报消息在div元素内，添加一个警报类。使用以下类来设置消息框的颜色样式绿色–警...
📅 最后修改于: 2021-05-25 18:15:47 🧑 作者: Mango
任务是在Bootstrap中为YouTube视频使用模式。在这里，我们将讨论两个主题，将YouTube视频嵌入到Bootstrap模式中，并使YouTube视频自动在Bootstrap模式中播放。使用以下方法可以很容易地将YouTube视频嵌入到Bootstrap模式中。但是，当您关闭模式时，会有一个小问题，视频将继续在后台播放。方法：首先，复制代码以嵌入来自YouTube网站的视频。然后，将代码...
📅 最后修改于: 2021-05-25 18:16:26 🧑 作者: Mango
BootstrapCollapse插件有助于折叠网页内容并在整个应用程序中切换其可见性。该插件有助于划分页面内容并使其易于折叠，还支持许多内容选项，例如手风琴。方法：Bootstrap提供了一些JavaScript函数作为属性，而折叠JavaScript插件附带了一个名为data- *的属性。切换任何数据：data-toggle属性设置为在您的切换按钮中折叠。数据目标设置为要切换的div的类或ID...
📅 最后修改于: 2021-05-25 18:16:58 🧑 作者: Mango
.badge类用于向内容添加其他信息。例如，某些网站将一些通知关联到该链接。登录到特定网站时会看到通知号，该网站通过单击告诉新闻或通知号。例子：输出：上下文徽章：上下文类(.badge- *)用于更改徽章的颜色。徽章可以用作链接或按钮的一部分，以提供计数器。根据徽章的使用方式，徽章一定会使用户感到困惑。为此，使用了不同的变化颜色，以使用户不会感到困惑。例子：输出：药丸徽章：.badge-pill类...
📅 最后修改于: 2021-05-25 18:19:48 🧑 作者: Mango
Bootstrap 5是Bootstrap的最新主要发行版，他们在其中改进了UI并进行了各种更改。模态用于向您的站点添加对话框，以显示灯箱，用户通知或完全自定义的内容。使用HTML，CSS和JavaScript构建模态。它们位于文档中所有其他内容的上方，并从<body>中移除滚动，从而使模式内容滚动。句法：示例：此示例使用show演示Bootstrap 5中的模式。触发模态之前的输出：触发模态后的...
📅 最后修改于: 2021-05-25 18:20:16 🧑 作者: Mango
BootStrap是用于前端Web开发的最受欢迎，免费且开源的CSS框架。BootStrap 4是正在使用的最新版本。 BootStrap 4提供了广泛的组件，内容，布局和实用程序。 Bootstrap 4提供了一个网格系统，该系统使用一系列容器，行和列来布局和对齐内容。网格系统允许用户创建具有自定义规格的网格。网格系统是使用flexbox构建的，具有充分的响应能力，可以根据屏幕大小来调整列的大小...
📅 最后修改于: 2021-05-25 18:20:40 🧑 作者: Mango
在Bootstrap 4中，.modal(’dispose’)是定义为破坏模式的函数。即使使用.modal(’dispose’)之后，模态仍然是DOM的一部分，此函数只会破坏模态组件的当前实例。句法：示例：此示例说明了.modal(’dispose’)方法的使用。单击dispose按钮时，将删除模式组件的jQuery实例。因此，单击按钮后，其他模态函数均不起作用。输出：注意：要在使用dispose...
📅 最后修改于: 2021-05-25 18:21:30 🧑 作者: Mango
<select>标记：<select>组件用于制作一个下拉列表。 <select>组件最常用于表单中，以收集用户输入。提交表单后，必须使用name属性来引用表单数据(如果您排除了name属性，则不会提交下拉列表中的任何数据)。必须使用id属性才能将下拉列表与名称相关联。 <select>组件内的<option>标记表示下拉列表中的可访问选项。句法：属性：autofocus：表示页面加载时，下拉列表...