一只特立独行的鱼儿

Bootstrap4官方文档 | v4核心 -- 组件(二)

本文翻译于bootstrap官网,主要用于查看文档,方便学习,文章比较长!

阅读目录

入门Bootstrap4
组件

表单

表单控件
大小
只读
只读纯文本
范围输入
复选框和单选框
行内
没有标签

表单布局

表格组
表格网格
表格行
水平形式
水平表格标签大小
列大小
自动调整大小
内联表格
帮助文字
禁用表格
验证方式
自定义样式
支持的元素
工具提示
开关
选择菜单
范围
文件浏览器

输入组

复选框和单选框
多个插件
按钮

大屏幕
列表组

链接和按钮
上下文类
带徽章
自订内容
方法
事记

媒体对象

嵌套
对齐
媒体列表

模态框

模态组件
滚动长内容
工具提示和弹出窗口
使用网格
各种模态内容
可选尺寸
方法

导航

水平对齐
垂直
标签
填写并证明
使用下拉菜单

导航栏

了解：
支持内容:
品牌
导航
嵌套下拉菜单
表单
输入组
文本
导航背景颜色
导航栏布局
位置
响应
切换器
折叠内容

分页

使用图标
大小
对齐方式

滚动式

Scrollspy了解
嵌套导航
列表组

Bootstrap是一个简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。是全球最流行的前端框架，用于构建响应式、移动设备优先的 WEB 站点。

入门Bootstrap4

组件

表单

表单控件样式，布局选项和用于创建各种表单的自定义组件的示例和使用指南

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">电子邮件地址label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">我们不会向任何人透露您的邮件地址small>
  div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">检查label>
  div>
  <button type="submit" class="btn btn-primary">提交button>
form>

表单控件

文本形式的控件（如，</code>）使用<code>.form-control</code>该类设置样式。其中包括用于一般外观，焦点状态，大小调整等的样式。 确保探索我们的自定义表单以进一步样式化<code><select></code>。 <pre><code class="prism language-html"><form> <div class="form-group"> <label for="exampleFormControlInput1">Email address</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com"> </div> <div class="form-group"> <label for="exampleFormControlSelect1">Example select</label> <select class="form-control" id="exampleFormControlSelect1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <label for="exampleFormControlSelect2">Example multiple select</label> <select multiple class="form-control" id="exampleFormControlSelect2"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <label for="exampleFormControlTextarea1">Example textarea</label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> </div> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/664174b377d245c7ba2e3f513a6cd486.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/664174b377d245c7ba2e3f513a6cd486.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第2张图片" width="650" height="258" style="border:1px solid black;"></a> 对于文件输入，将替换<code>.form-control</code>为<code>.form-control-file</code>。 <pre><code class="prism language-html"><form> <div class="form-group"> <label for="exampleFormControlFile1">示例文件输入</label> <input type="file" class="form-control-file" id="exampleFormControlFile1"> </div> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/981a9b2403804dd1b14cbf9a7a7f8f41.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/981a9b2403804dd1b14cbf9a7a7f8f41.png" alt="在这里插入图片描述" width="271" height="92"></a> <h3>大小</h3> 使用类<code>.form-control-lg</code>和设置高度<code>.form-control-sm</code>。 <pre><code class="prism language-html"><input class="form-control form-control-lg" type="text" placeholder=".form-control-lg"> <input class="form-control" type="text" placeholder="Default input"> <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm"> </code></pre> <a href="http://img.e-com-net.com/image/info8/ad5d4aa4a1fe4f4580b3389ddc23111d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ad5d4aa4a1fe4f4580b3389ddc23111d.jpg" alt="在这里插入图片描述" width="650" height="87"></a> <pre><code class="prism language-html"><select class="form-control form-control-lg"> <option>Large select</option> </select> <select class="form-control"> <option>Default select</option> </select> <select class="form-control form-control-sm"> <option>Small select</option> </select> </code></pre> <a href="http://img.e-com-net.com/image/info8/c919bf9f0e064f718538d15e15284110.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c919bf9f0e064f718538d15e15284110.jpg" alt="在这里插入图片描述" width="650" height="88"></a> <h3>只读</h3> <code>readonly</code>在输入上添加布尔属性，以防止修改输入的值。只读输入看起来较浅（就像禁用的输入一样），但保留了标准光标。 <pre><code class="prism language-html"><input class="form-control" type="text" placeholder="只读输入在这里..." readonly> </code></pre> <img src="http://img.e-com-net.com/image/info8/c2d5c60cb1f9426ca4210b87981f178f.jpg" alt="在这里插入图片描述" width="650" height="32"> <h3>只读纯文本</h3> 如果希望<code><input readonly></code>表单中的元素以纯文本样式设置，请使用<code>.form-control-plaintext</code>该类删除默认的表单字段样式，并保留正确的边距和填充。 <pre><code class="prism language-html"><form> <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">电子邮件</label> <div class="col-sm-10"> <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com"> </div> </div> <div class="form-group row"> <label for="inputPassword" class="col-sm-2 col-form-label">密码</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword"> </div> </div> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/620c78742fce441d8696fedb9d4c176a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/620c78742fce441d8696fedb9d4c176a.jpg" alt="在这里插入图片描述" width="650" height="77"></a> <pre><code class="prism language-html"><form class="form-inline"> <div class="form-group mb-2"> <label for="staticEmail2" class="sr-only">Email</label> <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com"> </div> <div class="form-group mx-sm-3 mb-2"> <label for="inputPassword2" class="sr-only">密码</label> <input type="password" class="form-control" id="inputPassword2" placeholder="Password"> </div> <button type="submit" class="btn btn-primary mb-2">确认身份</button> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/2f7ba348d04e44a5a3fd4d4169dc145f.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/2f7ba348d04e44a5a3fd4d4169dc145f.png" alt="在这里插入图片描述" width="603" height="53"></a> <h3>范围输入</h3> 使用设置水平滚动范围输入<code>.form-control-range</code>。 <pre><code class="prism language-html"><form> <div class="form-group"> <label for="formControlRange">范围输入示例</label> <input type="range" class="form-control-range" id="formControlRange"> </div> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/896558e4d8f84b04b980caf8508767e8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/896558e4d8f84b04b980caf8508767e8.jpg" alt="在这里插入图片描述" width="650" height="55"></a> <h3>复选框和单选框</h3> 默认复选框和收音机时的帮助下提高<code>.form-check</code>，单一类改善他们的HTML元素的布局和行为都输入类型。复选框用于选择列表中的一个或多个选项，而单选框则用于从多个选项中选择一个选项。 支持禁用的复选框和收音机。该<code>disabled</code>属性将应用较浅的颜色，以帮助指示输入的状态。 复选框和单选按钮支持基于HTML的表单验证，并提供简洁，可访问的标签。因此，我们的<code><input></code>和<code><label></code>如相对于一个同级元素<code><input></code>内的<code><label></code>。这有点冗长，因为您必须指定id和for属性以关联<code><input></code>和<code><label></code>。 <pre><code class="prism language-html"><div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Default checkbox </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled> <label class="form-check-label" for="defaultCheck2"> Disabled checkbox </label> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/664294724ded4914a87355e916e3885f.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/664294724ded4914a87355e916e3885f.png" alt="在这里插入图片描述" width="167" height="73"></a> <pre><code class="prism language-html"><div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked> <label class="form-check-label" for="exampleRadios1"> Default radio </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2"> <label class="form-check-label" for="exampleRadios2"> Second default radio </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled> <label class="form-check-label" for="exampleRadios3"> Disabled radio </label> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/0dce8406027d42fab8ffe07b75af1784.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/0dce8406027d42fab8ffe07b75af1784.png" alt="在这里插入图片描述" width="260" height="80"></a> <h3>行内</h3> 通过将复选框或单选框添加<code>.form-check-inline</code>到同一水平行来对它们进行分组<code>.form-check</code>。 <pre><code class="prism language-html"><div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> <label class="form-check-label" for="inlineCheckbox1">1</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> <label class="form-check-label" for="inlineCheckbox2">2</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled> <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/f20b0d4266f749899c0460a056065dc5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f20b0d4266f749899c0460a056065dc5.jpg" alt="在这里插入图片描述" width="280" height="60"></a> <pre><code class="prism language-html"><div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> <label class="form-check-label" for="inlineRadio1">1</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> <label class="form-check-label" for="inlineRadio2">2</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled> <label class="form-check-label" for="inlineRadio3">3 (disabled)</label> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/595c0cd6eff34cf6865d508a203f1452.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/595c0cd6eff34cf6865d508a203f1452.png" alt="在这里插入图片描述" width="266" height="47"></a> <h3>没有标签</h3> 添加<code>.position-static</code>到<code>.form-check</code>其中没有任何标签文本的输入中。请记住，仍要为辅助技术提供某种形式的可访问名称（例如，使用<code>aria-label</code>）。 <pre><code class="prism language-html"><div class="form-check"> <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="..."> </div> <div class="form-check"> <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="..."> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/3cd9caf215ee4dd1a2da56669a2acadb.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/3cd9caf215ee4dd1a2da56669a2acadb.png" alt="在这里插入图片描述" width="180" height="64"></a> <h2>表单布局</h2> 由于引导应用<code>display: block</code>和<code>width: 100%</code>几乎所有的表单控件，表格会默认堆栈垂直。可以使用其他类来根据表单更改此布局。 <h3>表格组</h3> 该<code>.form-group</code>是一些结构添加到形式最简单的方法。它提供了一个灵活的类，它鼓励标签，控件，可选的帮助文本和表单验证消息的正确分组。默认情况下，它仅适用<code>margin-bottom</code>，但会<code>.form-inline</code>根据需要选择其他样式。与<code><fieldset></code>，<code><div></code>或几乎其他任何元素一起使用。 <pre><code class="prism language-html"><form> <div class="form-group"> <label for="formGroupExampleInput">标签示例</label> <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder"> </div> <div class="form-group"> <label for="formGroupExampleInput2">另一个标签示例</label> <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder"> </div> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/07b549c5a4334437bfbadb55422f105a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/07b549c5a4334437bfbadb55422f105a.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第3张图片" width="650" height="106" style="border:1px solid black;"></a> <h3>表格网格</h3> 可以使用我们的网格类构建更复杂的表单。将它们用于需要多列，可变宽度和其他对齐选项的表单布局。 <pre><code class="prism language-html"><form> <div class="row"> <div class="col"> <input type="text" class="form-control" placeholder="First name"> </div> <div class="col"> <input type="text" class="form-control" placeholder="Last name"> </div> </div> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/72e17ccd99d8446b9556caa85128f5d7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/72e17ccd99d8446b9556caa85128f5d7.jpg" alt="在这里插入图片描述" width="650" height="35"></a> <h3>表格行</h3> 您也可以互换<code>.row</code>的<code>.form-row</code>，覆盖缺省列排水沟更严格和更紧凑的布局，我们的标准网格行的变化。 <pre><code class="prism language-html"><form> <div class="form-row"> <div class="col"> <input type="text" class="form-control" placeholder="First name"> </div> <div class="col"> <input type="text" class="form-control" placeholder="Last name"> </div> </div> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/273e428c3c144fbcad293e2772477b18.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/273e428c3c144fbcad293e2772477b18.jpg" alt="在这里插入图片描述" width="650" height="33"></a> 也可以使用网格系统创建更复杂的布局。 <pre><code class="prism language-html"><form> <div class="form-row"> <div class="form-group col-md-6"> <label for="inputEmail4">邮箱</label> <input type="email" class="form-control" id="inputEmail4"> </div> <div class="form-group col-md-6"> <label for="inputPassword4">密码</label> <input type="password" class="form-control" id="inputPassword4"> </div> </div> <div class="form-group"> <label for="inputAddress">地址</label> <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"> </div> <div class="form-group"> <label for="inputAddress2">地址2</label> <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="inputCity">城市</label> <input type="text" class="form-control" id="inputCity"> </div> <div class="form-group col-md-4"> <label for="inputState">区</label> <select id="inputState" class="form-control"> <option selected>选择</option> <option>...</option> </select> </div> <div class="form-group col-md-2"> <label for="inputZip">Zip</label> <input type="text" class="form-control" id="inputZip"> </div> </div> <div class="form-group"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="gridCheck"> <label class="form-check-label" for="gridCheck"> 选择我 </label> </div> </div> <button type="submit" class="btn btn-primary">登录</button> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/9cf21f1f3f7e41689970af26f68e24cb.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9cf21f1f3f7e41689970af26f68e24cb.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第4张图片" width="650" height="253" style="border:1px solid black;"></a> <h3>水平形式</h3> 通过将<code>.row</code>类添加到表单组并使用这些<code>.col-*-*</code>类指定标签和控件的宽度，可以使用网格创建水平表单。请务必同时添加，<code>.col-form-label</code>以<code><label></code>使它们与相关的表单控件垂直居中。 有时，您可能需要使用边距或填充实用程序来创建所需的完美对齐方式。例如，我们删除<code>padding-top</code>了堆叠式无线电输入标签上的，以更好地对齐文本基线。 <pre><code class="prism language-html"><form> <div class="form-group row"> <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3"> </div> </div> <div class="form-group row"> <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3"> </div> </div> <fieldset class="form-group"> <div class="row"> <legend class="col-form-label col-sm-2 pt-0">Radios</legend> <div class="col-sm-10"> <div class="form-check"> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked> <label class="form-check-label" for="gridRadios1"> First radio </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2"> <label class="form-check-label" for="gridRadios2"> Second radio </label> </div> <div class="form-check disabled"> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled> <label class="form-check-label" for="gridRadios3"> Third disabled radio </label> </div> </div> </div> </fieldset> <div class="form-group row"> <div class="col-sm-2">Checkbox</div> <div class="col-sm-10"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="gridCheck1"> <label class="form-check-label" for="gridCheck1"> Example checkbox </label> </div> </div> </div> <div class="form-group row"> <div class="col-sm-10"> <button type="submit" class="btn btn-primary">Sign in</button> </div> </div> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/aa41bbe39293486b92ad88b9d2a918ac.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/aa41bbe39293486b92ad88b9d2a918ac.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第5张图片" width="650" height="173" style="border:1px solid black;"></a> <h3>水平表格标签大小</h3> 一定要使用<code>.col-form-label-sm</code>或<code>.col-form-label-lg</code>您的<code><label></code>或<code><legend></code>到正确遵循的大小<code>.form-control-lg</code>和<code>.form-control-sm</code>。 <pre><code class="prism language-html"><form> <div class="form-group row"> <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label> <div class="col-sm-10"> <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm"> </div> </div> <div class="form-group row"> <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label"> </div> </div> <div class="form-group row"> <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label> <div class="col-sm-10"> <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg"> </div> </div> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/141ff25fa5b1435190ae06ee6a0ddcac.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/141ff25fa5b1435190ae06ee6a0ddcac.jpg" alt="在这里插入图片描述" width="650" height="100"></a> <h3>列大小</h3> 如前面的示例所示，我们的网格系统允许您<code>.col</code>在<code>.row</code>或内放置任意数量的<code>.form-row</code>。他们将在它们之间平均分配可用宽度。您还可以选择列的子集来占用更多或更少的空间，而其余的<code>.cols</code>用其他特定的列类（例如）平均分配其余部分<code>.col-7</code>。 <pre><code class="prism language-html"><form> <div class="form-row"> <div class="col-7"> <input type="text" class="form-control" placeholder="City"> </div> <div class="col"> <input type="text" class="form-control" placeholder="State"> </div> <div class="col"> <input type="text" class="form-control" placeholder="Zip"> </div> </div> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/432627d2d92e46c796e186189ed28693.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/432627d2d92e46c796e186189ed28693.jpg" alt="在这里插入图片描述" width="650" height="41"></a> <h3>自动调整大小</h3> 下面的示例使用flexbox实用工具将内容垂直居中并更改 <code>.col</code>为<code>.col-auto</code>以便您的列仅占用所需的空间。换句话说，该列将根据内容自行调整大小。 <pre><code class="prism language-html"><form> <div class="form-row align-items-center"> <div class="col-auto"> <label class="sr-only" for="inlineFormInput">Name</label> <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe"> </div> <div class="col-auto"> <label class="sr-only" for="inlineFormInputGroup">Username</label> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text">@</div> </div> <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username"> </div> </div> <div class="col-auto"> <div class="form-check mb-2"> <input class="form-check-input" type="checkbox" id="autoSizingCheck"> <label class="form-check-label" for="autoSizingCheck"> Remember me </label> </div> </div> <div class="col-auto"> <button type="submit" class="btn btn-primary mb-2">Submit</button> </div> </div> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/5d23ddb9891c4a74bf6d1a54404be38f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5d23ddb9891c4a74bf6d1a54404be38f.jpg" alt="在这里插入图片描述" width="650" height="52"></a> 可以再次将其与特定于大小的列类重新混合。 <pre><code class="prism language-html"><form> <div class="form-row align-items-center"> <div class="col-sm-3 my-1"> <label class="sr-only" for="inlineFormInputName">Name</label> <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe"> </div> <div class="col-sm-3 my-1"> <label class="sr-only" for="inlineFormInputGroupUsername">Username</label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text">@</div> </div> <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username"> </div> </div> <div class="col-auto my-1"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="autoSizingCheck2"> <label class="form-check-label" for="autoSizingCheck2"> Remember me </label> </div> </div> <div class="col-auto my-1"> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/9e6a5a1518434131a1d86085f8d58a60.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9e6a5a1518434131a1d86085f8d58a60.jpg" alt="在这里插入图片描述" width="650" height="49"></a> 还支持自定义表单控件。 <pre><code class="prism language-html"><form> <div class="form-row align-items-center"> <div class="col-auto my-1"> <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label> <select class="custom-select mr-sm-2" id="inlineFormCustomSelect"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div> <div class="col-auto my-1"> <div class="custom-control custom-checkbox mr-sm-2"> <input type="checkbox" class="custom-control-input" id="customControlAutosizing"> <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label> </div> </div> <div class="col-auto my-1"> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/5a784512e8584665b3ecc2a484453649.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/5a784512e8584665b3ecc2a484453649.png" alt="在这里插入图片描述" width="513" height="59"></a> <h3>内联表格</h3> 使用<code>.form-inline</code>该类可在单个水平行上显示一系列标签，表单控件和按钮。内联表单中的表单控件与其默认状态略有不同。 <ul> <li>控件是<code>display: flex</code>，可以折叠任何HTML空格，并允许您提供带有空格和flexbox实用程序的对齐控件。</li> <li>控件和输入组接收width: auto以覆盖Bootstrap默认值width: 100%。</li> <li>控件仅在宽度至少为576像素的视口中内嵌显示，以解决移动设备上的视口狭窄的问题。</li> </ul> 您可能需要使用间距实用程序手动解决单个表单控件的宽度和对齐问题（如下所示）。最后，<code><label></code>即使您需要使用来向非屏幕阅读者隐藏它，也请确保始终在每个表单控件中都包含一个<code>.sr-only</code>。 <pre><code class="prism language-html"><form class="form-inline"> <label class="sr-only" for="inlineFormInputName2">Name</label> <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe"> <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label> <div class="input-group mb-2 mr-sm-2"> <div class="input-group-prepend"> <div class="input-group-text">@</div> </div> <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username"> </div> <div class="form-check mb-2 mr-sm-2"> <input class="form-check-input" type="checkbox" id="inlineFormCheck"> <label class="form-check-label" for="inlineFormCheck"> Remember me </label> </div> <button type="submit" class="btn btn-primary mb-2">Submit</button> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/9acec06ea91d4ababf6c563533587949.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9acec06ea91d4ababf6c563533587949.jpg" alt="在这里插入图片描述" width="650" height="55"></a> <h3>帮助文字</h3> 可以使用<code>.form-text</code>（以前在v3中称为<code>.help-block</code>）创建表单中的块级帮助文本。可以使用任何内联HTML元素和实用程序类（如）灵活地实现内联帮助文本<code>.text-muted</code>。 <pre><code class="prism language-html"><label for="inputPassword5">密码</label> <input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock"> <small id="passwordHelpBlock" class="form-text text-muted"> 您的密码长度必须为8-20个字符，包含字母和数字，并且不得包含空格，特殊字符或表情符号。 </small> </code></pre> <a href="http://img.e-com-net.com/image/info8/d3272b8240df4ed09cf957fd8a4502a5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d3272b8240df4ed09cf957fd8a4502a5.jpg" alt="在这里插入图片描述" width="650" height="64"></a> 嵌入式文本可以使用任何典型的内嵌HTML元素（可以是一个 <code></code>，<code></code>或别的东西），有什么比一个实用工具类的更多。 <pre><code class="prism language-html"><form class="form-inline"> <div class="form-group"> <label for="inputPassword6">密码</label> <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline"> <small id="passwordHelpInline" class="text-muted"> 必须是8-20个字符长。 </small> </div> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/ef9249265f0d4a378b27ed76e02b199e.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/ef9249265f0d4a378b27ed76e02b199e.png" alt="在这里插入图片描述" width="453" height="63"></a> <h3>禁用表格</h3> <code>disabled</code>在输入上添加布尔属性，以防止用户交互并使它看起来更浅。 <pre><code class="prism language-html"><input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> </code></pre> 将<code>disabled</code>属性添加到中<code><fieldset></code>以禁用其中的所有控件。 <pre><code class="prism language-html"><form> <fieldset disabled> <div class="form-group"> <label for="disabledTextInput">禁止输入</label> <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"> </div> <div class="form-group"> <label for="disabledSelect">禁止选择菜单</label> <select id="disabledSelect" class="form-control"> <option>禁止选择</option> </select> </div> <div class="form-group"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled> <label class="form-check-label" for="disabledFieldsetCheck"> 无法选中 </label> </div> </div> <button type="submit" class="btn btn-primary">提交</button> </fieldset> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/d644ddf45be9440cb25f19f920849d3a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d644ddf45be9440cb25f19f920849d3a.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第6张图片" width="650" height="146" style="border:1px solid black;"></a> <h3>验证方式</h3> <h3>自定义样式</h3> 对于自定义的Bootstrap表单验证消息，您需要将<code>novalidate</code>boolean属性添加到<code><form></code>。这将禁用浏览器的默认反馈工具提示，但仍提供对JavaScript中的表单验证API的访问。尝试提交以下表格；我们的JavaScript会拦截“提交”按钮，并将反馈转发给您。尝试提交时，您将看到<code>:invalid</code>和<code>:valid</code>样式应用于表单控件。 自定义反馈样式将应用自定义颜色，边框，焦点样式和背景图标，以更好地传达反馈。背景图标<code><select></code>仅可用于<code>.custom-select</code>，而不能使用<code>.form-control</code>。 <pre><code class="prism language-html"><form class="needs-validation" novalidate> <div class="form-row"> <div class="col-md-6 mb-3"> <label for="validationCustom01">First name</label> <input type="text" class="form-control" id="validationCustom01" value="Mark" required> <div class="valid-feedback"> Looks good! </div> </div> <div class="col-md-6 mb-3"> <label for="validationCustom02">Last name</label> <input type="text" class="form-control" id="validationCustom02" value="Otto" required> <div class="valid-feedback"> Looks good! </div> </div> </div> <div class="form-row"> <div class="col-md-6 mb-3"> <label for="validationCustom03">City</label> <input type="text" class="form-control" id="validationCustom03" required> <div class="invalid-feedback"> Please provide a valid city. </div> </div> <div class="col-md-3 mb-3"> <label for="validationCustom04">State</label> <select class="custom-select" id="validationCustom04" required> <option selected disabled value="">Choose...</option> <option>...</option> </select> <div class="invalid-feedback"> Please select a valid state. </div> </div> <div class="col-md-3 mb-3"> <label for="validationCustom05">Zip</label> <input type="text" class="form-control" id="validationCustom05" required> <div class="invalid-feedback"> Please provide a valid zip. </div> </div> </div> <div class="form-group"> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required> <label class="form-check-label" for="invalidCheck"> Agree to terms and conditions </label> <div class="invalid-feedback"> You must agree before submitting. </div> </div> </div> <button class="btn btn-primary" type="submit">Submit form</button> </form> <script> // Example starter JavaScript for disabling form submissions if there are invalid fields (function() { 'use strict'; window.addEventListener('load', function() { // Fetch all the forms we want to apply custom Bootstrap validation styles to var forms = document.getElementsByClassName('needs-validation'); // Loop over them and prevent submission var validation = Array.prototype.filter.call(forms, function(form) { form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false); }); }, false); })(); </script> </code></pre> <a href="http://img.e-com-net.com/image/info8/2f8f6d83a3a04bb28fe60084fe427e6e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2f8f6d83a3a04bb28fe60084fe427e6e.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第7张图片" width="650" height="141" style="border:1px solid black;"></a> 服务器端 我们建议使用客户端验证，但是如果您需要服务器端验证，则可以使用<code>.is-invalid</code>和指示无效和有效的表单字段<code>.is-valid</code>。请注意，<code>.invalid-feedback</code>这些类也支持。 对于无效字段，请使用来确保无效反馈/错误消息与相关表单字段相关联<code>aria-describedby</code>。id如果该字段已经指向其他表单文本，则此属性允许引用多个。 <pre><code class="prism language-html"><form> <div class="form-row"> <div class="col-md-6 mb-3"> <label for="validationServer01">First name</label> <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required> <div class="valid-feedback"> Looks good! </div> </div> <div class="col-md-6 mb-3"> <label for="validationServer02">Last name</label> <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required> <div class="valid-feedback"> Looks good! </div> </div> </div> <div class="form-row"> <div class="col-md-6 mb-3"> <label for="validationServer03">City</label> <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required> <div id="validationServer03Feedback" class="invalid-feedback"> Please provide a valid city. </div> </div> <div class="col-md-3 mb-3"> <label for="validationServer04">State</label> <select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required> <option selected disabled value="">Choose...</option> <option>...</option> </select> <div id="validationServer04Feedback" class="invalid-feedback"> Please select a valid state. </div> </div> <div class="col-md-3 mb-3"> <label for="validationServer05">Zip</label> <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required> <div id="validationServer05Feedback" class="invalid-feedback"> Please provide a valid zip. </div> </div> </div> <div class="form-group"> <div class="form-check"> <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required> <label class="form-check-label" for="invalidCheck3"> Agree to terms and conditions </label> <div id="invalidCheck3Feedback" class="invalid-feedback"> You must agree before submitting. </div> </div> </div> <button class="btn btn-primary" type="submit">Submit form</button> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/8a7d426aa2b248028af0a3ca47685100.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8a7d426aa2b248028af0a3ca47685100.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第8张图片" width="650" height="181" style="border:1px solid black;"></a> <h3>支持的元素</h3> 验证样式可用于以下表单控件和组件： <ul> <li><code><input></code>和<code><textarea></code>与<code>.form-control</code></li> <li><code><select></code>与<code>.form-control</code>或<code>.custom-select</code></li> <li><code>.form-checks</code></li> <li><code>.custom-checkboxs</code>和<code>.custom-radios</code></li> <li><code>.custom-file</code></li> </ul> <pre><code class="prism language-html"><form class="was-validated"> <div class="mb-3"> <label for="validationTextarea">Textarea</label> <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea> <div class="invalid-feedback"> Please enter a message in the textarea. </div> </div> <div class="custom-control custom-checkbox mb-3"> <input type="checkbox" class="custom-control-input" id="customControlValidation1" required> <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label> <div class="invalid-feedback">Example invalid feedback text</div> </div> <div class="custom-control custom-radio"> <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required> <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label> </div> <div class="custom-control custom-radio mb-3"> <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required> <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label> <div class="invalid-feedback">More example invalid feedback text</div> </div> <div class="mb-3"> <select class="custom-select" required> <option value="">Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <div class="invalid-feedback">Example invalid custom select feedback</div> </div> <div class="custom-file mb-3"> <input type="file" class="custom-file-input" id="validatedCustomFile" required> <label class="custom-file-label" for="validatedCustomFile">Choose file...</label> <div class="invalid-feedback">Example invalid custom file feedback</div> </div> <div class="mb-3"> <div class="input-group is-invalid"> <div class="input-group-prepend"> <span class="input-group-text" id="validatedInputGroupPrepend">@</span> </div> <input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required> </div> <div class="invalid-feedback"> Example invalid input group feedback </div> </div> <div class="mb-3"> <div class="input-group is-invalid"> <div class="input-group-prepend"> <label class="input-group-text" for="validatedInputGroupSelect">Options</label> </div> <select class="custom-select" id="validatedInputGroupSelect" required> <option value="">Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div> <div class="invalid-feedback"> Example invalid input group feedback </div> </div> <div class="input-group is-invalid"> <div class="custom-file"> <input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required> <label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label> </div> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button">Button</button> </div> </div> <div class="invalid-feedback"> Example invalid input group feedback </div> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/8ba878f72f074bd3a7617c54519701d2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8ba878f72f074bd3a7617c54519701d2.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第9张图片" width="650" height="343" style="border:1px solid black;"></a> <h3>工具提示</h3> 如果您的表单布局允许，则可以将<code>.{valid|invalid}-feedback</code>类交换为<code>.{valid|invalid}-tooltip</code>类，以在样式化的工具提示中显示验证反馈。确保<code>position: relative</code>在其上放置父项以进行工具提示定位。在下面的示例中，我们的列类已经具有此功能，但是您的项目可能需要替代设置。 <pre><code class="prism language-html"><form class="needs-validation" novalidate> <div class="form-row"> <div class="col-md-6 mb-3"> <label for="validationTooltip01">First name</label> <input type="text" class="form-control" id="validationTooltip01" value="Mark" required> <div class="valid-tooltip"> Looks good! </div> </div> <div class="col-md-6 mb-3"> <label for="validationTooltip02">Last name</label> <input type="text" class="form-control" id="validationTooltip02" value="Otto" required> <div class="valid-tooltip"> Looks good! </div> </div> </div> <div class="form-row"> <div class="col-md-6 mb-3"> <label for="validationTooltip03">City</label> <input type="text" class="form-control" id="validationTooltip03" required> <div class="invalid-tooltip"> Please provide a valid city. </div> </div> <div class="col-md-3 mb-3"> <label for="validationTooltip04">State</label> <select class="custom-select" id="validationTooltip04" required> <option selected disabled value="">Choose...</option> <option>...</option> </select> <div class="invalid-tooltip"> Please select a valid state. </div> </div> <div class="col-md-3 mb-3"> <label for="validationTooltip05">Zip</label> <input type="text" class="form-control" id="validationTooltip05" required> <div class="invalid-tooltip"> Please provide a valid zip. </div> </div> </div> <button class="btn btn-primary" type="submit">Submit form</button> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/db16e0cbc48649258d65e506cbe12d79.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/db16e0cbc48649258d65e506cbe12d79.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第10张图片" width="650" height="129" style="border:1px solid black;"></a> <h3>开关</h3> 开关具有自定义复选框的标记，但是使用<code>.custom-switch</code>该类来呈现切换开关。开关也支持该<code>disabled</code>属性。 <pre><code class="prism language-html"><div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="customSwitch1"> <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label> </div> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" disabled id="customSwitch2"> <label class="custom-control-label" for="customSwitch2">Disabled switch element</label> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/c708e5526b7742bf9925fc9a76f86c71.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/c708e5526b7742bf9925fc9a76f86c71.png" alt="在这里插入图片描述" width="309" height="75"></a> <h3>选择菜单</h3> 自定义<code><select></code>菜单仅需要一个自定义类<code>.custom-select</code>即可触发自定义样式。自定义样式仅限于<code><select></code>的初始外观，<code><option></code>由于浏览器的限制，无法修改。 <pre><code class="prism language-html"><select class="custom-select"> <option selected>打开此选择菜单</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </code></pre> <a href="http://img.e-com-net.com/image/info8/1fb68bee412941a496cb98b2fff2ff7a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1fb68bee412941a496cb98b2fff2ff7a.jpg" alt="在这里插入图片描述" width="650" height="39"></a> 大小 <pre><code class="prism language-html"><select class="custom-select custom-select-lg mb-3"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <select class="custom-select custom-select-sm"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </code></pre> <a href="http://img.e-com-net.com/image/info8/e085d487c90745d8a3416a08958fc57e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e085d487c90745d8a3416a08958fc57e.jpg" alt="在这里插入图片描述" width="650" height="70"></a> multiple还支持该属性： <pre><code class="prism language-html"><select class="custom-select" multiple> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </code></pre> 作为size属性： <pre><code class="prism language-html"><select class="custom-select" size="3"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </code></pre> <h3>范围</h3> 创建自定义<code><input type="range"></code>与控制<code>.custom-range</code>。轨道（背景）和拇指（值）的样式都在浏览器中显示为相同。由于只有<code>IE</code>和<code>Firefox</code>支持从拇指的左侧或右侧“填充”其轨迹，以可视方式指示进度，因此我们目前不支持它。 <h3>文件浏览器</h3> 推荐使用动画制作自定义文件输入的插件：<code>bs-custom-file-input</code> <pre><code class="prism language-html"><div class="custom-file"> <input type="file" class="custom-file-input" id="customFile"> <label class="custom-file-label" for="customFile">选择文件</label> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/384a0064e56045d8b232986cfe8037a5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/384a0064e56045d8b232986cfe8037a5.jpg" alt="在这里插入图片描述" width="650" height="37"></a> <h2>输入组</h2> 通过在文本输入，自定义选择和自定义文件输入的两侧添加文本，按钮或按钮组，可以轻松扩展表单控件。 将一个附加组件或按钮放在输入的两侧。您也可以在输入的两侧放置一个。记住将<code><label></code>放在输入组之外。 <pre><code class="prism language-html"><div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1">@</span> </div> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"> <div class="input-group-append"> <span class="input-group-text" id="basic-addon2">@example.com</span> </div> </div> <label for="basic-url">Your vanity URL</label> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon3">https://example.com/users/</span> </div> <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">$</span> </div> <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> <div class="input-group-append"> <span class="input-group-text">.00</span> </div> </div> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">With textarea</span> </div> <textarea class="form-control" aria-label="With textarea"></textarea> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/3bd7f43afece4c438307064c3403213c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3bd7f43afece4c438307064c3403213c.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第11张图片" width="650" height="181" style="border:1px solid black;"></a> 默认情况下，输入组会通过包装，<code>flex-wrap: wrap</code>以适应输入组中的自定义表单字段验证。您可以使用禁用此功能<code>.flex-nowrap</code>。 <pre><code class="prism language-html"><div class="input-group flex-nowrap"> <div class="input-group-prepend"> <span class="input-group-text" id="addon-wrapping">@</span> </div> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping"> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/a81901f544574d36951e860bcfefb5d9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a81901f544574d36951e860bcfefb5d9.jpg" alt="在这里插入图片描述" width="650" height="40"></a> 大小 <pre><code class="prism language-html"><div class="input-group input-group-sm mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-sm">Small</span> </div> <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-default">Default</span> </div> <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default"> </div> <div class="input-group input-group-lg"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-lg">Large</span> </div> <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg"> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/923fa4180fc0496b986b59a092160f3a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/923fa4180fc0496b986b59a092160f3a.jpg" alt="在这里插入图片描述" width="650" height="100"></a> <h3>复选框和单选框</h3> 将任何复选框或单选选项放在输入组的插件中，而不是文本中。 <pre><code class="prism language-html"><div class="input-group mb-3"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="checkbox" aria-label="Checkbox for following text input"> </div> </div> <input type="text" class="form-control" aria-label="Text input with checkbox"> </div> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="radio" aria-label="Radio button for following text input"> </div> </div> <input type="text" class="form-control" aria-label="Text input with radio button"> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/14a9574c5b5a421caa5a26bb9f6555b6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/14a9574c5b5a421caa5a26bb9f6555b6.jpg" alt="在这里插入图片描述" width="650" height="63"></a> <h3>多个插件</h3> 支持多个加载项，并且可以与复选框和广播输入版本混合使用。 <pre><code class="prism language-html"><div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">$</span> <span class="input-group-text">0.00</span> </div> <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)"> </div> <div class="input-group"> <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)"> <div class="input-group-append"> <span class="input-group-text">$</span> <span class="input-group-text">0.00</span> </div> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/c6a03c7cdc4c4450b794dc21dba6a042.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c6a03c7cdc4c4450b794dc21dba6a042.jpg" alt="在这里插入图片描述" width="650" height="71"></a> <h3>按钮</h3> <pre><code class="prism language-html"><div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button> </div> <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2"> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button> </div> </div> <div class="input-group mb-3"> <div class="input-group-prepend" id="button-addon3"> <button class="btn btn-outline-secondary" type="button">Button</button> <button class="btn btn-outline-secondary" type="button">Button</button> </div> <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons" aria-describedby="button-addon3"> </div> <div class="input-group"> <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4"> <div class="input-group-append" id="button-addon4"> <button class="btn btn-outline-secondary" type="button">Button</button> <button class="btn btn-outline-secondary" type="button">Button</button> </div> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/7e480c933a924229afe3ea0c8443ebef.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7e480c933a924229afe3ea0c8443ebef.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第12张图片" width="650" height="122" style="border:1px solid black;"></a> 带有下拉菜单的按钮 <pre><code class="prism language-html"><div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <input type="text" class="form-control" aria-label="Text input with dropdown button"> </div> <div class="input-group"> <input type="text" class="form-control" aria-label="Text input with dropdown button"> <div class="input-group-append"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/53749dfe869e47c798bac844a5c0012c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/53749dfe869e47c798bac844a5c0012c.jpg" alt="在这里插入图片描述" width="650" height="75"></a> 分段按钮 <pre><code class="prism language-html"><div class="input-group mb-3"> <div class="input-group-prepend"> <button type="button" class="btn btn-outline-secondary">Action</button> <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <input type="text" class="form-control" aria-label="Text input with segmented dropdown button"> </div> <div class="input-group"> <input type="text" class="form-control" aria-label="Text input with segmented dropdown button"> <div class="input-group-append"> <button type="button" class="btn btn-outline-secondary">Action</button> <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/195c136dd92c4815a5a52fa7377e63a1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/195c136dd92c4815a5a52fa7377e63a1.jpg" alt="在这里插入图片描述" width="650" height="65"></a> 自订表格 输入组包括对自定义选择和自定义文件输入的支持。不支持这些浏览器的默认版本。 <pre><code class="prism language-html"><div class="input-group mb-3"> <div class="input-group-prepend"> <label class="input-group-text" for="inputGroupSelect01">Options</label> </div> <select class="custom-select" id="inputGroupSelect01"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div> <div class="input-group mb-3"> <select class="custom-select" id="inputGroupSelect02"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <div class="input-group-append"> <label class="input-group-text" for="inputGroupSelect02">Options</label> </div> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary" type="button">Button</button> </div> <select class="custom-select" id="inputGroupSelect03" aria-label="Example select with button addon"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div> <div class="input-group"> <select class="custom-select" id="inputGroupSelect04" aria-label="Example select with button addon"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button">Button</button> </div> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/ca927e6c3c9f4d9bac429669159c7590.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ca927e6c3c9f4d9bac429669159c7590.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第13张图片" width="650" height="125" style="border:1px solid black;"></a> 自定义文件输入 <pre><code class="prism language-html"><div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroupFileAddon01">Upload</span> </div> <div class="custom-file"> <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01"> <label class="custom-file-label" for="inputGroupFile01">Choose file</label> </div> </div> <div class="input-group mb-3"> <div class="custom-file"> <input type="file" class="custom-file-input" id="inputGroupFile02"> <label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">Choose file</label> </div> <div class="input-group-append"> <span class="input-group-text" id="inputGroupFileAddon02">Upload</span> </div> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button> </div> <div class="custom-file"> <input type="file" class="custom-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03"> <label class="custom-file-label" for="inputGroupFile03">Choose file</label> </div> </div> <div class="input-group"> <div class="custom-file"> <input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04"> <label class="custom-file-label" for="inputGroupFile04">Choose file</label> </div> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button> </div> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/7e0094c522404d9ead4994c99cf5c736.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7e0094c522404d9ead4994c99cf5c736.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第14张图片" width="650" height="128" style="border:1px solid black;"></a> <h2>大屏幕</h2> 轻巧灵活的组件，用于展示英雄单位风格的内容。 <pre><code class="prism language-html"><div class="jumbotron"> <h1 class="display-4">你好，世界！</h1> <p class="lead">这是一个简单的英雄单元，是一个简单的巨无霸风格的组件，可以引起人们对特色内容或信息的更多关注。</p> <hr class="my-4"> <p>它使用实用程序类来进行排版和间距，以在较大的容器内分隔内容。 </p> <a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/7579b92c36b6495980418dbaef6036aa.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7579b92c36b6495980418dbaef6036aa.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第15张图片" width="650" height="217" style="border:1px solid black;"></a> 要使超长距伞成为全角且没有圆角，请添加<code>.jumbotron-fluid</code>修饰符类并在其中添加.container或<code>.container-fluid</code>。 <pre><code class="prism language-html"><div class="jumbotron jumbotron-fluid"> <div class="container"> <h1 class="display-4">Fluid jumbotron</h1> <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p> </div> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/45bd85c1f9dd4c03ba186445860f3e7c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/45bd85c1f9dd4c03ba186445860f3e7c.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第16张图片" width="650" height="150" style="border:1px solid black;"></a> <h2>列表组</h2> 列表组是用于显示一系列内容的灵活而强大的组件。修改并扩展它们以支持其中的几乎所有内容。 <pre><code class="prism language-html"><ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> </code></pre> <a href="http://img.e-com-net.com/image/info8/afd2fb8677c944db99949fca8b9252e6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/afd2fb8677c944db99949fca8b9252e6.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第17张图片" width="455" height="287" style="border:1px solid black;"></a> 添加<code>.active</code>到<code>.list-group-item</code>以指示当前的活动选择。 <pre><code class="prism language-html"><ul class="list-group"> <li class="list-group-item active">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> </code></pre> <a href="http://img.e-com-net.com/image/info8/f24d55e236d043a6861697936d9f0d5e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f24d55e236d043a6861697936d9f0d5e.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第18张图片" width="516" height="268" style="border:1px solid black;"></a> 添加.disabled到<code>.list-group-item</code>使其显示为禁用状态。请注意，带有的某些元素<code>.disabled</code>还需要自定义JavaScript才能完全禁用其点击事件（例如，链接）。 <h3>链接和按钮</h3> 使用<code><a></code>或，通过添加<code><button></code>来创建具有悬浮，禁用和活动状态的可操作列表组项目<code>.list-group-item-action</code>。 <pre><code class="prism language-html"><div class="list-group"> <a href="#" class="list-group-item list-group-item-action active"> Cras justo odio </a> <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a> <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a> <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a> </div> </code></pre> 添加<code>.list-group-flush</code>以删除某些边框和圆角，以在父容器（例如卡片）中边对边呈现列表组项。 <pre><code class="prism language-html"><ul class="list-group list-group-flush"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> </code></pre> <a href="http://img.e-com-net.com/image/info8/16db44ae09a74bca84fd466be1f3a3a3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/16db44ae09a74bca84fd466be1f3a3a3.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第19张图片" width="436" height="243" style="border:1px solid black;"></a> 添加<code>.list-group-horizontal</code>以将所有断点的列表组项目的布局从垂直更改为水平。或者，选择一个响应变体<code>.list-group-horizontal-{sm|md|lg|xl}</code>以使列表组从该断点开始为水平<code>min-width</code>。当前水平列表组不能与刷新列表组结合。 <pre><code class="prism language-html"><ul class="list-group list-group-horizontal"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item"/>Morbi leo risus</li> </ul> </code></pre> <a href="http://img.e-com-net.com/image/info8/64be15f65f3342be8bf0bcd875e78b5f.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/64be15f65f3342be8bf0bcd875e78b5f.png" alt="在这里插入图片描述" width="584" height="87"></a> <pre><code class="prism language-html"><ul class="list-group list-group-horizontal-sm"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> </ul> <ul class="list-group list-group-horizontal-md"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> </ul> <ul class="list-group list-group-horizontal-lg"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> </ul> <ul class="list-group list-group-horizontal-xl"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> </ul> </code></pre> <h3>上下文类</h3> 使用上下文类为具有状态背景和颜色的列表项设置样式。 <pre><code class="prism language-html"><ul class="list-group"> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item list-group-item-primary">A simple primary list group item</li> <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li> <li class="list-group-item list-group-item-success">A simple success list group item</li> <li class="list-group-item list-group-item-danger">A simple danger list group item</li> <li class="list-group-item list-group-item-warning">A simple warning list group item</li> <li class="list-group-item list-group-item-info">A simple info list group item</li> <li class="list-group-item list-group-item-light">A simple light list group item</li> <li class="list-group-item list-group-item-dark">A simple dark list group item</li> </ul> </code></pre> <a href="http://img.e-com-net.com/image/info8/cb65d75635404fd0833c4325c80cb8c9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/cb65d75635404fd0833c4325c80cb8c9.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第20张图片" width="479" height="466" style="border:1px solid black;"></a> <h3>带徽章</h3> 在某些实用程序的帮助下，将标志添加到任何列表组项以显示未读计数，活动等。 <pre><code class="prism language-html"><ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> Cras justo odio <span class="badge badge-primary badge-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Dapibus ac facilisis in <span class="badge badge-primary badge-pill">2</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Morbi leo risus <span class="badge badge-primary badge-pill">1</span> </li> </ul> </code></pre> <a href="http://img.e-com-net.com/image/info8/2e0450321387453594342bdf01365391.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/2e0450321387453594342bdf01365391.png" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第21张图片" width="468" height="170" style="border:1px solid black;"></a> <h3>自订内容</h3> 借助flexbox实用程序，几乎可以在其中添加所有HTML，甚至可以为下面的链接列表组添加HTML 。 <pre><code class="prism language-html"><div class="list-group"> <a href="#" class="list-group-item list-group-item-action active"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5> <small>3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> </a> <a href="#" class="list-group-item list-group-item-action"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5> <small class="text-muted">3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small class="text-muted">Donec id elit non mi porta.</small> </a> <a href="#" class="list-group-item list-group-item-action"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5> <small class="text-muted">3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small class="text-muted">Donec id elit non mi porta.</small> </a> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/9a7df76474e44aee96e250df5a413513.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9a7df76474e44aee96e250df5a413513.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第22张图片" width="530" height="429" style="border:1px solid black;"></a> 使用选项卡JavaScript插件（单独包含它或通过编译的<code>bootstrap.js</code>文件包含它）来扩展列表组，以创建本地内容的可选项窗格。 <pre><code class="prism language-html"><div class="row"> <div class="col-4"> <div class="list-group" id="list-tab" role="tablist"> <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a> <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a> <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a> <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a> </div> </div> <div class="col-8"> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div> <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div> <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div> <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div> </div> </div> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/99e811c306ca4a4792c5239de408436d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/99e811c306ca4a4792c5239de408436d.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第23张图片" width="650" height="127" style="border:1px solid black;"></a> 只需指定<code>data-toggle="list"</code>或在元素上即可激活列表组导航而无需编写任何JavaScript 。在上使用这些数据属性<code>.list-group-item</code>。 <pre><code class="prism language-html"> <div class="list-group" id="myList" role="tablist"> <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a> <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a> <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a> <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a> </div>  <div class="tab-content"> <div class="tab-pane active" id="home" role="tabpanel">...</div> <div class="tab-pane" id="profile" role="tabpanel">...</div> <div class="tab-pane" id="messages" role="tabpanel">...</div> <div class="tab-pane" id="settings" role="tabpanel">...</div> </div> </code></pre> 通过JavaScript启用可选项列表项（每个列表项需要单独激活）： <pre><code class="prism language-html">$('#myList a').on('click', function (e) { e.preventDefault() $(this).tab('show') }) </code></pre> 您可以通过以下几种方式激活单个列表项： <pre><code class="prism language-html">$('#myList a[href="#profile"]').tab('show') // Select tab by name $('#myList a:first-child').tab('show') // Select first tab $('#myList a:last-child').tab('show') // Select last tab $('#myList a:nth-child(3)').tab('show') // Select third tab </code></pre> 淡入淡出效果 要使选项卡面板淡入，请添加<code>.fade</code>到每个<code>.tab-pane</code>。第一个选项卡窗格还必须<code>.show</code>使初始内容可见。 <pre><code class="prism language-html"><div class="tab-content"> <div class="tab-pane fade show active" id="home" role="tabpanel">...</div> <div class="tab-pane fade" id="profile" role="tabpanel">...</div> <div class="tab-pane fade" id="messages" role="tabpanel">...</div> <div class="tab-pane fade" id="settings" role="tabpanel">...</div> </div> </code></pre> <h3>方法</h3> <code>$().tab</code> 激活列表项元素和内容容器。Tab应该在DOM中具有data-target或href定位容器节点。 <pre><code class="prism language-html"><div class="list-group" id="myList" role="tablist"> <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a> <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a> <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a> <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a> </div> <div class="tab-content"> <div class="tab-pane active" id="home" role="tabpanel">...</div> <div class="tab-pane" id="profile" role="tabpanel">...</div> <div class="tab-pane" id="messages" role="tabpanel">...</div> <div class="tab-pane" id="settings" role="tabpanel">...</div> </div> <script> $(function () { $('#myList a:last-child').tab('show') }) </script> </code></pre> <code>.tab(‘show’)</code> 选择给定的列表项并显示其关联的窗格。先前选择的任何其他列表项将变为未选中状态，并且其关联的窗格被隐藏。在实际显示选项卡窗格之前（例如，在<code>shown.bs.tab</code>事件发生之前）返回到调用者。 <pre><code class="prism language-html">$('#someListItem').tab('show') </code></pre> <h3>事记</h3> 显示新标签时，事件将按以下顺序触发： <ol> <li><code>hide.bs.tab</code> （在当前活动标签上）</li> <li><code>show.bs.tab</code>（在待显示的标签上）</li> <li><code>hidden.bs.tab</code>（在上一个活动选项卡上，与活动相同hide.bs.tab）</li> <li><code>shown.bs.tab</code>（在刚刚显示的新活动标签上，该标签与该<code>show.bs.tab</code>活动的标签相同）</li> <li></li> </ol> 如果尚未激活任何选项卡，则不会触发<code>hide.bs.tab</code>和<code>hidden.bs.tab</code>事件。 <pre><code class="prism language-html">$('a[data-toggle="list"]').on('shown.bs.tab', function (e) { e.target // newly activated tab e.relatedTarget // previous active tab }) </code></pre> <a href="http://img.e-com-net.com/image/info8/4db972008b4f472385743304e26243f2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4db972008b4f472385743304e26243f2.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第24张图片" width="650" height="177" style="border:1px solid black;"></a> <h2>媒体对象</h2> Bootstrap媒体对象的文档和示例，用于构建高度重复的组件，例如博客评论，推文等。 <pre><code class="prism language-html"><div class="media"> <img src="..." class="mr-3" alt="..."> <div class="media-body"> <h5 class="mt-0">Media heading</h5> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/5452c8a64a36416b923d753e0f18b69d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5452c8a64a36416b923d753e0f18b69d.jpg" alt="在这里插入图片描述" width="650" height="69"></a> <h3>嵌套</h3> 媒体对象可以无限嵌套，尽管我们建议您在某个时候停止。嵌套<code>.media</code>在<code>.media-body</code>父媒体对象的中。 <pre><code class="prism language-html"><div class="media"> <img src="..." class="mr-3" alt="..."> <div class="media-body"> <h5 class="mt-0">Media heading</h5> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. <div class="media mt-3"> <a class="mr-3" href="#"> <img src="..." class="mr-3" alt="..."> </a> <div class="media-body"> <h5 class="mt-0">Media heading</h5> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> </div> </div> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/0ac8e1c8e34b46d28ed292b34191cb0b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0ac8e1c8e34b46d28ed292b34191cb0b.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第25张图片" width="650" height="110" style="border:1px solid black;"></a> <h3>对齐</h3> 媒体对象中的媒体可以使用Flexbox实用程序对齐到内容的顶部（默认），中间或结尾<code>.media-body</code>。 顶对齐 <pre><code class="prism language-html"><div class="media"> <img src="..." class="align-self-start mr-3" alt="..."> <div class="media-body"> <h5 class="mt-0">Top-aligned media</h5> <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/a085acd688b74ec6b4d3514cb07f83f8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a085acd688b74ec6b4d3514cb07f83f8.jpg" alt="在这里插入图片描述" width="650" height="98"></a> 居中对齐 <pre><code class="prism language-html"><div class="media"> <img src="..." class="align-self-center mr-3" alt="..."> <div class="media-body"> <h5 class="mt-0">Center-aligned media</h5> <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/8088f8dc45e2469ba2b840995d4b86b4.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8088f8dc45e2469ba2b840995d4b86b4.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第26张图片" width="650" height="102" style="border:1px solid black;"></a> 底对齐 <pre><code class="prism language-html"><div class="media"> <img src="..." class="align-self-end mr-3" alt="..."> <div class="media-body"> <h5 class="mt-0">Bottom-aligned media</h5> <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/37ffdea5cc384d76b815ef97464253f3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/37ffdea5cc384d76b815ef97464253f3.jpg" alt="在这里插入图片描述" width="650" height="100"></a> 调整 通过修改HTML本身或添加一些自定义flexbox CSS来设置order属性（更改为您选择的整数），可以更改媒体对象中内容的顺序。 <pre><code class="prism language-html"><div class="media"> <div class="media-body"> <h5 class="mt-0 mb-1">Media object</h5> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> <img src="..." class="ml-3" alt="..."> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/30289500ec0c416fab556e90f665e07e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/30289500ec0c416fab556e90f665e07e.jpg" alt="在这里插入图片描述" width="650" height="52"></a> <h3>媒体列表</h3> 由于媒体对象的结构要求很少，因此您也可以在列表HTML元素上使用这些类。在您<code><ul></code>或者<code><ol></code>，添加<code>.list-unstyled</code>删除任何浏览器的默认列表样式，然后应用<code>.media</code>到你的<code><li></code>秒。与往常一样，在需要微调的地方都使用间距实用程序。 <pre><code class="prism language-html"><ul class="list-unstyled"> <li class="media"> <img src="..." class="mr-3" alt="..."> <div class="media-body"> <h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> </li> <li class="media my-4"> <img src="..." class="mr-3" alt="..."> <div class="media-body"> <h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> </li> <li class="media"> <img src="..." class="mr-3" alt="..."> <div class="media-body"> <h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> </li> </ul> </code></pre> <a href="http://img.e-com-net.com/image/info8/61063edcb89f4452b304a5716ec089c3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/61063edcb89f4452b304a5716ec089c3.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第27张图片" width="650" height="178" style="border:1px solid black;"></a> <h2>模态框</h2> 使用Bootstrap的JavaScript模式插件将对话框添加到您的网站，以获取灯箱，用户通知或完全自定义的内容。 原理: <ul> <li>使用HTML，CSS和JavaScript构建模态。它们位于文档的其他所有内容上，并从中移除滚动，从而使模式内容滚动。</li> <li>单击模式“背景”将自动关闭模式。</li> <li>Bootstrap一次仅支持一个模式窗口。不支持嵌套模式，因为我们认为它们是糟糕的用户体验。</li> <li>模态使用position: fixed，有时可能对其渲染有些特殊。尽可能将模式HTML放在顶级位置，以避免其他元素的潜在干扰。.modal在另一个固定元素中嵌套时，您可能会遇到问题。</li> <li>同样，由于position: fixed，在移动设备上使用模态有一些警告。有关详细信息，请参见我们的浏览器支持文档。</li> <li>由于HTML5如何定义其语义，因此autofocusHTML属性在Bootstrap模态中无效。为了达到相同的效果，请使用一些自定义JavaScript：</li> </ul> <pre><code class="prism language-html">$('#myModal').on('shown.bs.modal', function () { $('#myInput').trigger('focus') }) </code></pre> <h3>模态组件</h3> 下面是一个静态模态示例（表示其<code>position</code>和<code>display</code>已被覆盖）。包括模态页眉，模态主体（必需<code>padding</code>）和模态页脚（可选）。我们要求您在可能的情况下在模式标头中包含<code>dismiss</code>操作，或提供另一个显式的<code>dismiss</code>操作。 <pre><code class="prism language-html"><div class="modal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/b1ef8194697d4b948c14831e82550f9d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b1ef8194697d4b948c14831e82550f9d.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第28张图片" width="618" height="236" style="border:1px solid black;"></a> <pre><code class="prism language-html"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button>  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/1427234d3e544488b4a9679fc35328ad.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1427234d3e544488b4a9679fc35328ad.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第29张图片" width="517" height="211" style="border:1px solid black;"></a> 当背景设置为静态时，在其外部单击时，模式不会关闭。单击下面的按钮尝试。 <pre><code class="prism language-html"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop"> Launch static backdrop modal </button>  <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Understood</button> </div> </div> </div> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/4e6ca013ff6b4359b343dd3aecdba036.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4e6ca013ff6b4359b343dd3aecdba036.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第30张图片" width="523" height="241" style="border:1px solid black;"></a> <h3>滚动长内容</h3> 可以创建一个可滚动的模式，允许通过添加滚动模式的身体<code>.modal-dialog-scrollable</code>到<code>.modal-dialog</code> <pre><code class="prism language-html"> <div class="modal-dialog modal-dialog-scrollable"> ... </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/930a628ccf9549cb8e324b2960dc6845.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/930a628ccf9549cb8e324b2960dc6845.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第31张图片" width="501" height="836" style="border:1px solid black;"></a> 垂直居中 将模态添加<code>.modal-dialog-centered</code>到<code>.modal-dialog</code>垂直居中。 <pre><code class="prism language-html"> <div class="modal-dialog modal-dialog-centered"> ... </div>  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> ... </div> </code></pre> <h3>工具提示和弹出窗口</h3> 可以根据需要将工具提示和弹出窗口放置在模态中。关闭模态后，其中的所有工具提示和弹出窗口也将自动关闭。 <pre><code class="prism language-html"><div class="modal-body"> <h5>Popover in a modal</h5> <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p> <hr> <h5>Tooltips in a modal</h5> <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/efc1fd708b164487b1ede43fa451ee99.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/efc1fd708b164487b1ede43fa451ee99.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第32张图片" width="502" height="348" style="border:1px solid black;"></a> <h3>使用网格</h3> 通过嵌套<code>.container-fluid</code>在模态中利用Bootstrap网格系统<code>.modal-body</code>。然后，像在其他任何地方一样使用普通的网格系统类。 <pre><code class="prism language-html"><div class="modal-body"> <div class="container-fluid"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div> </div> <div class="row"> <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div> <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div> </div> <div class="row"> <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div> </div> <div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-8 col-sm-6"> Level 2: .col-8 .col-sm-6 </div> <div class="col-4 col-sm-6"> Level 2: .col-4 .col-sm-6 </div> </div> </div> </div> </div> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/eade49d969ed4babb5a64cc3d8e5f2e9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/eade49d969ed4babb5a64cc3d8e5f2e9.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第33张图片" width="508" height="590" style="border:1px solid black;"></a> <h3>各种模态内容</h3> 是否有一堆按钮都以相同的内容触发相同的模式？使用<code>event.relatedTarget</code>和<code>HTML data-*</code>属性（可能通过jQuery）根据所单击的按钮来更改模式的内容。 <pre><code class="prism language-html"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">New message</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="recipient-name" class="col-form-label">Recipient:</label> <input type="text" class="form-control" id="recipient-name"> </div> <div class="form-group"> <label for="message-text" class="col-form-label">Message:</label> <textarea class="form-control" id="message-text"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Send message</button> </div> </div> </div> </div> </code></pre> <pre><code class="prism language-html">$('#exampleModal').on('show.bs.modal', function (event) { var button = $(event.relatedTarget) // Button that triggered the modal var recipient = button.data('whatever') // Extract info from data-* attributes // If necessary, you could initiate an AJAX request here (and then do the updating in a callback). // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. var modal = $(this) modal.find('.modal-title').text('New message to ' + recipient) modal.find('.modal-body input').val(recipient) }) </code></pre> <a href="http://img.e-com-net.com/image/info8/01079e3b38b34ca59c63d04a0eeb67a2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/01079e3b38b34ca59c63d04a0eeb67a2.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第34张图片" width="506" height="385" style="border:1px solid black;"></a> <ul> <li> 变更动画 该<code>$modal-fade-transform</code>变量确定<code>.modal-dialog</code>模态淡入动画之前的变换状态，该<code>$modal-show-transform</code>变量确定<code>.modal-dialog</code>模态淡入动画结束时的变换。 例如，如果要放大动画，可以设置<code>$modal-fade-transform: scale(.8)</code>。 </li> <li> 删除动画 对于仅显示而不是淡入显示的模态，请<code>.fade</code>从模态标记中删除该类。 </li> </ul> <pre><code class="prism language-html"><div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true"> ... </div> </code></pre> <h3>可选尺寸</h3> 模态具有三种可选尺寸，可通过放置在上的修饰符类获得<code>.modal-dialog</code>。这些大小会在某些断点处插入，以避免在较窄的视口上出现水平滚动条。 <a href="http://img.e-com-net.com/image/info8/4aaa2a306c4f4b28900a97972805c333.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4aaa2a306c4f4b28900a97972805c333.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第35张图片" width="650" height="144" style="border:1px solid black;"></a> <pre><code class="prism language-html"><div class="modal-dialog modal-xl">...</div> <div class="modal-dialog modal-lg">...</div> <div class="modal-dialog modal-sm">...</div> </code></pre> <h3>方法</h3> <ul> <li><code>.modal(options)</code> 将您的内容激活为模式。接受可选选项object。</li> </ul> <pre><code class="prism language-html">$('#myModal').modal({ keyboard: false }) </code></pre> <ul> <li><code>.modal('toggle')</code> 手动切换模态。在实际显示或隐藏模式之前（即在shown.bs.modalor hidden.bs.modal事件发生之前）返回调用方。</li> </ul> <pre><code class="prism language-html">$('#myModal').modal('toggle') </code></pre> <ul> <li><code>.modal('show')</code> 手动打开模式。在实际显示模式之前（即shown.bs.modal事件发生之前）返回调用方。</li> </ul> <pre><code class="prism language-html">$('#myModal').modal('show') </code></pre> <ul> <li><code>.modal('hide')</code> 手动隐藏模式。在实际隐藏模式之前（即hidden.bs.modal事件发生之前）返回调用方。</li> </ul> <pre><code class="prism language-html">$('#myModal').modal('hide') </code></pre> <ul> <li><code>.modal('handleUpdate')</code> 如果模态的高度在打开时发生变化，则手动重新调整模态的位置（即，如果出现滚动条）。</li> </ul> <pre><code class="prism language-html">$('#myModal').modal('handleUpdate') </code></pre> <ul> <li><code>.modal('dispose')</code> 销毁元素的模态。</li> </ul> <h2>导航</h2> 基础导航 Bootstrap中可用的导航共享从基<code>.nav</code>类到活动和禁用状态的常规标记和样式。交换修饰符类可在每种样式之间切换。 <pre><code class="prism language-html"><ul class="nav"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> <nav class="nav"> <a class="nav-link active" href="#">Active</a> <a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </nav> </code></pre> <a href="http://img.e-com-net.com/image/info8/29a63aa526744e1a873de8c442bc256c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/29a63aa526744e1a873de8c442bc256c.jpg" alt="在这里插入图片描述" width="650" height="74"></a> <h3>水平对齐</h3> 使用flexbox实用程序更改导航的水平对齐方式。默认情况下，导航是左对齐的，但是您可以轻松地将它们更改为居中或右对齐。 <ul> <li>居中<code>.justify-content-center</code>：</li> </ul> <pre><code class="prism language-html"><ul class="nav justify-content-center"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </code></pre> <a href="http://img.e-com-net.com/image/info8/90937b650d3a440e9dd345949c0e092d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/90937b650d3a440e9dd345949c0e092d.jpg" alt="在这里插入图片描述" width="650" height="47"></a> <ul> <li>右对齐<code>.justify-content-end</code>：</li> </ul> <pre><code class="prism language-html"><ul class="nav justify-content-end"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </code></pre> <a href="http://img.e-com-net.com/image/info8/263571cd0fef458295e666b31c26dbe5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/263571cd0fef458295e666b31c26dbe5.jpg" alt="在这里插入图片描述" width="650" height="35"></a> <h3>垂直</h3> 通过使用<code>.flex-column</code>实用程序更改弹性项目方向来堆叠导航。 <pre><code class="prism language-html"><ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </code></pre> <a href="http://img.e-com-net.com/image/info8/306299d59d324308902ef528aa2ed187.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/306299d59d324308902ef528aa2ed187.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第36张图片" width="293" height="201" style="border:1px solid black;"></a> 与往常一样，也可以不使用<code><ul></code>进行垂直导航。 <pre><code class="prism language-html"><nav class="nav flex-column"> <a class="nav-link active" href="#">Active</a> <a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </nav> </code></pre> <h3>标签</h3> 从上面获取基本导航，并添加<code>.nav-tabs</code>类以生成选项卡式界面。使用它们通过我们的标签JavaScript插件创建可标签区域。 <pre><code class="prism language-html"><ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </code></pre> <a href="http://img.e-com-net.com/image/info8/ca84a8fa0b404883a3a4160bf6fb441b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ca84a8fa0b404883a3a4160bf6fb441b.jpg" alt="在这里插入图片描述" width="650" height="44"></a> 胶囊 使用相同的HTML，<code>.nav-tabs</code>改为<code>.nav-pills</code>使用： <pre><code class="prism language-html"><ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </code></pre> <a href="http://img.e-com-net.com/image/info8/b520b254198849c6ba494e7b6c10dbcb.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/b520b254198849c6ba494e7b6c10dbcb.png" alt="在这里插入图片描述" width="378" height="74"></a> <h3>填写并证明</h3> 强制您<code>.nav</code>的内容扩展两个修饰符类之一的全部可用宽度。要用<code>.nav-items</code>按比例填充所有可用空间，请使用<code>.nav-fill</code>。请注意，所有水平空间都被占用，但并非每个导航项都具有相同的宽度。 <pre><code class="prism language-html"><ul class="nav nav-pills nav-fill"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Much longer nav link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </code></pre> <a href="http://img.e-com-net.com/image/info8/b91de6e99baa402cbe8998c424e680b5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b91de6e99baa402cbe8998c424e680b5.jpg" alt="在这里插入图片描述" width="650" height="42"></a> 使用<code><nav></code>基于导航的导航时，可以安全地省略<code>.nav-item</code>，仅对<code>.nav-link</code>样式<code><a></code>元素进行必要。 <pre><code class="prism language-html"><nav class="nav nav-pills nav-fill"> <a class="nav-link active" href="#">Active</a> <a class="nav-link" href="#">Much longer nav link</a> <a class="nav-link" href="#">Link</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </nav> </code></pre> <h3>使用下拉菜单</h3> 添加带有一些额外HTML和下拉JavaScript插件的下拉菜单。 <pre><code class="prism language-html"><ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> //胶囊下拉菜单 <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </code></pre> <a href="http://img.e-com-net.com/image/info8/d51e0007880e4801b2fc0682f2d4c43b.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/d51e0007880e4801b2fc0682f2d4c43b.png" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第37张图片" width="489" height="104" style="border:1px solid black;"></a> <pre><code class="prism language-html"><ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/fd20e7d3d89e47d3bd9a2ac011c779af.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fd20e7d3d89e47d3bd9a2ac011c779af.jpg" alt="在这里插入图片描述" width="650" height="97"></a> <pre><code class="prism language-html"><nav> <div class="nav nav-tabs" id="nav-tab" role="tablist"> <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> </div> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div> <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/bc76effe999847adacbd37db7e061e11.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/bc76effe999847adacbd37db7e061e11.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第38张图片" width="650" height="102" style="border:1px solid black;"></a> <pre><code class="prism language-html"><ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/383edf931dd34b938353d8ecdd07668a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/383edf931dd34b938353d8ecdd07668a.jpg" alt="在这里插入图片描述" width="650" height="90"></a> <pre><code class="prism language-html"><div class="row"> <div class="col-3"> <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"> <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a> <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a> <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a> <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a> </div> </div> <div class="col-9"> <div class="tab-content" id="v-pills-tabContent"> <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div> <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div> <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div> <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div> </div> </div> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/0ced22412b5949b8b1079e6d38336f4c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0ced22412b5949b8b1079e6d38336f4c.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第39张图片" width="650" height="109" style="border:1px solid black;"></a> <h2>导航栏</h2> Bootstrap强大的响应式导航标题导航栏的文档和示例。包括对品牌，导航等的支持，包括对我们的合拢插件的支持。 <h3>了解：</h3> <ul> <li>导航栏需要包装<code>.navbar</code>以<code>.navbar-expand{-sm|-md|-lg|-xl}</code>用于响应式折叠和配色方案类。</li> <li>导航栏及其内容默认情况下是流畅的。使用可选容器限制其水平宽度。</li> <li>使用我们的间隔和柔性的实用工具类，用于控制导航栏内间隔和对齐。</li> <li>导航栏默认情况下是响应式的，但是您可以轻松地对其进行修改以进行更改。</li> <li>打印时，导航栏默认为隐藏。迫使他们通过添加打印<code>.d-print</code>到<code>.navbar</code>。</li> <li>通过使用<code><nav></code>元素来确保可访问性，或者如果使用更通用的元素（例如使用）来确保可访问性，则在每个导航栏上<code><div></code>添加一个，<code>role="navigation"</code>以将其明确标识为辅助技术用户的界标区域。</li> </ul> <h3>支持内容:</h3> Navbars内置了对少数子组件的支持。根据需要从以下选项中进行选择： <ul> <li><code>.navbar-brand</code> 您公司，产品或项目的名称。</li> <li><code>.navbar-nav</code> 全高和轻量级导航（包括对下拉菜单的支持）。</li> <li><code>.navbar-toggler</code>与我们的崩溃插件和其他导航切换行为配合使用。</li> <li><code>.form-inline</code>用于任何形式的控件和动作。</li> <li><code>.navbar-text</code>用于添加垂直居中的文本字符串。 -<code>.collapse.navbar-collapse</code> 用于通过父断点分组和隐藏导航栏内容。</li> </ul> 响应式轻型导航栏中包含的所有子组件的示例，该导航栏在<code>lg</code>（大）断点处自动折叠: <pre><code class="prism language-html"><nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> </code></pre> <a href="http://img.e-com-net.com/image/info8/b4c9a6f6afda45d4b010506678665cff.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b4c9a6f6afda45d4b010506678665cff.jpg" alt="在这里插入图片描述" width="650" height="43"></a> <h3>品牌</h3> 该<code>.navbar-brand</code>可应用于大部分元素，但是锚效果最好的一些元素可能需要的工具类或自定义样式。 <pre><code class="prism language-html"> <nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> </nav>  <nav class="navbar navbar-light bg-light"> <span class="navbar-brand mb-0 h1">Navbar</span> </nav> </code></pre> <a href="http://img.e-com-net.com/image/info8/25d5def8e136415fbd646e3bc674b5c2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/25d5def8e136415fbd646e3bc674b5c2.jpg" alt="在这里插入图片描述" width="650" height="81"></a> <pre><code class="prism language-html"> <nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#"> <img src="/docs/4.5/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="" loading="lazy"> </a> </nav> </code></pre> <a href="http://img.e-com-net.com/image/info8/68fe88e261f8464082e5e1828472909e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/68fe88e261f8464082e5e1828472909e.jpg" alt="在这里插入图片描述" width="650" height="45"></a> <pre><code class="prism language-html"> <nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#"> <img src="/docs/4.5/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="" loading="lazy"> Bootstrap </a> </nav> </code></pre> <a href="http://img.e-com-net.com/image/info8/61ec194586a841e385558bfb34192a62.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/61ec194586a841e385558bfb34192a62.jpg" alt="在这里插入图片描述" width="650" height="49"></a> <h3>导航</h3> <code>Navbar</code>导航链接以<code>.nav</code>自己的选项为基础，带有自己的修改器类，并且需要使用切换器类来进行适当的响应式样式。 活动状态-带有<code>.active-</code>表示当前页面可以直接应用于<code>.nav-links</code>或它们的直接父级<code>.nav-items</code>。 <pre><code class="prism language-html"><nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </div> </nav> </code></pre> <a href="http://img.e-com-net.com/image/info8/4e552fe785c6405b930fb61441a3d50d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4e552fe785c6405b930fb61441a3d50d.jpg" alt="在这里插入图片描述" width="650" height="41"></a> 可以根据需要完全避免基于列表的方法: <pre><code class="prism language-html"><nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Features</a> <a class="nav-link" href="#">Pricing</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </div> </div> </nav> </code></pre> <a href="http://img.e-com-net.com/image/info8/2a5daaf7b87b47bbab4ed7acee03a644.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2a5daaf7b87b47bbab4ed7acee03a644.jpg" alt="在这里插入图片描述" width="650" height="38"></a> <h3>嵌套下拉菜单</h3> 可以在导航栏导航中使用下拉菜单。下拉菜单需要用于定位的缠绕元件，所以一定要使用单独的和嵌套的元素<code>.nav-item</code>和<code>.nav-link</code>，如下所示。 <pre><code class="prism language-html"><nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> </nav> </code></pre> <a href="http://img.e-com-net.com/image/info8/7ef296d28a67444c9053f45920bf39f5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7ef296d28a67444c9053f45920bf39f5.jpg" alt="在这里插入图片描述" width="650" height="59"></a> <h3>表单</h3> 使用将各种表单控件和组件放置在导航栏中<code>.form-inline</code>。 <pre><code class="prism language-html"><nav class="navbar navbar-light bg-light"> <form class="form-inline"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </nav> </code></pre> <a href="http://img.e-com-net.com/image/info8/ce5e5dc3ebde4306ada4a41e15d11a6b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ce5e5dc3ebde4306ada4a41e15d11a6b.jpg" alt="在这里插入图片描述" width="650" height="44"></a> 直接子元素在<code>.navbar</code>使用<code>flex</code>布局，并且默认为<code>justify-content: space-between</code>。根据需要使用其他Flex实用程序来调整此行为。 <pre><code class="prism language-html"><nav class="navbar navbar-light bg-light"> <a class="navbar-brand">Navbar</a> <form class="form-inline"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </nav> </code></pre> <a href="http://img.e-com-net.com/image/info8/baa406f8e9be4fcc859b599463c1f7c4.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/baa406f8e9be4fcc859b599463c1f7c4.jpg" alt="在这里插入图片描述" width="650" height="42"></a> <h3>输入组</h3> <pre><code class="prism language-html"><nav class="navbar navbar-light bg-light"> <form class="form-inline"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1">@</span> </div> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"> </div> </form> </nav> </code></pre> <a href="http://img.e-com-net.com/image/info8/b6c33479fa964438a4d37832849c20e6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b6c33479fa964438a4d37832849c20e6.jpg" alt="在这里插入图片描述" width="650" height="47"></a> 这些导航栏形式也支持各种按钮。这也非常提醒我们可以使用垂直对齐工具来对齐不同大小的元素。 <pre><code class="prism language-html"><nav class="navbar navbar-light bg-light"> <form class="form-inline"> <button class="btn btn-outline-success" type="button">Main button</button> <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button> </form> </nav> </code></pre> <a href="http://img.e-com-net.com/image/info8/f85d541eff8c46b492213e12fcdf8bf9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f85d541eff8c46b492213e12fcdf8bf9.jpg" alt="在这里插入图片描述" width="650" height="39"></a> <h3>文本</h3> 导航栏可能在的帮助下包含一些文本<code>.navbar-text</code>。此类调整文本字符串的垂直对齐和水平间距。 <pre><code class="prism language-html"><nav class="navbar navbar-light bg-light"> <span class="navbar-text"> 带有内联元素的导航栏文本 </span> </nav> </code></pre> <a href="http://img.e-com-net.com/image/info8/d35f052b4840445b869ae64e06e432ab.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d35f052b4840445b869ae64e06e432ab.jpg" alt="在这里插入图片描述" width="650" height="43"></a> 根据需要与其他组件和实用程序混合并匹配: <pre><code class="prism language-html"><nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar w/ text</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarText"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> </ul> <span class="navbar-text"> Navbar text with an inline element </span> </div> </nav> </code></pre> <a href="http://img.e-com-net.com/image/info8/21d6e89bd89d4fbe9caffb8fea293278.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/21d6e89bd89d4fbe9caffb8fea293278.jpg" alt="在这里插入图片描述" width="650" height="45"></a> <h3>导航背景颜色</h3> 配色方案 选择<code>.navbar-light``用于浅色背景颜色或.navbar-dark</code>深色背景颜色。然后，使用<code>.bg-*</code>实用程序进行自定义。 <pre><code class="prism language-html"><nav class="navbar navbar-dark bg-dark">  </nav> <nav class="navbar navbar-dark bg-primary">  </nav> <nav class="navbar navbar-light" style="background-color: #e3f2fd;">  </nav> </code></pre> <a href="http://img.e-com-net.com/image/info8/d4f2d6b198a94d07878789ac0b0f3414.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d4f2d6b198a94d07878789ac0b0f3414.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第40张图片" width="650" height="133" style="border:1px solid black;"></a> <h3>导航栏布局</h3> 可以将导航栏包裹在<code>.container</code>中间，以使其在页面上居中，也可以在其中添加一个导航栏，仅将固定或静态顶部导航栏的内容居中。 <pre><code class="prism language-html"><div class="container"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> </nav> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/e7ebd4d2a606445a9be9ec4e4ccdb593.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e7ebd4d2a606445a9be9ec4e4ccdb593.jpg" alt="在这里插入图片描述" width="650" height="53"></a> 当容器在导航栏中时，在低于指定<code>.navbar-expand{-sm|-md|-lg|-xl}</code>类的断点处删除其水平填充。这样可以确保在导航栏合拢时，我们不会在不必要的情况下在较低视口上加倍填充。 <pre><code class="prism language-html"><nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <a class="navbar-brand" href="#">Navbar</a> </div> </nav> </code></pre> <a href="http://img.e-com-net.com/image/info8/f959e1b6d44244b69fb3022c43cbe103.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f959e1b6d44244b69fb3022c43cbe103.jpg" alt="在这里插入图片描述" width="650" height="46"></a> <h3>位置</h3> 从固定到顶部，固定到底部或固定在顶部进行选择（滚动页面直到到达顶部，然后停留在顶部）。固定的导航栏使用position:<code>fixed</code>，这意味着它们是从DOM的正常流程中拉出的，并且可能需要自定义CSS（例如<code>padding-top</code>在上<code><body></code>），以防止与其他元素重叠。 另请注意<code>.sticky-top</code>用途<code>position: sticky</code>，并非所有浏览器都完全支持。 默认: <pre><code class="prism language-html"><nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#">Default</a> </nav> </code></pre> <a href="http://img.e-com-net.com/image/info8/a110490c41a442f2bf8e2b720475541e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a110490c41a442f2bf8e2b720475541e.jpg" alt="在这里插入图片描述" width="650" height="43"></a> 固定在顶部: <pre><code class="prism language-html"><nav class="navbar fixed-top navbar-light bg-light"> <a class="navbar-brand" href="#">Fixed top</a> </nav> </code></pre> <a href="http://img.e-com-net.com/image/info8/1563f7449f5046a0842198bddc898b1f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1563f7449f5046a0842198bddc898b1f.jpg" alt="在这里插入图片描述" width="650" height="38"></a> 固定在底部: <pre><code class="prism language-html"><nav class="navbar fixed-bottom navbar-light bg-light"> <a class="navbar-brand" href="#">Fixed bottom</a> </nav> </code></pre> <a href="http://img.e-com-net.com/image/info8/241a8edfe15e49fa9cd1ce0a3e484108.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/241a8edfe15e49fa9cd1ce0a3e484108.jpg" alt="在这里插入图片描述" width="650" height="35"></a> 粘在顶部: <pre><code class="prism language-html"><nav class="navbar sticky-top navbar-light bg-light"> <a class="navbar-brand" href="#">Sticky top</a> </nav> </code></pre> <a href="http://img.e-com-net.com/image/info8/617022033cb24ac6822e496766d31b9b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/617022033cb24ac6822e496766d31b9b.jpg" alt="在这里插入图片描述" width="650" height="38"></a> <h3>响应</h3> 导航栏可以利用<code>.navbar-toggler</code>，<code>.navbar-collapse</code>和<code>.navbar-expand{-sm|-md|-lg|-xl}</code>类在内容折叠到按钮后时进行更改。与其他实用程序结合使用，您可以轻松选择何时显示或隐藏特定元素。 对于永不崩溃<code>.navbar-expand的导航栏</code>，请在导航栏上添加类。对于始终折叠的导航栏，请勿添加任何<code>.navbar-expand</code>类。 <h3>切换器</h3> 导航栏切换器默认情况下是<code>左对齐</code>的，但是如果它们跟随诸如的兄弟元素<code>.navbar-brand</code>，它们将自动对齐到最右端。反转标记将反转切换器的位置。以下是不同切换样式的示例。 <code>.navbar-brand</code>最低断点处没有显示： <pre><code class="prism language-html"><nav class="navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <a class="navbar-brand" href="#">Hidden brand</a> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> </code></pre> <a href="http://img.e-com-net.com/image/info8/1ebaeb793c8d4fe19742d8fa28a5cf06.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1ebaeb793c8d4fe19742d8fa28a5cf06.jpg" alt="在这里插入图片描述" width="650" height="44"></a> 左侧显示品牌名称，右侧显示切换器： <pre><code class="prism language-html"><nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> </code></pre> <a href="http://img.e-com-net.com/image/info8/c642982536124b04a90dde26ad9d472c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c642982536124b04a90dde26ad9d472c.jpg" alt="在这里插入图片描述" width="650" height="46"></a> 左侧带有切换开关，右侧带有品牌名称： <pre><code class="prism language-html"><nav class="navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarTogglerDemo03"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> </code></pre> <a href="http://img.e-com-net.com/image/info8/1c190d164ed842f9a04800ddf4d79a01.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1c190d164ed842f9a04800ddf4d79a01.jpg" alt="在这里插入图片描述" width="650" height="50"></a> <h3>折叠内容</h3> 有时，您想使用折叠插件来触发页面其他位置的隐藏内容。由于我们的插件适用于<code>id</code>和<code>data-target</code>，因此很容易做到！ <pre><code class="prism language-html"><div class="fixed-top"> <div class="collapse" id="navbarToggleExternalContent"> <div class="bg-dark p-4"> <h5 class="text-white h4">Collapsed content</h5> <span class="text-muted">Toggleable via the navbar brand.</span> </div> </div> <nav class="navbar navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </nav> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/f69b1653d5cb4031bf50672157e59e5c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f69b1653d5cb4031bf50672157e59e5c.jpg" alt="在这里插入图片描述" width="650" height="44"></a> <a href="http://img.e-com-net.com/image/info8/a377f0f46cfc423589102b94041b9230.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a377f0f46cfc423589102b94041b9230.jpg" alt="Bootstrap4官方文档 | v4核心 -- 组件(二)_第41张图片" width="650" height="101" style="border:1px solid black;"></a> <h2>分页</h2> 用于显示分页以指示一系列相关内容的文档和示例跨越多个页面存在。 网页可能有不止一个这样的导航部分，它的最好提供一个描述性<code>aria-label</code>的<code><nav></code>，以反映其目的。例如，如果使用分页组件在一组搜索结果之间导航，则适当的标签可以为<code>aria-label="Search results pages"</code>。 <pre><code class="prism language-html"><nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </nav> </code></pre> <a href="http://img.e-com-net.com/image/info8/76582e6511b444988f8ea20e0cef3ba1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/76582e6511b444988f8ea20e0cef3ba1.jpg" alt="在这里插入图片描述" width="650" height="43"></a> <h3>使用图标</h3> 通过<code>aria</code>属性在某些分页链接中使用图标或符号代替文本 <pre><code class="prism language-html"><nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«</span</code></pre> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1295665974883721216"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(bootstrap,前端)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> igotyback <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> STU学生网页设计 <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835497792265613312.htm" title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a> 加密社 <a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a> <div>加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835448238103162880.htm" title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a> 苹果酱0567 <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一</div> </li> <li><a href="/article/1835437775344726016.htm" title="博客网站制作教程" target="_blank">博客网站制作教程</a> 2401_85194651 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div> </li> <li><a href="/article/1835428317084348416.htm" title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</a> 全能全知者 <a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl</div> </li> <li><a href="/article/1835427057752961024.htm" title="补充元象二面" target="_blank">补充元象二面</a> Redstone Monstrosity <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重</div> </li> <li><a href="/article/1835420753252675584.htm" title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a> jun778895 <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂</div> </li> <li><a href="/article/1835411044768509952.htm" title="字节二面" target="_blank">字节二面</a> Redstone Monstrosity <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div> </li> <li><a href="/article/1835398064727224320.htm" title="前端代码上传文件" target="_blank">前端代码上传文件</a> 余生逆风飞翔 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div> </li> <li><a href="/article/1835385458356482048.htm" title="uniapp实现动态标记效果详细步骤【前端开发】" target="_blank">uniapp实现动态标记效果详细步骤【前端开发】</a> 2401_85123349 <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。</div> </li> <li><a href="/article/1835373236217540608.htm" title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a> 马小蜗 <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能</div> </li> <li><a href="/article/1835368019430305792.htm" title="Vue + Express实现一个表单提交" target="_blank">Vue + Express实现一个表单提交</a> 九旬大爷的梦 <div>最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo</div> </li> <li><a href="/article/1835354447627251712.htm" title="前端知识点" target="_blank">前端知识点</a> ZhangTao_zata <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage</div> </li> <li><a href="/article/1835352325032603648.htm" title="第三十一节:Vue路由:前端路由vs后端路由的了解" target="_blank">第三十一节:Vue路由:前端路由vs后端路由的了解</a> 曹老师 <div>1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访</div> </li> <li><a href="/article/1835350917352878080.htm" title="华雁智科前端面试题" target="_blank">华雁智科前端面试题</a> 因为奋斗超太帅啦 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AF%95%E9%9D%A2%E8%AF%95%E9%97%AE%E9%A2%98%E6%95%B4%E7%90%86/1.htm">前端笔试面试问题整理</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l</div> </li> <li><a href="/article/1835350535818014720.htm" title="如何建设数据中台（五）——数据汇集—打破企业数据孤岛" target="_blank">如何建设数据中台（五）——数据汇集—打破企业数据孤岛</a> weixin_47088026 <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95%E5%92%8C%E6%80%BB%E7%BB%93/1.htm">学习记录和总结</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E5%8F%B0/1.htm">中台</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%8F%B0/1.htm">数据中台</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi</div> </li> <li><a href="/article/1835343473629294592.htm" title="分布式锁和spring事务管理" target="_blank">分布式锁和spring事务管理</a> 暴躁的鱼 <a class="tag" taget="_blank" href="/search/%E9%94%81%E5%8F%8A%E4%BA%8B%E5%8A%A1/1.htm">锁及事务</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据</div> </li> <li><a href="/article/1835340577596600320.htm" title="前端CSS面试常见题" target="_blank">前端CSS面试常见题</a> 剑亦未配妥 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子</div> </li> <li><a href="/article/1835331376895848448.htm" title="【JS】前端文件读取FileReader操作总结" target="_blank">【JS】前端文件读取FileReader操作总结</a> 程序员-张师傅 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi</div> </li> <li><a href="/article/1835331375377510400.htm" title="【前端】vue 报错:The template root requires exactly one element" target="_blank">【前端】vue 报错:The template root requires exactly one element</a> 程序员-张师傅 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行</div> </li> <li><a href="/article/1835302949362954240.htm" title="从单体到微服务：FastAPI ‘挂载’子应用程序的转变" target="_blank">从单体到微服务：FastAPI ‘挂载’子应用程序的转变</a> 黑金IT <a class="tag" taget="_blank" href="/search/fastapi/1.htm">fastapi</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E6%9C%8D%E5%8A%A1/1.htm">微服务</a><a class="tag" taget="_blank" href="/search/fastapi/1.htm">fastapi</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>在现代Web应用开发中，模块化架构是一种常见的设计模式，它有助于将大型应用程序分解为更小、更易于管理的部分。FastAPI，作为一个高性能的PythonWeb框架，提供了强大的支持来实现这种模块化设计。通过“挂载”子应用程序，我们可以为不同的功能区域（如前端接口、管理员接口和用户中心）创建独立的应用程序，并将它们整合到一个主应用程序中。本文将详细介绍如何在FastAPI中使用“挂载”子应用程序的方</div> </li> <li><a href="/article/1835296397365178368.htm" title="创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几" target="_blank">创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几</a> uthRaman <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=</div> </li> <li><a href="/article/1835293121953492992.htm" title="了解 UNPKG：前端开发者的包管理利器" target="_blank">了解 UNPKG：前端开发者的包管理利器</a> 小于负无穷 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n</div> </li> <li><a href="/article/1835291483406692352.htm" title="前端three.js的Sprite模拟下雪动画效果" target="_blank">前端three.js的Sprite模拟下雪动画效果</a> qq_35430208 <a class="tag" taget="_blank" href="/search/three.js/1.htm">three.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E4%B8%89%E7%BB%B4%E5%9C%BA%E6%99%AF%E4%B8%AD%E4%B8%8B%E9%9B%AA%E6%95%88%E6%9E%9C/1.htm">三维场景中下雪效果</a><a class="tag" taget="_blank" href="/search/threejs%E5%AE%9E%E7%8E%B0%E4%B8%8B%E9%9B%AA%E6%95%88%E6%9E%9C/1.htm">threejs实现下雪效果</a> <div>一、效果如图所示：二、原理同下雨一样三、完整代码：index.jsimport*asTHREEfrom'three';import{OrbitControls}from'three/addons/controls/OrbitControls.js';importmodelfrom'./model.js';//模型对象//场景constscene=newTHREE.Scene();scene.add</div> </li> <li><a href="/article/1835243206963458048.htm" title="系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机" target="_blank">系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机</a> rabbit_it <a class="tag" taget="_blank" href="/search/qiankun%E5%AD%A6%E4%B9%A0/1.htm">qiankun学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E4%BA%91/1.htm">阿里云</a> <div>一、引言：为何需要动态加载在现代前端开发中，性能优化始终是一个关键问题。对于微前端架构而言，管理多个子应用带来了前所未有的灵活性，但也对资源的加载和使用效率提出了更高要求。假设你的微前端项目就像一场电影，而子应用是场景或演员。在不同的情节中，我们只需要特定的场景和演员出现，而不需要所有场景和演员一开始就站在舞台上等待。这时，动态加载和按需加载就成为了关键工具——让需要的内容在正确的时机上场，节省性</div> </li> <li><a href="/article/1835239047803531264.htm" title="ODOO不同版本与平台选择" target="_blank">ODOO不同版本与平台选择</a> chouchengyin2080 <a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">操作系统</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>1.10.0vs11.0vs8.0截至2017年底，最新的ODOO发布版为ODOO11.0，但功能上有一定精简（去除财务模块，去除工作流支持），技术上变动较大（代码逐步迁移至Python3，前端框架改写得抽象）。所以如果是从生产使用的角度来讲，ODOO10.0是当前最好选择，因为其更稳定，第三方模块也更多更全面。而如果是ODOO技术爱好从业者，则逐步迁移至ODOO11.0也有必要，因为其底层技术架</div> </li> <li><a href="/article/1835221149026447360.htm" title="Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数" target="_blank">Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数</a> qcidyu <a class="tag" taget="_blank" href="/search/%E5%A5%BD%E7%94%A8%E7%9A%84%E5%B7%A5%E5%85%B7%E9%9B%86%E5%90%88/1.htm">好用的工具集合</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E6%95%88%E7%8E%87/1.htm">代码效率</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%8A%80%E5%B7%A7/1.htm">前端技巧</a><a class="tag" taget="_blank" href="/search/Vue%E5%BC%80%E5%8F%91/1.htm">Vue开发</a><a class="tag" taget="_blank" href="/search/%E7%BB%84%E5%90%88%E5%BC%8F%E5%87%BD%E6%95%B0/1.htm">组合式函数</a><a class="tag" taget="_blank" href="/search/%E6%A8%A1%E5%9D%97%E7%AE%A1%E7%90%86/1.htm">模块管理</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%AF%BC%E5%85%A5/1.htm">自动导入</a><a class="tag" taget="_blank" href="/search/Nuxt/1.htm">Nuxt</a><a class="tag" taget="_blank" href="/search/Kit/1.htm">Kit</a> <div>title:NuxtKit自动导入功能：高效管理你的模块和组合式函数date:2024/9/14updated:2024/9/14author:cmdragonexcerpt:通过使用NuxtKit的自动导入功能，您可以更高效地管理和使用公共函数、组合式函数和VueAPI。无论是单个导入、目录导入还是从第三方模块导入，您都可以通过简单的API调用轻松实现。categories:前端开发tags:N</div> </li> <li><a href="/article/89.htm" title="java责任链模式" target="_blank">java责任链模式</a> 3213213333332132 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%B4%A3%E4%BB%BB%E9%93%BE%E6%A8%A1%E5%BC%8F/1.htm">责任链模式</a><a class="tag" taget="_blank" href="/search/%E6%9D%91%E6%B0%91%E5%91%8A%E5%8E%BF%E9%95%BF/1.htm">村民告县长</a> <div>责任链模式，通常就是一个请求从最低级开始往上层层的请求，当在某一层满足条件时，请求将被处理，当请求到最高层仍未满足时，则请求不会被处理。就是一个请求在这个链条的责任范围内，会被相应的处理，如果超出链条的责任范围外，请求不会被相应的处理。下面代码模拟这样的效果：创建一个政府抽象类,方便所有的具体政府部门继承它。 package 责任链模式; /** * </div> </li> <li><a href="/article/216.htm" title="linux、mysql、nginx、tomcat 性能参数优化" target="_blank">linux、mysql、nginx、tomcat 性能参数优化</a> ronin47 <div>一、linux 系统内核参数 /etc/sysctl.conf文件常用参数 net.core.netdev_max_backlog = 32768 #允许送到队列的数据包的最大数目 net.core.rmem_max = 8388608 #SOCKET读缓存区大小 net.core.wmem_max = 8388608 #SOCKET写缓存区大</div> </li> <li><a href="/article/343.htm" title="php命令行界面" target="_blank">php命令行界面</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/cli/1.htm">cli</a> <div>常用选项 php -v php -i PHP安装的有关信息 php -h 访问帮助文件 php -m 列出编译到当前PHP安装的所有模块执行一段代码 php -r 'echo "hello, world!";' php -r 'echo "Hello, World!\n";' php -r '$ts = filemtime("</div> </li> <li><a href="/article/470.htm" title="Filter&Session" target="_blank">Filter&Session</a> 171815164 <a class="tag" taget="_blank" href="/search/session/1.htm">session</a> <div>Filter HttpServletRequest requ = (HttpServletRequest) req; HttpSession session = requ.getSession(); if (session.getAttribute("admin") == null) { PrintWriter out = res.ge</div> </li> <li><a href="/article/597.htm" title="连接池与Spring,Hibernate结合" target="_blank">连接池与Spring,Hibernate结合</a> g21121 <a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a> <div> 前几篇关于Java连接池的介绍都是基于Java应用的，而我们常用的场景是与Spring和ORM框架结合，下面就利用实例学习一下这方面的配置。 1.下载相关内容： &nb</div> </li> <li><a href="/article/724.htm" title="[简单]mybatis判断数字类型" target="_blank">[简单]mybatis判断数字类型</a> 53873039oycg <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a> <div> 昨天同事反馈mybatis保存不了int类型的属性,一直报错，错误信息如下: Caused by: java.lang.NumberFormatException: For input string: "null" at sun.mis</div> </li> <li><a href="/article/851.htm" title="项目启动时或者启动后ava.lang.OutOfMemoryError: PermGen space" target="_blank">项目启动时或者启动后ava.lang.OutOfMemoryError: PermGen space</a> 程序员是怎么炼成的 <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/catalina.sh/1.htm">catalina.sh</a><a class="tag" taget="_blank" href="/search/eclipse.ini/1.htm">eclipse.ini</a> <div> 在启动比较大的项目时，因为存在大量的jsp页面，所以在编译的时候会生成很多的.class文件，.class文件是都会被加载到jvm的方法区中，如果要加载的class文件很多，就会出现方法区溢出异常 java.lang.OutOfMemoryError: PermGen space. 解决办法是点击eclipse里的tomcat，在</div> </li> <li><a href="/article/978.htm" title="我的crm小结" target="_blank">我的crm小结</a> aijuans <a class="tag" taget="_blank" href="/search/crm/1.htm">crm</a> <div>各种原因吧，crm今天才完了。主要是接触了几个新技术： Struts2、poi、ibatis这几个都是以前的项目中用过的。 Jsf、tapestry是这次新接触的，都是界面层的框架，用起来也不难。思路和struts不太一样，传说比较简单方便。不过个人感觉还是struts用着顺手啊，当然springmvc也很顺手，不知道是因为习惯还是什么。jsf和tapestry应用的时候需要知道他们的标签、主</div> </li> <li><a href="/article/1105.htm" title="spring里配置使用hibernate的二级缓存几步" target="_blank">spring里配置使用hibernate的二级缓存几步</a> antonyup_2006 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a> <div>．在spring的配置文件中 applicationContent.xml，hibernate部分加入 xml 代码 <prop key="hibernate.cache.provider_class">org.hibernate.cache.EhCacheProvider</prop> <prop key="hi</div> </li> <li><a href="/article/1232.htm" title="JAVA基础面试题" target="_blank">JAVA基础面试题</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/%E6%8A%BD%E8%B1%A1%E5%AE%9E%E7%8E%B0%E6%8E%A5%E5%8F%A3/1.htm">抽象实现接口</a><a class="tag" taget="_blank" href="/search/String%E7%B1%BB/1.htm">String类</a><a class="tag" taget="_blank" href="/search/%E6%8E%A5%E5%8F%A3%E7%BB%A7%E6%89%BF/1.htm">接口继承</a><a class="tag" taget="_blank" href="/search/%E6%8A%BD%E8%B1%A1%E7%B1%BB%E7%BB%A7%E6%89%BF%E5%AE%9E%E4%BD%93%E7%B1%BB/1.htm">抽象类继承实体类</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%AE%9A%E4%B9%89%E5%BC%82%E5%B8%B8/1.htm">自定义异常</a> <div>/* * 栈（stack）：主要保存基本类型（或者叫内置类型）（char、byte、short、 *int、long、 float、double、boolean）和对象的引用，数据可以共享，速度仅次于 * 寄存器（register），快于堆。堆（heap）：用于存储对象。 */ &</div> </li> <li><a href="/article/1359.htm" title="让sqlmap文件 "继承" 起来" target="_blank">让sqlmap文件 "继承" 起来</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/ibatis/1.htm">ibatis</a><a class="tag" taget="_blank" href="/search/sqlmap/1.htm">sqlmap</a> <div> 多个项目中使用ibatis , 和数据库表对应的 sqlmap文件（增删改查等基本语句)，dao, pojo 都是由工具自动生成的, 现在将这些自动生成的文件放在一个单独的工程中，其它项目工程中通过jar包来引用，并通过"继承"为基础的sqlmap文件，dao,pojo 添加新的方法来满足项</div> </li> <li><a href="/article/1486.htm" title="精通Oracle10编程SQL(13)开发触发器" target="_blank">精通Oracle10编程SQL(13)开发触发器</a> bijian1013 <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a> <div>/* *开发触发器 */ --得到日期是周几 select to_char(sysdate+4,'DY','nls_date_language=AMERICAN') from dual; select to_char(sysdate,'DY','nls_date_language=AMERICAN') from dual; --建立BEFORE语句触发器 CREATE O</div> </li> <li><a href="/article/1613.htm" title="【EhCache三】EhCache查询" target="_blank">【EhCache三】EhCache查询</a> bit1129 <a class="tag" taget="_blank" href="/search/ehcache/1.htm">ehcache</a> <div>本文介绍EhCache查询缓存中数据，EhCache提供了类似Hibernate的查询API，可以按照给定的条件进行查询。要对EhCache进行查询，需要在ehcache.xml中设定要查询的属性数据准备 @Before public void setUp() { //加载EhCache配置文件 Inpu</div> </li> <li><a href="/article/1740.htm" title="CXF框架入门实例" target="_blank">CXF框架入门实例</a> 白糖_ <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/webservice/1.htm">webservice</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a> <div>CXF是apache旗下的开源框架，由Celtix + XFire这两门经典的框架合成，是一套非常流行的web service框架。它提供了JAX-WS的全面支持，并且可以根据实际项目的需要，采用代码优先（Code First）或者 WSDL 优先（WSDL First）来轻松地实现 Web Services 的发布和使用，同时它能与spring进行完美结合。在apache cxf官网提供</div> </li> <li><a href="/article/1867.htm" title="angular.equals" target="_blank">angular.equals</a> boyitech <a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/AngularJS+API/1.htm">AngularJS API</a><a class="tag" taget="_blank" href="/search/AnguarJS+%E4%B8%AD%E6%96%87API/1.htm">AnguarJS 中文API</a><a class="tag" taget="_blank" href="/search/angular.equals/1.htm">angular.equals</a> <div>angular.equals 描述: 比较两个值或者两个对象是不是相等。还支持值的类型，正则表达式和数组的比较。两个值或对象被认为是相等的前提条件是以下的情况至少能满足一项：两个值或者对象能通过=== （恒等）的比较两个值或者对象是同样类型，并且他们的属性都能通过angular</div> </li> <li><a href="/article/1994.htm" title="java-腾讯暑期实习生-输入一个数组A[1,2,...n]，求输入B，使得数组B中的第i个数字B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]" target="_blank">java-腾讯暑期实习生-输入一个数组A[1,2,...n]，求输入B，使得数组B中的第i个数字B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>这道题的具体思路请参看何海涛的微博：http://weibo.com/zhedahht import java.math.BigInteger; import java.util.Arrays; public class CreateBFromATencent { /** * 题目：输入一个数组A[1,2,...n]，求输入B，使得数组B中的第i个数字B[i]=A</div> </li> <li><a href="/article/2121.htm" title="FastDFS 的安装和配置修订版" target="_blank">FastDFS 的安装和配置修订版</a> Chen.H <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/fastDFS/1.htm">fastDFS</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F/1.htm">分布式文件系统</a> <div>FastDFS Home:http://code.google.com/p/fastdfs/ 1. 安装 http://code.google.com/p/fastdfs/wiki/Setup http://hi.baidu.com/leolance/blog/item/3c273327978ae55f93580703.html 安装libevent (对libevent的版本要求为1.4.</div> </li> <li><a href="/article/2248.htm" title="[强人工智能]拓扑扫描与自适应构造器" target="_blank">[强人工智能]拓扑扫描与自适应构造器</a> comsci <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div> 当我们面对一个有限拓扑网络的时候,在对已知的拓扑结构进行分析之后,发现在连通点之后,还存在若干个子网络,且这些网络的结构是未知的,数据库中并未存在这些网络的拓扑结构数据....这个时候,我们该怎么办呢? 那么,现在我们必须设计新的模块和代码包来处理上面的问题</div> </li> <li><a href="/article/2375.htm" title="oracle merge into的用法" target="_blank">oracle merge into的用法</a> daizj <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/merget+into/1.htm">merget into</a> <div>Oracle中merge into的使用 http://blog.csdn.net/yuzhic/article/details/1896878 http://blog.csdn.net/macle2010/article/details/5980965 该命令使用一条语句从一个或者多个数据源中完成对表的更新和插入数据. ORACLE 9i 中，使用此命令必须同时指定UPDATE 和INSE</div> </li> <li><a href="/article/2502.htm" title="不适合使用Hadoop的场景" target="_blank">不适合使用Hadoop的场景</a> datamachine <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a> <div>转自：http://dev.yesky.com/296/35381296.shtml。　　Hadoop通常被认定是能够帮助你解决所有问题的唯一方案。当人们提到“大数据”或是“数据分析”等相关问题的时候，会听到脱口而出的回答：Hadoop! 实际上Hadoop被设计和建造出来，是用来解决一系列特定问题的。对某些问题来说，Hadoop至多算是一个不好的选择，对另一些问题来说，选择Ha</div> </li> <li><a href="/article/2629.htm" title="YII findAll的用法" target="_blank">YII findAll的用法</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a> <div>看文档比较糊涂，其实挺简单的： $predictions=Prediction::model()->findAll("uid=:uid",array(":uid"=>10)); 第一个参数是选择条件：”uid=10″。其中:uid是一个占位符，在后面的array(“:uid”=>10)对齐进行了赋值；更完善的查询需要</div> </li> <li><a href="/article/2756.htm" title="vim 常用 NERDTree 快捷键" target="_blank">vim 常用 NERDTree 快捷键</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>下面给大家整理了一些vim NERDTree的常用快捷键了，这里几乎包括了所有的快捷键了，希望文章对各位会带来帮助。切换工作台和目录 ctrl + w + h 光标 focus 左侧树形目录ctrl + w + l 光标 focus 右侧文件显示窗口ctrl + w + w 光标自动在左右侧窗口切换ctrl + w + r 移动当前窗口的布局位置 o 在已有窗口中打开文件、目录或书签，并跳</div> </li> <li><a href="/article/2883.htm" title="Java把目录下的文件打印出来" target="_blank">Java把目录下的文件打印出来</a> 蕃薯耀 <a class="tag" taget="_blank" href="/search/%E5%88%97%E5%87%BA%E7%9B%AE%E5%BD%95%E4%B8%8B%E7%9A%84%E6%96%87%E4%BB%B6/1.htm">列出目录下的文件</a><a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E5%A4%B9%E4%B8%8B%E9%9D%A2%E7%9A%84%E6%96%87%E4%BB%B6/1.htm">文件夹下面的文件</a><a class="tag" taget="_blank" href="/search/%E7%9B%AE%E5%BD%95%E4%B8%8B%E7%9A%84%E6%96%87%E4%BB%B6/1.htm">目录下的文件</a> <div>Java把目录下的文件打印出来 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月11日 11:02:</div> </li> <li><a href="/article/3010.htm" title="linux远程桌面----VNCServer与rdesktop" target="_blank">linux远程桌面----VNCServer与rdesktop</a> hanqunfeng <a class="tag" taget="_blank" href="/search/Desktop/1.htm">Desktop</a> <div>windows远程桌面到linux，需要在linux上安装vncserver，并开启vnc服务，同时需要在windows下使用vnc-viewer访问Linux。vncserver同时支持linux远程桌面到linux。 linux远程桌面到windows，需要在linux上安装rdesktop，同时开启windows的远程桌面访问。下面分别介绍，以windo</div> </li> <li><a href="/article/3137.htm" title="guava中的join和split功能" target="_blank">guava中的join和split功能</a> jackyrong <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>guava库中，包含了很好的join和split的功能，例子如下： 1）将LIST转换为使用字符串连接的字符串 List<String> names = Lists.newArrayList("John", "Jane", "Adam", "Tom"); </div> </li> <li><a href="/article/3264.htm" title="Web开发技术十年发展历程" target="_blank">Web开发技术十年发展历程</a> lampcy <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>回顾web开发技术这十年发展历程： Ajax 03年的时候我上六年级，那时候网吧刚在小县城的角落萌生。传奇，大话西游第一代网游一时风靡。我抱着试一试的心态给了网吧老板两块钱想申请个号玩玩，然后接下来的一个小时我一直在，注，册，账，号。彼时网吧用的512k的带宽，注册的时候，填了一堆信息，提交，页面跳转，嘣，”您填写的信息有误，请重填”。然后跳转回注册页面，以此循环。我现在时常想，如果当时a</div> </li> <li><a href="/article/3391.htm" title="架构师之mima-----------------mina的非NIO控制IOBuffer(说得比较好)" target="_blank">架构师之mima-----------------mina的非NIO控制IOBuffer(说得比较好)</a> nannan408 <a class="tag" taget="_blank" href="/search/buffer/1.htm">buffer</a> <div>1.前言。如题。 2.代码。 IoService IoService是一个接口，有两种实现：IoAcceptor和IoConnector；其中IoAcceptor是针对Server端的实现，IoConnector是针对Client端的实现；IoService的职责包括： 1、监听器管理 2、IoHandler 3、IoSession</div> </li> <li><a href="/article/3518.htm" title="ORA-00054:resource busy and acquire with NOWAIT specified" target="_blank">ORA-00054:resource busy and acquire with NOWAIT specified</a> Everyday都不同 <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/session/1.htm">session</a><a class="tag" taget="_blank" href="/search/Lock/1.htm">Lock</a> <div>[Oracle] 今天对一个数据量很大的表进行操作时，出现如题所示的异常。此时表明数据库的事务处于“忙”的状态，而且被lock了，所以必须先关闭占用的session。 step1，查看被lock的session： select t2.username, t2.sid, t2.serial#, t2.logon_time from v$locked_obj</div> </li> <li><a href="/article/3645.htm" title="javascript学习笔记" target="_blank">javascript学习笔记</a> tntxia <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div> javascript里面有6种基本类型的值:number、string、boolean、object、function和undefined。number：就是数字值，包括整数、小数、NaN、正负无穷。string:字符串类型、单双引号引起来的内容。boolean:true、false object:表示所有的javascript对象，不用多说function:我们熟悉的方法，也就是</div> </li> <li><a href="/article/3772.htm" title="Java enum的用法详解" target="_blank">Java enum的用法详解</a> xieke90 <a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a><a class="tag" taget="_blank" href="/search/%E6%9E%9A%E4%B8%BE/1.htm">枚举</a> <div>Java中枚举实现的分析：示例： public static enum SEVERITY{ INFO,WARN,ERROR } enum很像特殊的class，实际上enum声明定义的类型就是一个类。而这些类都是类库中Enum类的子类 (java.l</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>