蚂蚁论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 46|回复: 0

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

[复制链接]

1923

主题

1

好友

1591

积分

管理员

Rank: 64Rank: 64Rank: 64Rank: 64

  • TA的每日心情
    奋斗
    2016-1-22 16:23
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    荣誉管理 论坛元老 热心会员 活跃会员 最佳新人 灌水之王

    发表于 6 天前 |显示全部楼层
    Bootstarp 基础教程之表单部分实例代码
    参考:BootStrap中的表单大全
    bootstrap 表单部分,具体代码如下所示:


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

    inline表单与label隐藏


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

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


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

    小图标的添加


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

    一堆按钮组件


    lt;div class="container"gt;
      lt;div class="btn-toolbar"gt;
        lt;div class="btn-group"gt;
          lt;button class="btn btn-success"gt;lt;span class="glyphicon glyphicon-star"gt;lt;/spangt;lt;/buttongt;
          lt;button class="btn btn-info"gt;lt;span class="glyphicon glyphicon-star"gt;lt;/spangt;lt;/buttongt;
          lt;button class="btn btn-danger"gt;lt;span class="glyphicon glyphicon-star"gt;lt;/spangt;lt;/buttongt;
          lt;button class="btn btn-default"gt;lt;span class="glyphicon glyphicon-star"gt;lt;/spangt;lt;/buttongt;
        lt;/divgt;
      lt;/divgt;
    lt;/divgt;

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


    lt;div class="col-md-4 col-md-offset-2"gt;
      lt;div class="input-group input-lg"gt;
        lt;div class="input-group-addon"gt;
          lt;a href=""gt;lt;span class="glyphicon glyphicon-star"gt;lt;/spangt;lt;/agt;
        lt;/divgt;
          lt;input type="text" class="form-control input-xs"gt;
        lt;/divgt;
      lt;/divgt;
    lt;/divgt;

    以上所述是小编给大家介绍的Bootstarp 基础教程之表单部分,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。
    您需要登录后才可以回帖 登录 | 立即注册

    关闭

    蚂蚁站长论坛推荐上一条 /1 下一条

    QQ|Archiver|手机版|广告服务|蚂蚁站长-站长之家 ( 黔ICP备16008478号-1  

    GMT+8, 2017-10-19 07:42

    Powered by 站长论坛

    © 2007-2013 Jzant.com Inc.

    回顶部