（三）表单和图片

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

一、表单

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>

结果如下图，注意：

这里用到了 col-sm 栅格系统，后面章节会重点讲解，而 control-label 表示和父元素样式同步。
input 标签不能直接写 col-sm-10 样式，必须外面加一层div。
control-label的文本采用右对齐方式，加载label标签中，使得布局更合理。

技术分享图片

（三）表单和图片

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

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

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行