Bootstarp 基础教程之表单部分实例代码


Posted in Javascript onFebruary 03, 2017

参考:BootStrap中的表单大全

bootstrap 表单部分,具体代码如下所示:

<div class="container">
  <form action="#" method="post">
    <fieldset>
      <legend>用户登陆</legend>
      <div class="form-group">
        <label>用户名:</label>
        <input type="text" class="form-control" name="name" placeholder="用户名">
      </div>
      <div class="form-group">
        <label>密码:</label>
        <input type="password" class="form-control" name="pwd" placeholder="密码">
        <!--form-control代表的是占满容器-->
      </div>
      <div class="checkbox">
        <label><input type="checkbox">记住密码</label>
      </div>
      <!--多选框必须这么写 不然会造成选框与文本重叠的问题-->
      <div class="form-group">
        <button type="submit" class="btn btn-default">提交</button>
      </div>
    </fieldset>
  </form>
</div>

inline表单与label隐藏

<div class="container">
  <form action="#" method="post" class="form-inline">
    <!--form-inline让表单横向放置-->
    <fieldset>
      <legend>用户登陆</legend>
      <div class="form-group">
        <label class="sr-only">用户名:</label>
        <!--sr-only让label隐藏-->
        <input type="text" class="form-control" name="name" placeholder="用户名">
      </div>
      <div class="form-group">
        <label>密码:</label>
        <input type="password" class="form-control" name="pwd" placeholder="密码">
        <!--form-control代表的是占满容器-->
      </div>
      <div class="checkbox">
        <label><input type="checkbox">记住密码</label>
      </div>
      <!--多选框必须这么写 不然会造成选框与文本重叠的问题-->
      <div class="form-group">
        <button type="submit" class="btn btn-default">提交</button>
      </div>
    </fieldset>
  </form>
</div>

把label和input放在同一行内的方法

<div class="container">
  <form action="#" method="post" class="form-horizontal">
    <!--form-horizontal让表单初始化-->
    <fieldset>
      <legend>用户登陆</legend>
      <div class="form-group">
        <label class="col-xs-3 control-label">用户名:</label>
        <!--借助栅格系统设置label的宽度-->
        <div class="col-xs-9">
          <input type="text" class="form-control" name="name" placeholder="用户名">
        </div>
        <!--用div设置栅格并包裹input-->
      </div>
  </form>
</div>
<!--注意!把label和input放在同一行在768分辨率一下是有问题的 在md和lg上正常-->

小图标的添加

<div class="container">
  <form action="#" method="post" class="form-horizontal">
    <!--form-horizontal让表单初始化-->
    <fieldset>
      <legend>用户登陆</legend>
      <div class="form-group has-feedback has-success">
        <!--在项目的div外包围class加has-feedback-->
        <label class="col-xs-3 control-label">用户名:</label>
        <div class="col-xs-9">
          <input type="text" class="form-control" name="name" placeholder="用户名">
          <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
          <!--在input之下添加一个span 记得加form-c-f-->
        </div>
      </div>
  </form>
</div>

一堆按钮组件

<div class="container">
  <div class="btn-toolbar">
    <div class="btn-group">
      <button class="btn btn-success"><span class="glyphicon glyphicon-star"></span></button>
      <button class="btn btn-info"><span class="glyphicon glyphicon-star"></span></button>
      <button class="btn btn-danger"><span class="glyphicon glyphicon-star"></span></button>
      <button class="btn btn-default"><span class="glyphicon glyphicon-star"></span></button>
    </div>
  </div>
</div>

不要强行去做一个按钮分离 因为这是一组 中间的按钮不是圆角的

搜索框

<div class="col-md-4 col-md-offset-2">
  <div class="input-group input-lg">
    <div class="input-group-addon">
      <a href=""><span class="glyphicon glyphicon-star"></span></a>
    </div>
      <input type="text" class="form-control input-xs">
    </div>
  </div>
</div>

以上所述是小编给大家介绍的Bootstarp 基础教程之表单部分,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用 JSON 处理缓存
Apr 27 Javascript
默认让页面的第一个控件选中的javascript代码
Dec 26 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
js 模仿锚点定位的实现方法
Nov 19 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
vue.js 实现点击展开收起动画效果
Jul 07 Javascript
javascript判断回文数详解及实现代码
Feb 03 #Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 #Javascript
JavaScript中for循环的几种写法与效率总结
Feb 03 #Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
Feb 03 #Javascript
漂亮实用的页面loading(加载)封装代码
Feb 03 #Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 #Javascript
JavaScript数组复制详解
Feb 02 #Javascript
You might like
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
PHP生成Flash动画的实现代码
2010/03/12 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
javascript的BOM汇总
2015/07/16 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
python基础教程之对象和类的实际运用
2014/08/29 Python
python版本的读写锁操作方法
2016/04/25 Python
python基础教程之匿名函数lambda
2017/01/17 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
python 获取图片分辨率的方法
2019/01/08 Python
python交换两个变量的值方法
2019/01/12 Python
【python】matplotlib动态显示详解
2019/04/11 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
自荐信的格式
2014/03/10 职场文书
运动会400米加油稿(8篇)
2014/09/22 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
妈妈别哭观后感
2015/06/08 职场文书
三十年同学聚会感言
2015/07/30 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技