推荐阅读
  • Bootstrap4 模态框

    Bootstrap4 模态框 模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。 如何创建模态框 以下实例创建了一个简单的模态框效果 : 实例 [mycode3 type='html'] 打开模态框

  • Bootstrap4 轮播

    Bootstrap4 轮播 轮播是一个循环的幻灯片: 如何创建轮播 以下实例创建了一个简单的图片轮播效果 : 实例 [mycode3 type='html']

  • Bootstrap4 网格系统

    Bootstrap4 网格系统 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。 我们也可以根据自己的需要,定义列数: table.grid { width:100%; border:none; background-color:#F6F4F0; padding:0p

  • Bootstrap4 分页

    Bootstrap4 分页 网页开发过程,如果碰到内容过多,一般都会做分页处理。 Bootstrap 4 可以很简单的实现分页效果。 要创建一个基本的分页可以在 <ul> 元素上添加 .pagination 类。然后在 <li> 元素上添加 .page-item 类:: 实例 [mycode3 type='html&#039

  • Bootstrap4 进度条

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

  • Bootstrap4 弹出框

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

  • Bootstrap4 导航栏

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

  • Bootstrap4 下拉菜单

    Bootstrap4 下拉菜单 Bootstrap4 下拉菜单依赖于 popper.min.js。 下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。 实例 [mycode3 type='html'] Dropdown button Link 1 Link 2 Link 3 [/mycode3] 尝试一下 &

  • Bootstrap4 提示框

    Bootstrap4 提示框 提示框是一个小小的弹窗,在鼠标移动到元素上显示,鼠标移到元素外就消失。 如何创建提示框 通过向元素添加 data-toggle='tooltip' 来来创建提示框。 title 属性的内容为提示框显示的内容: [mycode3 type='html'] 鼠标移动到我这 [/mycode3] 注意: 提示框要写

  • Bootstrap4 表格

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

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 © 2022 爱学习网 浙ICP备18049359号 网站地图 Google地图