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

bootstrap 表单部分，具体代码如下所示：

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

inline表单与label隐藏

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

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

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

小图标的添加

p class="container">
      form action="#" method="post" class="form-horizontal">
        !--form-horizontal让表单初始化-->
        fieldset>
          legend>
    用户登陆/legend>
          p class="form-group has-feedback has-success">
            !--在项目的p外包围class加has-feedback-->
            label class="col-xs-3 control-label">
    用户名：/label>
            p 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-->
            /p>
          /p>
      /form>
    /p>
    

一堆按钮组件

p class="container">
      p class="btn-toolbar">
        p 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>
        /p>
      /p>
    /p>
    

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

搜索框

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

总结：以上所述就是给大家介绍的Bootstarp 基础教程之表单部分的全部内容，希望能对大家的学习有所帮助。

相关推荐：

Bootstrap是什么？Bootstrap的简单介绍

Bootstrap表单布局有哪几种方式？Bootstrap表单布局的创建方法

Bootstrap中文手册

以上就是bootstrap 基础教程之表单部分实例代码的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！