推荐阅读
  • Bootstrap4 教程

    Bootstrap4 教程 Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap4 目前是 Bootstrap 的最新版本,是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出

  • Bootstrap 4 Flex

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

  • Bootstrap4 多媒体对象

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

  • Bootstrap4 导航栏

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

  • Bootstrap4 表格

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

  • Bootstrap4 表单控件

    Bootstrap4 表单控件 Bootstrap4 支持以下表单控件: input textarea checkbox radio select Bootstrap Input Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week,

  • Bootstrap4 创建一个网页

    Bootstrap4 创建一个网页 接下来我们通过 Bootstrap4 来创建一个简单的响应式网页。 在学习之前我们可以先看下效果:https://www.爱学习网.com/try/demo_source/bootstrap3-makewebsite.htm HTML 代码 [mycode3 type='html'] 我的第一个 Bootstrap 4 页面

  • Bootstrap4 按钮组

    Bootstrap4 按钮组 Bootstrap 4 中允许我们将按钮放在同一行上。 可以在 <div> 元素上添加 .btn-group 类来创建按钮组。 实例 [mycode3 type='html'] Apple Samsung Sony [/mycode3] 尝试一下 » 提示: 我们可以使用 .

  • Bootstrap4 信息提示框

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

  • Bootstrap4 导航

    Bootstrap4 导航 如果你想创建一个简单的水平导航栏,可以在 <ul> 元素上添加 .nav类,在每个 <li> 选项上添加 .nav-item 类,在每个链接上添加 .nav-link 类: 实例 [mycode3 type='html'] Link Link

Bootstrap4 表单控件

Bootstrap4 支持以下表单控件:

  • input
  • textarea
  • checkbox
  • radio
  • select

Bootstrap Input

Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color。

注意:: 如果 input 的 type 属性未正确声明,输入框的样式将不会显示。

以下实例使用两个 input 元素,一个是 text,一个是 password :


<div class="form-group">
  <label for="usr">用户名:</label>
  <input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
  <label for="pwd">密码:</label>
  <input type="password" class="form-control" id="pwd">
</div>

Bootstrap textarea

以下实例演示了 textarea 的样式。


<div class="form-group">
  <label for="comment">评论:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
</div>

Bootstrap 复选框(checkbox)

复选框用于让用户从一系列预设置的选项中进行选择,可以选一个或多个。

以下实例包含了三个选项。最后一个是禁用的:


<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 1
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 2
  </label>
</div>
<div class="form-check disabled">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="" disabled>Option 3
  </label>
</div>

使用 .form-check-inline 类可以让选项显示在同一行上:


<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 1
  </label>
</div>
<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 2
  </label>
</div>
<div class="form-check form-check-inline disabled">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="" disabled>Option 3
  </label>
</div>

Bootstrap 单选框(Radio)

单选框用于让用户从一系列预设置的选项中进行选择,只能选一个。

以下实例包含了三个选项。最后一个是禁用的:


<div class="radio">
  <label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
  <label><input type="radio" name="optradio" disabled>Option 3</label>
</div>

使用 .radio-inline 类可以让选项显示在同一行上:


<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio" disabled>Option 3</label>

Bootstrap select 下拉菜单

当您想让用户从多个选项中进行选择,但是默认情况下只能选择一个选项时,则使用选择框。

以下实例包含了两个下拉菜单:


<div class="form-group">
  <label for="sel1">下拉菜单:</label>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>
关于 免责声明 联系
Copyright © 2022 爱学习网 浙ICP备18049359号 网站地图 Google地图