推荐阅读
  • Bootstrap4 列表组

    Bootstrap4 列表组 大部分基础列表组都是无序的。 要创建列表组,可以在 <ul> 元素上添加 .list-group 类, 在 <li> 元素上添加 .list-group-item 类: 实例 [mycode3 type='html'] First item Second item Thir

  • Bootstrap4 表单

    Bootstrap4 表单 在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。 表单元素 <input>, <textarea>, 和 <select> elements 在使用 .form-control 类的情

  • Bootstrap4 信息提示框

    Bootstrap4 信息提示框 Bootstrap 4 可以很容易实现信息提示框。 提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现: 实例

  • Bootstrap4 进度条

    Bootstrap4 进度条 进度条可以显示用户任务的完成过程。 创建一个基本的进度条的步骤如下: 添加一个带有 .progress 类的 <div>。 接着,在上面的 <div> 内,添加一个带有 class .progress-bar 的空的 <div>。 添加一个带有百分比表示的宽度的 style 属性,

  • Bootstrap4 导航栏

    Bootstrap4 导航栏 导航栏一般放在页面的顶部。 我们可以使用 .navbar 类来创建一个标准的导航栏,后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开,小屏幕垂直堆叠)。 导航栏上的选项可以使用 <ul> 元素并添加 class='navbar-nav' 类。 然后在 &a

  • Bootstrap4 弹出框

    Bootstrap4 弹出框 弹出框控件类似于提示框,它在鼠标点击到元素后显示,与提示框不同的是它可以显示更多的内容。 如何创建弹出框 通过向元素添加 data-toggle='popover' 来来创建弹出框。 title 属性的内容为弹出框的标题,data-content 属性显示了弹出框的文本内容: [mycode3 type='html'

  • Bootstrap4 图像形状

    Bootstrap4 图像形状 圆角图片 .rounded 类可以让图片显示圆角效果: 实例 [mycode3 type='html'] [/mycode3] 尝试一下 » 椭圆图片 .rounded-circle 类可以设置椭圆形图片: 实例 [mycode3 type='html'] [/mycode3]

  • Bootstrap4 表格

    Bootstrap4 表格 Bootstrap4 基础表格 Bootstrap4 通过 .table 类来设置基础表格的样式,实例如下: 实例 [mycode3 type='html'] Firstname Lastname Email

  • Bootstrap4 多媒体对象

    Bootstrap4 多媒体对象 Bootstrap 提供了很好的方式来处理多媒体对象(图片或视频)和内容的布局。应用场景有博客评论、微博等: 基础多媒体对象 要创建一个多媒体对象,可以在容器元素上添加 .media 类,然后将多媒体内容放到子容器上,子容器需要添加 .media-body 类,然后添加外边距,内边距等效果: 实例 [mycode3 type='html&#

  • Bootstrap4 按钮

    Bootstrap4 按钮 Bootstrap 4 提供了不同样式的按钮。 实例 [mycode3 type='html'] 基本按钮 主要按钮 次要按钮 成功 信息 警告 危险 黑色 浅色 链接 [/mycode3] 尝试一下 » 按钮类可用于 <a>, <button>, 或 &amp

Bootstrap4 自定义表单

Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。

自定义复选框

如果要自定义一个复选框,可以设置 <div> 为父元素,类为 .custom-control.custom-checkbox,复选框作为子元素放在该 <div> 里头,然后复选框设置为 type="checkbox",类为 .custom-control-input

复选框的文本使用 label 标签,标签使用 .custom-control-label 类,labelfor 属性值需要匹配复选框的 id。


<form>
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
    <label class="custom-control-label" for="customCheck">自定义复选框</label>
  </div>
</form>

自定义单选框

如果要自定义一个单选框,可以设置 <div> 为父元素,类为 .custom-control.custom-radio,单选框作为子元素放在该 <div> 里头,然后单选框设置为 type="radio",类为 .custom-control-input

单选框的文本使用 label 标签,标签使用 .custom-control-label 类,labelfor 属性值需要匹配单选框的 id


<form>
  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customRadio" name="example1" value="customEx">
    <label class="custom-control-label" for="customRadio">自定义单选框</label>
  </div> 
</form>

自定义控件显示在同一行

我们可以在外部元素上使用 .custom-control-inline 类来包裹自定义表单控件,这样自定义表单控件就能显示在同一行:


<form>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio">自定义单选框 1</label>
  </div>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio2" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio2">自定义单选框 2</label>
  </div> 
</form>

自定义选择菜单

创建自定义选择菜单可以在 <select> 元素上添加 .custom-select 类:


<form>
  <select name="cars" class="custom-select-sm">
    <option selected>自定义选择菜单</option>
    <option value="Google">Google</option>
    <option value="lvstudy">lvstudy</option>
    <option value="Taobao">Taobao</option>
  </select>
</form>

如果我们要设置自定义选择菜单大小,可以使用 .custom-select-sm.custom-select-lg 来设置它们的大小:


<form>
  <!-- 小 -->
  <select name="cars" class="custom-select-sm">
    <option selected>比较小的自定义选择菜单</option>
    <option value="Google">Google</option>
    <option value="lvstudy">lvstudy</option>
    <option value="Taobao">Taobao</option>
  </select>
 
  <!-- 大 -->
  <select name="cars" class="custom-select-lg">
    <option selected>比较大的自定义选择菜单</option>
    <option value="Google">Google</option>
    <option value="lvstudy">lvstudy</option>
    <option value="Taobao">Taobao</option>
  </select>
</form>

自定义滑块控件

我们可以在 inputtype="range" 的输入框中添加 .custom-range 类来设置自定义滑块控件:


<form>
  <label for="customRange">自定义滑块控件</label>
  <input type="range" class="custom-range" id="customRange" name="points1">
</form>

自定义文件上传控件

我们可以在父元素添加 .custom-file 类,然后在 input 设置为 type="file" 并添加 .custom-file-input:

上传控件的文本使用 label 标签,标签使用 .custom-file-label 类,labelfor 属性值需要匹配上传控件 id


<form>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">选择文件</label>
  </div>
</form>
关于 免责声明 联系
Copyright © 2023 爱学习网 浙ICP备18049359号 网站地图 Google地图