开发bootstrap的from表单事例

最新推荐文章于 2022-11-05 15:19:41 发布
最新推荐文章于 2022-11-05 15:19:41 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： js 文章标签： 开发bootstrap的from表单事例 bootstrap bootstrap开发 bootstrap的form表单开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y_f123/article/details/41862129
版权

<html lang="en">
<head>
    <title>form</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <script src="../file/jquery.js" type="text/javascript"></script>
    <link href="../book/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
   <form class="form-inline">
     <fieldset>
        <legend>用户登录</legend>
        <div class="form-group">
            <label>用户名：</label>
            <input type="text" class="form-control" placeholder="请输入您的用户名!" />
        </div>
        <div class="form-group">
            <label>密码：</label>
            <input type="password" class="form-control" placeholder="请输入您的密码!" />
        </div>
        <div class="checkbox">
           <label><input type="checkbox" />记住密码</label>
        </div>
        <input type="button" class="btn btn-default" value="登录" />
     </fieldset>
   </form>
  
</body>
</html>

效果图：

 

*****************************************************垂直表单***********************************************************************************

<html lang="en">
<head>
    <title>form</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <script src="../file/jquery.js" type="text/javascript"></script>
    <link href="../book/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
     <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">用户名：</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" placeholder="请输入您的用户名!" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">密码：</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" placeholder="请输入您的密码!" />
            </div>
        </div>
        <div class="form-group">
           <div class="col-sm-offset-2 col-sm-10">
              <div class="checkbox">
                 <label><input type="checkbox" />记住密码</label>
              </div>
           </div>
        </div>
        <div class="form-group">
           <div class="col-sm-offset-2 col-sm-10">
              <input type="button" class="btn btn-default" value="登录" />
           </div>
        </div>
   </form>
</body>
</html>

效果图：

 

 

 

菜刀2008
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何使用bootstrap制作form表单
lin123_00的博客
05-10 1279
Bootstrap可以轻松创建经常看到的表单类型，编码非常的简单，所以本篇文章我们就来看看使用bootstrap创建表单的方法。 打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新） 制作表单的方法 首先利用<form>标签设置表单，然后为表单的每个元素设置class =”form - group“（用“<div>”等标签设置你想要设置class =”form-group“的范围）。最后通过在<input>标签中..
bootstrap from必填_bootstrap 表单验证使用方法
weixin_36284062的博客
01-26 2543
前言：做Web开发的我们，表单验证是再常见不过的需求了。友好的错误提示能增加用户体验。博主搜索bootstrap表单验证，搜到的结果大部分都是文中的主题：bootstrapvalidator。今天就来看看它如何使用吧。一、源码及API地址介绍它之前，还是给出它的源码以及API的地址吧。二、代码以及效果展示1、初级用法来看bootstrapvalidator的描述：A jQuery form val...
形式化验证和功能验证VC Formal-synopsys芯片验证基础篇（六）
Paul 安的博客
11-06 7519
总共包括synopsys若干讲芯片相关知识。作为自己的记录专题，感兴趣点击链接看完整视频。 芯片验证方法学近十年的发展极大的帮助到了验证工作效率和质量的提升，但是基于传统激励机制的验证始终存在一些不容易克服的困难。近几年越来越多的工程师把眼光投向了形式化验证，对比探讨两种方法学的异同。
Bootstrap实现水平排列的表单
09-02
主要为大家详细介绍了Bootstrap实现水平排列的表单的相关代码，代码简洁，感兴趣的小伙伴们可以参考一下
BootStrap 动态表单效果
10-19
主要介绍了BootStrap 动态表单效果,实现代码分为js部分和html部分，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
BootStrap中的表单大全
09-01
主要介绍了BootStrap中的表单大全,包括基础表单，内联表单和水平表单等知识，本文介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下
Bootstrap表单制作代码
08-31
主要为大家详细介绍了BootStrap表单的制作代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap系列之表单（Forms）
老__L的博客
06-13 5190
表单控件样式、布局选项和用于创建各种表单的自定义组件的示例和使用指南。Bootstrap 表单控件通过类来扩展我们的表单样式。使用这些类可以选择使用它们的定制显示，以便在浏览器和设备之间实现更一致的呈现。确保在所有输入中使用适当的type属性(例如，用于电子邮件地址，用于数字信息)，以利用较新的输入控件，如电子邮件验证、数字选择等。这里有一个演示Bootstrap表单样式的快速示例。 文本表单控件，如、和都使用类进行样式化。包括一般外观、焦点状态、大小等样式。一定要探索我们的自定义表单以进一步样式化。 对
BootStrap--from 表单
weixin_30349597的博客
03-15 326
1 垂直表单(默认) 2 内联表单 3 水平表单 使用 class.sr-only，您可以隐藏内联表单的标签。 垂直或基本表单 基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤： 向父 <form> 元素添加role="form"。 把标签和控件放在一个带有 class.form-group的 ...
bootstrap form表单
qq_37538698的博客
04-10 1175
Bootstrap 表单 ： 1.垂直表单2.内联表单3.水平表单1.1 垂直表单 ： for : 与id的名称一致，属性规定label与那个字段绑定，并且当鼠标选中的时候有文本框变色效果 ； form-group : 取得最佳间距 ； 父级form表单中添加向父role = “form”向所有的文本元素 &lt;input&gt;、&lt;textarea&gt; 和 &lt;select&gt...
BootStrap--from表单模式：总结
weixin_33727510的博客
10-02 291
BootStrap--from表单模式 表单的种类网上很多我不多赘诉，我包表单的模式总结了一下放在一个网页文件里面、在附件里面：不能传html，改一下格式直接打开就好了 这里主要叙述一下样式什么的包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-loca...
bootstrap 免费登陆页面、登陆表单（共三款）
11-09
bootstrap-login-forms.zip bootstrap-login-forms.zip bootstrap 免费登陆页面、登陆表单（共三款）
BootStrap表单验证实例代码
10-20
主要介绍了bootstrap表单验证的实例代码，代码中包括引入的js文件，具体实现方法，大家参考本
bootstrap案例35个常用案例
01-15
收集了35个实用的bootstrap案例，轮播，表单设计等
【07】Bootstrap — Form表单
有心博客
09-04 261
基本实例<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid
清空easyui或bootstrap form表单
weixin_43802688的博客
06-17 1267
两种方式清空表单 基于bootstrap的页面 <form class="form-horizontal"> <div class="form-group"> <div class="col-sm-12"> <input type="text" class="form-...
Bootstrap——表格（基本实例、表头选项、条纹状表格、带边框的表格、无边框的表格、鼠标指针悬停、紧凑表格、状态类、响应式表格）
m0_69034993的博客
11-05 9159
状态类设置的是、或元素样式，使用.table-*来设置，可选值包括success、active、primary、secondary、danger、warning、info、light、dark等，同时状态类也适用于反转色调。Bootstrap中提供了一系列表格布局样式，利用该样式可以帮助开发者快速开发出美观的表格，作用于元素的表格样式如下表所示。上表中，.table是表格的一个基类，如果想要加其他的样式，都要在.table的基础上去添加。例：表格背景颜色示例。
Bootstrap Table API 中文版（完整翻译文档）
热门推荐
mengjavakaifa的博客
12-22 2万+
/* * *$('#table').bootstrapTable({}); *看网上有中文版的，但有些就是字面直接译过来了，而且有的就没有翻译，那就打算自己再翻译一遍，每一条会尽 *最大可能结合尽可能多资料翻译，如果发现译的内容比英文多，是添加了更详细的说明，表的名称，属性，类型， *默认值不翻译，例如："class"、"id"等不翻译。 *有错请提出，会及时改正，谢谢。 *Bootstrap t
angular.js实现列表orderby排序
菜刀居士的专栏
04-05 2万+
ng-app>     order by                          ng-controller="demoController">                                       编号             国家             名称              年龄           
bootstrap注册表单
最新发布
12-02
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css"> 注册 用户名 请输入用户名"> 密码 请输入密码"> 确认密码...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值