Bootstarp 基础教程之表单部分实例代码,bootstarp基
分类:计算机教程

参考:BootStrap中的表单大全

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

参考: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="用户名">

          <!--在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"></button>
      <button class="btn btn-info"></button>
      <button class="btn btn-danger"></button>
      <button class="btn btn-default"></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=""></a>
    </div>
      <input type="text" class="form-control input-xs">
    </div>
  </div>
</div>

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

http://www.bkjia.com/Javascript/1191238.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1191238.htmlTechArticleBootstarp 基础教程之表单部分实例代码,bootstarp基础教程 参考:BootStrap中的表单大全 bootstrap 表单部分,具体代码如下所示: div class="conta...

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上正常-->

小图标的添加

本文由美洲杯赔率发布于计算机教程,转载请注明出处:Bootstarp 基础教程之表单部分实例代码,bootstarp基

上一篇:Javascript for in的缺陷总结 下一篇:没有了
猜你喜欢
热门排行
精彩图文
  • PHP编码转换男篮世界杯赔率
    PHP编码转换男篮世界杯赔率
    SELECT COLLATIONPROPERTY('Chinese_PRC_Stroke_CI_AI_KS_WS','CodePage') 男篮世界杯赔率,返回为936,即GBK编码。 936 简体中文GBK 950 繁体中文BIG5 437 美国/加拿大英语 932 日文
  • 用php随机生成福彩双色球号码的2种方法
    用php随机生成福彩双色球号码的2种方法
    不瞒您说,俺也是个双色球爱好者,经常买,但迟迟没有中过一等奖,哈哈。 这里为大家介绍用php随机生成福彩双色球号码的二种方法,供朋友们学习参考
  • JavaScript制作简易计算器(不用eval)
    JavaScript制作简易计算器(不用eval)
    本文实例为大家分享了js制作简易计算器的具体代码,供大家参考,具体内容如下 本文实例为大家分享了js简易计算器的具体代码,供大家参考,具体内容
  • 探讨如何在php168_cms中提取验证码
    探讨如何在php168_cms中提取验证码
    复制代码 代码如下: 复制代码 代码如下: ?php function yzImg($nmsg){  if (function_exists('imagecreatetruecolor')){   $imstr[0]["s"]=$nmsg[0];   $imstr[1]["s"]=$nmsg[1];   $imstr[2]["s
  • 浅析SVN常见问题及解决方法
    浅析SVN常见问题及解决方法
    问好(新加入的资源): --这说明该文件是项目中新增文件资源,新增资源可以是文件、图片、代码等。 LINK Address : http://blog.csdn.net/niu_hao/article/details/6774471 米