bootstrap 基础表单 内联表单 横向表单

最新推荐文章于 2019-12-24 10:12:19 发布
最新推荐文章于 2019-12-24 10:12:19 发布
阅读量227 收藏
点赞数
文章标签： javascript ViewUI

bootstrap 基础表单 内联表单 横向表单

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
</head>

<body>
    <p class="btn-primary">基础表单</p>
    <form>
        <fieldset>
            <legend>User Login</legend>
            <div class="form-group">
                <label for="">User</label>
                <input type="email" class="form-control" placeholder="this is email input">
            </div>
            <div class="form-group">
                <label for="">Pass</label>
                <input type="password" class="form-control" placeholder="this is for password">
            </div>
            <div class="checkbox">
                <label for="">
                    <input type="checkbox">ABC</input>
                </label>
            </div>
            <button type="submit" class="btn btn-default">Login</button>
        </fieldset>
    </form>
    <p class="btn-primary">内联表单</p>
    <form class="form-inline">
        <div class="form-group">
            <label for="">User</label>
        </div>
        <div class="form-group">
            <input type="text" class="form-control" placeholder="this is for user">
        </div>
        <div class="checkbox">
            <label for="chk2">
                <input id="chk2" type="checkbox">Remember Pass</label>
        </div>
        <button type="submit" class="btn btn-default">Login</button>
    </form>
    <p class="btn-primary">横向表单</p>
    <form action="" class="form-horizontal" role="form">
        <div class="form-group">
            <label for="account" class="col-sm-2 control-label">UserName</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="account" placeholder="account place holder">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label for="chk">
                        <input id="chk" type="checkbox">remember me</label>
                </div>
            </div>
        </div>
    </form>
    <script type="text/javascript" src="dist/jQuery/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="dist/js/bootstrap.js"></script>
</body>

</html>

 

weixin_33695082
关注
Bootstrap学习笔记（三）表单
前端产品工程师
02-05 1190
基础表单 表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控件所起的作用都各不相同，而且不同的浏览器对表单控件渲染的风格都各有不同。 同样，表单也是Bootstrap框架中的核心内容，下面向大家介绍Bootstrap框架中表单的制作。 表单
bootstrap-基础表单
weixin_34296641的博客
05-19 130
1.运行效果如图所示2.实现代码如下<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <title>表单</ti...
Bootstrap基础学习(二)—表单
weixin_30781433的博客
09-06 104
一、表单 1.基本格式 <!-- 基本格式 --> <form> <div class="form-group"> <label>姓名 </label> <input type="text" class="form-...
bootstrap 基础表单
weixin_30298497的博客
01-12 190
表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控件所起的作用都各不相同，而且不同的浏览器对表单控件渲染的风格都各有不同。 ☑LESS版本：对应源文件 forms.less ☑​ Sass版本：对应源文件 _forms.scss 对于基础表单，Bootstrap并未对其做太多的定制性效果设计，仅仅对表单内的fields...
Bootstrap基础表单
奋斗的日子最甜美，在科技的海洋里，永无止境。
04-03 847
Bootstrap基础表单 主要内容 全局样式 2.form-control 3.form-group 4.实际操作 操作 1、新建一个web项目ch06 2、然后将我们bootstrap用到的css、JavaScript文件导进来。
bootstrap-内联表单 水平（横向）表单 响应式图片 辅助类
我的专栏
05-17 6492
<!-- 为了确保适当的绘制和触屏缩放，需要在 之中添加 viewport 元数据标签。 --> --> <!--[if lt IE 9] --> <!-- 内联元素:让元素排成一行显示出来，且高度和宽度由内容决定，不能用css
Bootstrap CSS布局之表单
11-26
- 横向表单允许表单元素在多列布局中呈现，通常与Bootstrap的栅格系统结合使用。 - 添加`.form-horizontal`类到`<form>`元素，然后将`.control-label`类应用于`<label>`，并将输入控件放入具有栅格类（如`.col-lg-...
Bootstrap快速创建表单指南
内联表单则允许表单元素并排显示，通常用于紧凑空间或者需要节省横向空间的情况。要创建内联表单，只需在`<form>`元素上添加`.form-inline`类。 ```html 名称 请输入名称"> <!-- 更多其他表单元素 --> ...
Bootstrap CSS布局：深度解析表单设计
Bootstrap框架为表单设计提供了强大的支持，包括基础样式、内联表单和横向表单等。 2. **表单元素** - `input`：基本的输入字段，用于文字、数字、日期等数据的输入。 - `textarea`：多行文本输入区域，适用于长...
Bootstrap横向表单
奋斗的日子最甜美，在科技的海洋里，永无止境。
04-03 1万+
Bootstrap横向表单 主要内容 在form上应用.form-horizontal 2.使用栅格系统 3.实际操作 操作 1、新建一个demo03.html，接着再打开demo03.html，将移动设备优和css文件先导入到头文件（粘贴过来就行了），保存一下。
内联表单
qq_19294809的博客
04-29 380
      内联表单         邮箱             密码                   记住密码         进入邮箱
Bootstrap4基础入门到精通
10-11
从Bootstrap的基础知识，如何安装，如何变通简易的调用讲起，逐步讲解Bootstrap中的CSS相关布局、布局组件如何调用；讲解Bootstrap相关的插件；同步实战代码和演练解说。
Bootstrap3 横向表单/水平表单
歪脖先生的博客
05-07 4300
横向表单 通过为表单添加.form-horizontal类，并联合使用 Bootstrap的栅格类，便可以将label标签和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加.row了。如： <formclass="form-horizontal"> <divclass="form-gro...
bootstrap 水平排列表单
ghostyusheng 's blog
12-30 1万+
水平排列的表单 通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。 水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几
Bootstrap表单介绍
Q
11-29 3565
Bootstrap来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。本文介绍一下Bootstrap的表单类型以及实现方法。Bootstrap 提供了下列类型的表单布局： - 垂直表单（默认） - 内联表单 - 水平表单 - 垂直或基本表单基本的表单结构是 Bootstrap 自带
Bootstrap三种表单布局的使用方法
热门推荐
fengsuiyingdong的专栏
05-17 2万+
Bootstrap提供了三种表单布局：垂直表单，内联表单和水平表单  创建垂直或基本表单：  •·向父 元素添加 role="form"。  •·把标签和控件放在一个带有 class .form-group 的 中。这是获取最佳间距所必需的。  •·向所有的文本元素 、 和 添加 class .form-control 名称
Bootstrap3 行内表单
歪脖先生的博客
05-07 2153
行内表单 为<form>元素添加.form-inline类，就可以创建一个表现为inline-block的行内表单。行内表单采用紧凑布局，它的所有控件都在一行内显示，标签和输入框使用左对齐方式。如： <formclass="form-inline"> <divclass="form-group"> <labelfor="...
实现表单横向滑动的效果
善守者
12-24 692
.thumbs-block { position:relative; /**/ overflow: hidden; background: #ccc; margin: 0 5px; width: 714px; height:142px; /**/ } CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left...
BootStrap表单全解析：基础、内联与水平表单
本文主要探讨了Bootstrap中关于表单的各种实现方式，包括基础表单、内联表单和水平表单，提供了详细的示例代码，对于理解和应用Bootstrap表单设计具有很高的参考价值。" Bootstrap表单是网页设计中不可或缺的部分，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值