推荐阅读
  • Bootstrap4 面包屑导航

    Bootstrap4 面包屑导航(Breadcrumb) 面包屑导航是一种基于网站层次信息的显示方式。以博客为例,面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置,是在用户界面中的一种导航辅助。 Bootstrap 中的面包屑导航是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS(bootstrap.min.css)中的 ::b

  • Bootstrap4 小工具

    Bootstrap4 小工具 Bootstrap4 提供了一些小工具,可以让我们不用写 CSS 代码就能实现想要的效果。 边框 使用 border 类可以添加或移除边框: 实例 [mycode3 type='html'] [/mycode3] 尝试一下 » 边框颜色 Bootstrap4 提供了一些类来设置边框颜色: 实例

  • Bootstrap4 进度条

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

  • Bootstrap4 卡片

    Bootstrap4 卡片 简单的卡片 我们可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片,实例如下: 实例 [mycode3 type='html'] 简单的卡片 [/mycode3] 尝试一下 » Bootstrap4 的卡片类似 Bootstrap 3 中的面板、图片缩略图、well。

  • Bootstrap 4 Flex

    Bootstrap4 Flex(弹性)布局 Bootstrap4 通过 flex 类来控制页面的布局。 弹性盒子(flexbox) Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局,而不是使用浮动来布局。 弹性盒子是 CSS3 的一种新的布局模式,更适合响应式的设计,如果你还不了解 flex,可以阅读我们的 CSS3 弹性盒子(

  • Bootstrap4 徽章(Badges)

    Bootstrap4 徽章(Badges) 徽章(Badges)主要用于突出显示新的或未读的项。如需使用徽章,只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 <span> 元素上即可。 徽章可以根据父元素的大小的变化而变化: 实例 [mycode3 type='html'] 测试标题 Ne

  • Bootstrap4 按钮

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

  • Bootstrap4 下拉菜单

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

  • Bootstrap4 列表组

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

  • Bootstrap4 安装使用

    Bootstrap4 安装使用 我们可以通过以下两种方式来安装 Bootstrap4: 使用 Bootstrap 4 CDN。 从官网 getbootstrap.com 下载 Bootstrap 4。 Bootstrap 4 CDN 国内推荐使用 Staticfile CDN 上的库: Bootstrap4 CDN [mycode3 type='html&#

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地图