Bootstrap全局CSS样式之表单

2024-04-28 09:43•java•阅读 3627

基本实例

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control"  placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control"  placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" >
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

不要将表单组和输入框组混合使用

不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h2 class="text-center">登录页面</h2>
                <form action="">
                    <p class="has-error">username:<input type="text" class="form-control"></p>
                    <p class="has-success">password:<input type="text" class="form-control"></p>
                    <p>
                        <select name=""  class="form-control">
                            <option value="">111</option>
                            <option value="">222</option>
                            <option value="">333</option>
                        </select>
                    </p>
                    <p>
                        <input type="checkbox">111
                        <input type="checkbox">222
                        <input type="radio">333
                    </p>
                    <textarea name=""  cols="30" rows="10" class="form-control"></textarea>
                    <input type="submit" class="form-control">
                </form>
            </div>
        </div>
    </div>

<!--    针对表单标签，加样式就用form-control；class="form-control"-->

<!--    checkbox和radio我们一般不会给它加form-control，直接使用原生的即可-->

<!--    针对报错信息，可以加has-error(input的父标签加)-->
</body>
</html>

上一篇 »【03】全局 CSS 样式
下一篇 »表格布局----基于bootstrap样式布局