Bootstrap~表单Form

回到目录

在进行自己的后台改版时，大体布局都使用了bootstrap，剩下的表单部分没理由不去使用它，对于表单的美化和布局，bootstrap做的也是很不错的，有大气的边框，多功能的按钮及宏观的表单布局，一切都是那么的完整与完美！

aaarticlea/png;base64,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" alt="" />

普通表单

我们需要将表单元素包裹到form-group类里，一般以<div class="form-group">...</div>来进行存放，而在它内容表单元素名称一般放在label标签里，而input标签的类名为form-control，值得注意的是，你的checkbox和radio等元素需要写在自己的div里。

例如下面的表单

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <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>

运行之后的效果

aaarticlea/png;base64,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" alt="" />

水平排放的表单

需要你的表单元素需要水平排放，可以在表单上添加类.form-inline，这种表单一般在元素比较少时比较适用

例如

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

aaarticlea/png;base64,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" alt="" />

普通表单+元素水平排放

这种表单用的是最多的，在一般用户注册，填写资料时，经常可以见到如下的表单效果

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAxgAAADKCAIAAACpAXGKAAAM3ElEQVR4nO3dS27qSgKA4bunbKDXwWLQ2caZMWYLjJi1BFIcq4fBSEiHjIh0IyVKJRLpAS/bPJJTKV7O9+lKDYXtlHuSX1UO558PAACi/HPuCQAAXCshBQAQSUgBAEQSUgAAkYQUAEAkIQUAEElIAQBEElIAAJGEFABAJCEFABBJSAEARBJSAACRhNRRhBCKosiybAgAXL88z4uiCCHUfuMLqfRCCHd3d5PJ5PHx8V8A4Po9Pj5OJpMsy2otJaTSK4piMpk8Pz+HEN4AgOsXQnh+fp5MJkVRlH/pC6n0six7enp6f3+fz+fnngsAkMB8Pn9/f396esrzvDwupNIbDochBBUFAE0yn89DCMPhsDwopNIbDodvb2/nngUAkNjb25uQOjohBQCNJKROQUgBQCMJqVMQUgDQSELqFIQUADSSkDoFIQUAjSSkTkFIAUAjXXhI9ds321qdcZLLtvv118fy5ZC67/3e1rv/1g+/7/3uDmblFwBAGj8zpLZ/xAWF1De76eDFhRQApHQNIbUznJb90+m0FnXV7n98jMtvyofVC+yiV6R2h9Rs0P3dHQx6m1Wq+159xWo26O5YyLIiBQDHcuUhtVc5krZT6kpDavXZIqEWrxeBNaufe98rHy2kAOAoriGkdsbQ8pN2/2OzEtXurz/Yjq998XRxIbX7EanZoFtZZNr5unYlIQUAx3XlIbXsn/KbRVWVQ6p8kSsIqUNbe7P1YeXX5VPKKSakAOC4riGkDj0j1d86rBRS62emfkRILRNq+YEVKQA4viaHVGVtahlVzQ2pWiYJKQA4vmsIqS3t/tdWpHac3eiQWp+6/PO9Wj8JKQBIrNEhVTq/1RkvPig9kH6hIbX7cfMvPCNVOnn57QirLT8hBQBHceEh1RD+iRgAaCQhdQpCCgAaSUidgpACgEYSUqcgpACgkYTUKQgpAGgkIXUKQgoAGklInYKQAoBGElKnIKQAoJGE1ClkWfby8nLuWQAAib28vOR5Xh4RUumNRqPpdDqfz889EQAgmfl8Pp1Oi6IoDwqp9EIIt7e3f/78CSGcey4AQAIhhOl0ent7+/r6Wh4XUkcRQhiNRlmWDQGA65fneVEUtYr6EFIAANGEFABAJCEFABBJSAEARBJSAACRhBQAQCQhBQAQSUgBAEQSUgAAkYQUAEAkIQUAEElIAQBEElIAAJGEFABAJCEFABBJSB1FCKEoiizLhgDA9cvzvCiKEELtN76QSi+EcHd3N5lMHh8f/wUArt/j4+NkMsmyrNZSQiq9oigmk8nz83MI4Q0AuH4hhOfn58lkUhRF+Ze+kEovy7Knp6f39/f5fH7uuQAACczn8/f396enpzzPy+NCKr3hcBhCUFEA0CTz+TyEMBwOy4NCKr3hcPj29nbuWQAAib29vQmpoxNSANBIQuoUhBQANJKQOgUhBQCNJKROQUgBQCMJqVMQUgDQSELqFIQUADTS90Oq376pa/cTzvDY+u2bm5tWZ3zMn/HlkLrv/a7r3R9zZt9x37vk2QHACRwlpI4eJildXEhV2uS+9/t3dzA71sS+RUgB8OMlCqlSiCzCajlQqazSQeNOa+cC1o7xxdDymMWb1YUqP7p86tZParXbrdInm2Pb/csOqY/ZoLsqqdmgu2ulqjS8Sa6twdmguzplNuiuTt999cpluoNBrzS6XjNbjAspAH60o4bU1mLVrrz6dLxcUssjSm8Wp+7fX6yk2U2rM66NbJXXMXwzpHr39Y/ue6uUKg+vX+8a3JTUfa/b7a6zqDuYVdqqsgo2G3TrebZ6tygqIQXAj3ayrb3FYe3+R31ZaePg+LrM2u324jqb4WUarc8sL4qtsmm97LUcqHbWxYbUvq29nc20/zLLwVU09Xq9SlyVlquq55fLaeuytvYA+PGOEVK1KikfUFlXqq0dfTLe7n+MO62bVqffad20OuP1aCXSFkqLWFt1Vj/44rb2qmoVVT5gszu39Vj6zsH7RT3d97qD+0G3O5itRtaNVT59vVJV2UMsH1bPLwD4cdJv7W3s2ENb9Uv9o10POpXGl83UX6xFLf5n01ENC6k9bXJfflJp99LVVnhVB2eDbncwmw26vftFQi0GPoQUAEQ6YkhVEqa6obZ1/o4PKuP99vKB8dUO3+Lp8T37c9tbe9vPuV/J1l75k3LE7D6wnjq1wdmg2xss4mn5FHnpUai9W3ubD2ztAUDVMVek9j0Bvm+l6sAK1upae557+vRh8/L8ruth812fLDfuuoPZ9vj+weVF1n991+12q1fc87B5fcdw+d7D5gBw1JAq9U2rM97xNQbbFbNvvLaOVPmKhR2nbn/9QXV+m2Nbnc6VbO2VH49a7M2t/whvx3ci7BwsX7+STuuBXd+isP1XhL7+AAAW/BMxp+CfiAGARhJSpyCkAKCRhNQpCCkAaCQhdQpCCgAaSUidgpACgEYSUqcgpACgkYTUKQgpAGgkIXUKQgoAGklInUKWZS8vL+eeBQCQ2MvLS57n5REhld5oNJpOp/P5/NwTAQCSmc/n0+m0KIryoJBKL4Rwe3v758+fEMK55wIAJBBCmE6nt7e3r6+v5XEhdRQhhNFolGXZEAC4fnmeF0VRq6gPIQUAEE1IAQBEElIAAJGEFABAJCEFABBJSAEARBJSAACRhBQAQCQhBQAQSUgBAEQSUgAAkYQUAEAkIQUAEElIAQBEElIAAJGEFABAJCEFABBJSAEARBJSAACRhBQAQCQhBQAQSUgBAEQSUgAAkYQUAEAkIQUAEElIAQBEElLp/fqCc88RAEhASKX369ev/xz0v+y/+88ed1o3da3O+GSzr+u3b27a/bP9eAC4ZEIqvUVIHTjg05Cqhsu40zpjSgkpANhLSKWXOqQ+PvrtUkmVlqzWg4vW6rSX4+3+R7/0+lsn9ts3N+3O+tTy1HZd8GPcaa0vWM2/6EkCwKUSUukdM6Qqq1ObN4v8WJy2qJPF6+oRUSeWRxeH14+ovhl3WnsaKHqSAHCphFR6qUOq316XSX2fbXVwKXCqB61eR59YP/OzCx7on+hJAsClElLpfT+k6lY1seuzm1ZnXK2X8kbgsk2iT6xtK647ae8FD9RP9CQB4FIJqfQSrkj121sPEO3dNfusUaJOPBRS+9ed4kNKNwFwVYRUemm39iotte9P6D7toegTv7q1t3f+CSYJAJdKSKV3jGekKk97VwpkvZ92uIeiT6w8bF56XGvPBb8TUnuvCQAXSkild5S/2qu1VO0Jos8bJfrEfvum1emvTq2Eza4Lfiuk9l0TAC6UkErv169f/8v+e/i/c88RAEhASAEARBJSAACRhBQAQCQhBQAQSUgBAEQSUgAAkYQUAEAkIQUAEElIAQBEElIAAJGEFABAJCEFABBJSAEARBJSAACRhBQAQCQhBQAQSUgBAEQSUgAAkYQUAEAkIXUUIYSiKLIsG16nPM+LogghnPv/SAC4aEIqvRDC3d3ddDq93hAJITw8PGRZdr23AAAnIKTSK4piOp2eexYJTKfToijOPQsAuFxCKr3GLOSEEPI8P/csAOByCan0hsPhuaeQTJPuBQCSE1LpNSk+mnQvAJCckEqvSfHRpHsBgOSEVHpNio8m3QsAJCek0mtSfDTpXgAgOSGVXpPio0n3AgDJCan0mhQfTboXAEhOSKXXpPho0r0AQHJCKr2/io9++2aj3S8Ntzrjb04kwUWEFAAcIKTS+3p89NvleBp3WuW3F0FIAcABQiq9L8fH1orRJqzKH60XrVqdTvWAfqe1/mj8sWV9ka8c/M17AYCfSEil9+X4OLAEVW6gVfiMFyW0DqnNXmDpoL0X+ezgb94LAPxEQiq9v4mP0iNSlbhZNVB10apUXtVdweq7+kW+dPD37wUAfhwhlV5UfKyKarNs1OqMP8adVqV5Knt/QgoAzkxIpRcfH+NOq/xUk5ACgMsmpNL7anzsCJr1kK09ALgCQiq9v3vYfG8nLT7YLFJVnxkXUgBwfkIqvfgv5NxE1f6vP1gOCykAOD8hld4R4yPJF57/DSEFAAcIqfRSxkflS5/K23wnIqQA4AAhlV7a+Bivv5D8r76SPBEhBQAHCKn0mhQfTboXAEhOSKXXpPho0r0AQHJCKr0mxUeT7gUAkhNS6TUpPpp0LwCQnJBKr0nx0aR7AYDkhFR6WZaFEM49iwRCCHmen3sWAHC5hFR6o9Ho4eHh3LNI4OHhoSiKc88CAC6XkEovhHB7ezudTq93XSqE8PDwcHt7+/r6eu65AMDlElJHEUIYjUZZlg2vU57nRVGoKAA4TEgBAEQSUgAAkYQUAEAkIQUAEElIAQBEElIAAJGEFABAJCEFABBJSAEARBJSAACRhBQAQCQhBQAQSUgBAEQSUgAAkYQUAECk/wMJQ68H4b1L8QAAAABJRU5ErkJggg==" alt="" />

实现这种表单使用了.form-horizontal类，每行元素被包裹在 <div class="form-group">...</div>即可

form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

我们通过代码也可以看到，在进行表单布局时，也可以用col-sm和col-sm-offset进行栅格布局！

回到目录