表单和图片

Posted 2020-11-18 shyroke

一、表单

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标签中，使得布局更合理。