码迷,mamicode.com
首页 > 其他好文 > 详细

(三)表单和图片

时间:2018-06-14 01:04:44      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:put   表示   style   val   nta   不能   元素   png   添加   

一、表单

1. 基本实例

  • 单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input><textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
  <form>
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" placeholder="请输入用户名"  class="form-control" >
        </div>

        <div class="form-group">
            <label for="passwd">密码</label>
            <input type="text" id="passwd" placeholder="请输入密码"  class="form-control" >
        </div>

        <div class="form-group">
            <label for="email">邮件地址</label>
            <input type="email" class="form-control" id="email" placeholder="请输入邮箱">
        </div>
        <div class="form-group">
            <input type="submit" value="提交"  class="btn btn-primary">
        </div>
    </form>

结果如下图,注意:

  1. label中的for属性作用: 当鼠标点击该label时,鼠标光标会移动到id等于该for的值的元素中。

  2.将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

技术分享图片

 

2.内联表单

  • 为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。
  • 修改上述例子的代码,只修改如下部分:
 <form class="form-inline">
  • 结果如下图。

技术分享图片

  • 请注意:

技术分享图片

 

 3. 水平排列的表单

  •  通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了。
<form class="form-horizontal">
        <div class="form-group">
            <label for="username" class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-10 " >
                <input type="text" id="username" placeholder="请输入用户名"  class="form-control" >
            </div>
        </div>

        <div class="form-group">
            <label for="passwd" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10 " >
                <input type="text" id="passwd" placeholder="请输入密码"  class="form-control" >
            </div>
        </div>

        <div class="form-group">
            <label for="email" class="col-sm-2 control-label">邮件地址</label>
            <div class="col-sm-10 " >
               <input type="email" class="form-control" id="email" 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="submit" value="提交"  class="btn btn-primary">
            </div>
        </div>

    </form>
  • 结果如下图,注意:
  1. 这里用到了 col-sm 栅格系统,后面章节会重点讲解,而 control-label 表示和 父元素样式同步。

  2. input 标签不能直接写 col-sm-10 样式,必须外面加一层div。
  3. control-label的文本采用右对齐方式,加载label标签中,使得布局更合理。

技术分享图片

 

 

 

 

 

(三)表单和图片

标签:put   表示   style   val   nta   不能   元素   png   添加   

原文地址:https://www.cnblogs.com/shyroke/p/9180843.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!