首页 > 其他分享 >03_Bootstrap基础组件03

03_Bootstrap基础组件03

时间：2023-09-24 23:08:27浏览次数：36  
标签：03 元素 group Bootstrap 可见 按钮 组件 btn block


7 表单

7.1 基本实例

设置了 .form-control 类的表单元素，默认设置宽度属性为 width: 100%;。将 label 元素和表单元素包裹在 .form-group 中可以按照排好的样式进行展示。

<form action="#" method="post">
    <div class="form-group">
        <label for="email1">邮箱地址</label>
        <input type="email" class="form-control" id="email1" placeholder="请输入邮箱地址" />
    </div>
    <div class="form-group">
        <label for="password1">密码</label>
        <input type="password" class="form-control" id="password1" placeholder="请输入密码" />
    </div>
    <div class="form-group">
        <label for="uploadfile">上传文件</label>
        <input type="file" id="uploadfile">
        <p class="help-block">选择文件进行上传.</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" name="agree" />同意协议
        </label>
    </div>
    <button type="submit" class="btn btn-default btn-block">Submit</button>
</form>

7.2 内联表单

为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 显示方式。

<form class="form-inline" action="#" method="post">
    <div class="form-group">
        <label for="email1">邮箱地址</label>
        <input type="email" class="form-control" id="email1" placeholder="请输入邮箱地址" />
    </div>
    <div class="form-group">
        <label for="password1">密码</label>
        <input type="password" class="form-control" id="password1" placeholder="请输入密码" />
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" name="agree" />同意协议
        </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

7.3 水平排列的表单

为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

<form class="form-horizontal" action="#" method="post">
    <div class="form-group">
        <label for="email1" class="col-sm-2">邮箱地址</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="email1" placeholder="请输入邮箱地址" />
        </div>
    </div>
    <div class="form-group">
        <label for="password1" class="col-sm-2">密码</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="password1" placeholder="请输入密码" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">登录</button>
        </div>
    </div>
</form>

7.4 支持属性

支持的属性有 text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

注：只有正确设置了 type 属性的输入控件才能被赋予正确的样式。

<input type="text" class="form-control" placeholder="文本输入框">

7.5 静态控件

如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可。

<form class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <p class="form-control-static">[email protected]</p>
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
    </div>
</form>

7.6 禁用状态

为输入框设置 disabled 属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了 not-allowed 鼠标状态。

<input class="form-control" id="disabledInput" type="text" placeholder="禁用输入框" disabled>

7.7 只读状态

为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。

<input class="form-control" type="text" placeholder="只读输入框" readonly>

7.8 提示文字

通过 .help-block 定义输入框的提示文字，使用 aria-describedby 属性所涉及的表单控件进行关联。

<label for="username">姓名</label>
<input type="text" id="username" class="form-control" aria-describedby="helpBlock">
<span id="helpBlock" class="help-block">您的信息会加密保存，请放心填写</span>

7.9 校验状态

添加 .has-warning、.has-error 或 .has-success 类到父元素即可，显示对应的状态样式。元素之内的 .control-label、.form-control 和 .help-block 都将进行样式的变化。

<div class="form-group has-warning">
    <label for="username" class="control-label">姓名</label>
    <input type="text" id="username" class="form-control" aria-describedby="helpBlock">
    <span id="helpBlock" class="help-block">您的信息会加密保存，请放心填写</span>
</div>
<div class="form-group has-success">
    <label for="username" class="control-label">姓名</label>
    <input type="text" id="username" class="form-control" aria-describedby="helpBlock">
    <span id="helpBlock" class="help-block">您的信息会加密保存，请放心填写</span>
</div>
<div class="form-group has-error">
    <label for="username" class="control-label">姓名</label>
    <input type="text" id="username" class="form-control" aria-describedby="helpBlock">
    <span id="helpBlock" class="help-block">您的信息会加密保存，请放心填写</span>
</div>

7.10 输入框小图标

设置相应的 .has-feedback 类并添加正确的图标。

<div class="form-group has-success has-feedback">
    <label for="email1" class="control-label">邮箱地址</label>
    <input type="email" class="form-control" id="email1" placeholder="请输入邮箱地址" />
    <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
</div>

<div class="form-group has-success has-feedback">
    <label for="email1" class="control-label">邮箱地址</label>
    <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="email" class="form-control" id="email1" placeholder="请输入邮箱地址" />
    </div>
    <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
</div>

7.11 尺寸调整

通过 .input-lg 类似的类可以为控件设置高度

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。

<form class="form-horizontal">
    <div class="form-group form-group-lg">
        <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
        <div class="col-sm-10">
            <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
        </div>
    </div>
    <div class="form-group form-group-sm">
        <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
        <div class="col-sm-10">
            <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
        </div>
    </div>
</form>

7.12 调整列尺寸

用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。

<div class="row">
    <div class="col-xs-2">
        <input type="text" class="form-control" placeholder=".col-xs-2">
    </div>
    <div class="col-xs-3">
        <input type="text" class="form-control" placeholder=".col-xs-3">
    </div>
    <div class="col-xs-4">
        <input type="text" class="form-control" placeholder=".col-xs-4">
    </div>
</div>

8 按钮

8.1 基础按钮

Bootstrap 中可作为按钮使用的标签或元素。

为 a、button 或 input 元素添加按钮类 .btn 即可使用 Bootstrap 提供的样式。

<a class="btn" href="#" role="button">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

注意：

  • 如果 <a> 元素被作为按钮使用，并用于在当前页面触发某些功能，而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role=“button” 属性
  • 尽可能使用 button 元素来获得在各个浏览器上获得相同的显示效果

8.2 预定义样式

使用下面列出的类可以快速创建一个带有预定义样式的按钮。

<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
<button type="button" class="btn btn-link">（链接）Link</button>

8.3 按钮的尺寸

当你需要让按钮具有不同尺寸的时候，同样是使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

<p>
    <button type="button" class="btn btn-primary btn-lg">大按钮</button>
    <button type="button" class="btn btn-default btn-lg">大按钮</button>
</p>
<p>
    <button type="button" class="btn btn-primary">默认尺寸</button>
    <button type="button" class="btn btn-default">默认尺寸</button>
</p>
<p>
    <button type="button" class="btn btn-primary btn-sm">小按钮</button>
    <button type="button" class="btn btn-default btn-sm">小按钮</button>
</p>
<p>
    <button type="button" class="btn btn-primary btn-xs">超小尺寸</button>
    <button type="button" class="btn btn-default btn-xs">超小尺寸</button>
</p>

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

<p>
    <button type="button" class="btn btn-primary btn-lg btn-block">块级元素</button>
    <button type="button" class="btn btn-default btn-lg btn-block">块级元素</button>
</p>

8.4 激活状态

添加 .active 类，表示当前按钮是按压状态

<p>
    <button type="button" class="btn btn-primary btn-lg">首选项按钮</button>
    <button type="button" class="btn btn-primary btn-lg active">首选项按钮</button>
    <a href="#" class="btn btn-primary btn-lg" role="button">首选项按钮</a>
    <a href="#" class="btn btn-primary btn-lg active" role="button">首选项按钮</a>
</p>

8.5 禁用状态

添加 disabled 属性，使其表现出禁用状态。

<p>
    <button type="button" class="btn btn-default btn-lg" disabled="disabled">默认按钮</button>
    <button type="button" class="btn btn-primary btn-lg" disabled="disabled">首选项按钮</button>
    <a href="#" class="btn btn-default btn-lg disabled" role="button">默认按钮</a>
    <a href="#" class="btn btn-primary btn-lg disabled" role="button">首选项按钮</a>
</p>

8.6 按钮组

通过按钮组容器 .btn-group 把一组按钮放在同一行里。

<div class="btn-group">
    <button type="button" class="btn btn-default">按钮1</button>
    <button type="button" class="btn btn-default">按钮2</button>
    <button type="button" class="btn btn-default">按钮3</button>
</div>

通过容器 .btn-toolbar 可以把按钮组继续进行嵌套。

<div class="btn-toolbar">
    <div class="btn-group">
        <button type="button" class="btn btn-default">1</button>
        <button type="button" class="btn btn-default">2</button>
        <button type="button" class="btn btn-default">3</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">4</button>
        <button type="button" class="btn btn-default">5</button>
        <button type="button" class="btn btn-default">6</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">7</button>
        <button type="button" class="btn btn-default">8</button>
        <button type="button" class="btn btn-default">9</button>
        <button type="button" class="btn btn-default">10</button>
    </div>
</div>

给 .btn-group 加上 .btn-group-* 类，可以为当前按钮组的按钮设置统一的尺寸，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。

<div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-default">1</button>
    <button type="button" class="btn btn-default">2</button>
    <button type="button" class="btn btn-default">3</button>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-default">4</button>
    <button type="button" class="btn btn-default">5</button>
    <button type="button" class="btn btn-default">6</button>
</div>
<div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-default">7</button>
    <button type="button" class="btn btn-default">8</button>
    <button type="button" class="btn btn-default">9</button>
</div>
<div class="btn-group btn-group-xs">
    <button type="button" class="btn btn-default">10</button>
    <button type="button" class="btn btn-default">11</button>
    <button type="button" class="btn btn-default">12</button>
    <button type="button" class="btn btn-default">13</button>
</div>

使用 .btn-group-vertical 让一组按钮垂直堆叠排列显示。

<div class="btn-group-vertical">
    <button type="button" class="btn btn-default">1</button>
    <button type="button" class="btn btn-default">2</button>
    <button type="button" class="btn btn-default">3</button>
</div>

可以将 .btn 元素包裹到 .btn-group.btn-group-justified 中实现两端对齐的按钮组。

注意：用 <button> 实现的按钮，需要包裹在 .btn-group 容器中

<div class="btn-group btn-group-justified">
    <a href="#" class="btn btn-default">1</a>
    <a href="#" class="btn btn-default">2</a>
    <a href="#" class="btn btn-default">3</a>
</div>

<div class="btn-group btn-group-justified">
    <div class="btn-group">
        <button type="button" class="btn btn-default">1</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">2</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">3</button>
    </div>
</div>

9 响应式图片

在 Bootstrap 中，通过给图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了以下样式，从而让图片在父元素中更好的缩放。

max-width:100%;
height:auto;
display:block;

注意：使用 .center-block 类让图片水平居中

<img class="img-responsive center-block" src="http://www.ayunhe.com/content/uploads/2019/11/157447462086310494.jpg" alt="">

通过为 img 标签添加以下的类名，可以让图片呈现不同的形状。

.img-rounded /*圆角*/
.img-circle  /* 圆 */
.img-thumbnail /*双线*/

10 响应式工具

通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。（星号可取值为 block、inline、inline-block）

类组

超小屏幕手机 (<768px)

小屏幕平板 (≥768px)

中等屏幕桌面 (≥992px)

大屏幕桌面 (≥1200px)

.visible-xs-*

可见

隐藏

隐藏

隐藏

.visible-sm-*

隐藏

可见

隐藏

隐藏

.visible-md-*

隐藏

隐藏

可见

隐藏

.visible-lg-*

隐藏

隐藏

隐藏

可见

.hidden-xs

隐藏

可见

可见

可见

.hidden-sm

可见

隐藏

可见

可见

.hidden-md

可见

可见

隐藏

可见

.hidden-lg

可见

可见

可见

隐藏

修改元素的 display 属性（星号可取值为 xs、sm、md、lg）

类组

CSS display

.visible-*-block

display: block;

.visible-*-inline

display: inline;

.visible-*-inline-block

display: inline-block;

响应式可见案例

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <span class="hidden-xs">超小屏幕</span>
            <span class="visible-xs-block">✔ 在超小屏幕上可见</span>
        </div>
        <div class="col-xs-6">
            <span class="hidden-sm">小屏幕</span>
            <span class="visible-sm-block">✔ 在小屏幕上可见</span>
        </div>
        <div class="clearfix visible-xs-block"></div>
        <div class="col-xs-6">
            <span class="hidden-md">中等屏幕</span>
            <span class="visible-md-block">✔ 在中等屏幕上可见</span>
        </div>
        <div class="col-xs-6">
            <span class="hidden-lg">大屏幕</span>
            <span class="visible-lg-block">✔ 在大屏幕上可见</span>
        </div>
    </div>
</div>


标签：03,元素,group,Bootstrap,可见,按钮,组件,btn,block
From： https://blog.51cto.com/teayear/7589211

相关文章

  • 02_Bootstrap基础组件02
    4排版使用Bootstrap的排版特性，您可以创建标题、段落、列表及其他内联元素，实际上它是把大部分在HTML的基本标签加了样式。所以这部分相对比较简单。4.1标题h1-h6重新定义样式，HTML中的所有标题标签，<h1>到<h6>均可使用。增加了.h1到.h6类，为的是给内联（inline）属性的文本赋......
  • 01_Bootstrap基础组件01
    1什么是Bootstrap？Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript的，它简洁灵活，使Web开发更加快捷。它对HTML、CSS和JavaScript进行了封装，使它们使用起来更方便。我们只需要使用它已经设定好的类，或规则，即可快速应用它提供的功能。......
  • win32汇编-80386的内存分页机制
     读者可以注意到，在实模式下寻址的时候，“段寄存器+偏移地址”经过转换计算以后得到的地址是“物理地址”，也就是在物理内存中的实际地址。而保护模式下，“段选择器+偏移地址”转换后的地址被称为“线性地址”而不是“物理地址”。那么，线性地址就是物理地址吗?答案可能是“是”，也可......
  • 2023 年前端 UI 组件库概述，百花齐放！
    UI组件库提供了各种常见的UI元素，比如按钮、输入框、菜单等，只需要调用相应的组件并按照需求进行配置，就能够快速构建出一个功能完善的UI。虽然市面上有许多不同的UI组件库可供选择，但在2023年底也并没有出现一两个明确的解决方案能够适用于所有情况。因为不同的前端框架（例如React......
  • UserWarning: The parameter 'pretrained' is deprecated since 0.13 and may be remo
    从torchvision0.13开始，加载预训练模型函数的参数从pretrained=True改为weights=预训练模型参数版本。且旧版本的写法将在未来的torchvision0.15版本中被Deprecated。fromtorchvisionimportmodels#旧版本的写法，将在未来的torchvision0.15版本中被Deprecatedmod......
  • P1032
    写这道不算难的题目是我遇到了不少问题，复述以下过程吧。由于数据很水，这道题用不到KMP算法，只要使用朴素算法进行字符串比对就可以了。首先，我错误的选择了dfs算法，导致了TLE的发生。这类求最优解的问题显然大多应该用bfs解决。其次，我忘了考虑如果一个字符串多处都可以用同一规则替......
  • 力扣-链表组件
    1.问题给定链表头结点head，该链表上的每个结点都有一个唯一的整型值。同时给定列表G，该列表是上述链表中整型值的一个子集。返回列表G中组件的个数，这里对组件的定义为：链表中一段极长连续结点的值（该值必须在列表G中）构成的集合。极长的含义是：这段连续结点的前面或后面结点不......
  • 父子组件如何互相调用接收值？
    父组件调用子组件子组件调用父组件<child:fatherFun="handleFatherFun"><child>子组件调用父组件的方法$emit()<div@click="childClick">点击调用父组件函数</div>childClick(){//子组件点击 this.$emit('fatherFun');//父组件的函数名}<child:father-fun=&q......
  • Hadoop是什么？ Hadoop是一个由Apache开发的开源分布式计算框架，它能够处理大规模数据并
    Hadoop是什么？Hadoop是一个由Apache开发的开源分布式计算框架，它能够处理大规模数据并行处理任务，支持大规模数据存储和处理。Hadoop的核心组件包括分布式文件系统HDFS和分布式计算框架MapReduce，它们使得Hadoop可以在廉价的硬件上并行地处理大量数据。Hadoop还包括很多相关的项目和子......
  • 调用组件三部曲
    现有一个Footer的组件进行调用：<Footer></Footer>importFooterfrom'@/components/base/footer'components:{CereHeader,SiteNav,Footer}......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99