回到目录

在进行自己的后台改版时,大体布局都使用了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,iVBORw0KGgoAAAANSUhEUgAAA0AAAAE1CAIAAABBcRdOAAAVTElEQVR4nO3dzU7jyMKA4bknbmAuole5jWEdzQX0rlezi8SOXS8Rq+yOBBImOkswEtKEFS2dlrrVpqXkLJI4Zbvs/JAEKjyPRt8HTrliwpF4VRWn/5gCAJCUP976AgAA2IyAAwBIjIADAEiMgAMASIyAAwBITEfADfsnTb3BwyufcTZtf1j/etup4lfU8RAAQNoOH3DNpxBwAAAbWBVw0Qaad9dg0JtVXX84nT6E34TD6uW33gpc/Nxp8Dwn/WHtCtsemh3v9fu9cLbl6NoVhA+Ej7QdBwA4rFcEXKswzpoZtk7AtZ1baagtH+oNHmI/weIH7b7syAkAAAe24RbqrFrmj/SH02Ud9YflA820aYu2dbZQgzHz55qPn383e7aOh6qXuDxQX7oLnqL5E7QdBwA4uFcE3LyHwm+amRNOsmnANc6tDw/WCDseal5VfAWxEqfVa+44DgBwaK95D9ywMSxIpciW5toB13buIQKu+eyrjgMAHNa+Aq4STZX9zdUB13ruq7ZQg59k7f3Q7vfoWYUDAN7Eph8jctIfrrcCFzl77RW41nNfcxNDpdciz1AJwcZTty4oAgAc2t4CLji/N3gIbhNY6z1wLedOw5LqDQZtHyNSfSi+4LbGB5WcRNbtIicAAByUf0oLACAxAg4AIDECDgAgMQIOACAxAg4AIDECDgAgMQIOACAxAg4AIDECDgAgMQIOACAxXQFXFEWe51mWXQMAcBCj0SjP86Iotgm4oihub28fHx+/ffv2PwAADuLbt2+Pj49ZlnU0XGvA5Xn++Pj448ePoiheAAA4iKIofvz48fj4mOf5xgGXZdn3799///49mUzaxgAAsFuTyeT379/fv38fjUZtY1oD7vr6uigK9QYAcGCTyaQoiuvr67YBXQH38vKyn6sCAKDLy8uLgAMASImAAwBIjIADAEiMgAMASIyAAwBIjIADAEjMvgPu7vKfpsu7ra41mPP86jn8AgDgAzlEwL2y1zonF3AAwIfzdgH3fHX+z/nV1eVyVe7usr5C93x1Hlm4swIHAHxobxtwi8dm6Tb7ehZ2z/Vz7y7D0QIOAPi43uI9cMtQCxfVol/XZhJwAABvvoX6XA4Lvw5PCRNQwAEAvOuAm6fb/AErcAAA0+n0XQdcLc8EHADAdDp97wFXnjq/HbXWbQIOAPiI3uSDfP+5vFvrPXDByfNPGVlsrQo4AODj8k9pAQAkRsABACRGwAEAJEbAAQAkRsABACRGwAEAJEbAAQAkRsABACRmy4DLsuznz5/7uSQAALr8/PlzNBq1PdoacPf39+PxeDKZ7OeqAACIm0wm4/E4z/O2Aa0BVxTFzc3Nv//+WxTFfq4NAIC6oijG4/HNzc2vX7/axrQG3Oz8+/v7LMuuAQA4iNFolOd5R72tCDgAAN4hAQcAkBgBBwCQGAEHAJAYAQcAkBgBBwCQGAEHAJAYAQcAkBgBBwCQGAEHAJAYAQcAkBgBBwCQGAEHAJAYAQcAkBgBBwCQGAEHAJAYAQcAkBgBBwCQGAEHAJAYAQcAkJiOgBv2T+r6w8Nd2asN+ycnJ73Bw1tfBwDAbm0WcEkFkYADAI7TqoALAmgWdPMDlboLBj0MetEFu8jx2aH5mNk3i4kqTx2e2nimXr/fCx5Zju0PBRwAcJy2C7jG4lws61YeDwtuPiL4ZnZq+z5uJQlPeoOH2pFG8QEAHIfXb6HOhvWH0/oy2lLn8bII+/3+bJ7l4XmSlWeGi4CLXCuX+eYHqn0n4ACAo7NRwNVqKBxQWUerrZWtON4fTh8GvZPeYDjonfQGD+XRShzOBIt2jSqsD7aFCgAcpw22UJcie5WLbqo/FHsjW3B83mrD2drb7P8t+03AAQA0bRNwlXSqblw2zo88UDk+7M9vRFjspM7uSmjZB21uoTbvn7CFCgAcua1W4NruLGhbmetYsVvM1fK+tpU3MYTX5yYGAOBD2Crggq7qDR4iHwfSrKe247V1s8pHlURObX6MSPX6lmN7g4EtVADgKPmntAAAEiPgAAASI+AAABIj4AAAEiPgAAASI+AAABIj4AAAEiPgAAASI+AAABIj4AAAEtMVcEVR5HmeZdk1AAAHMRqN8jwvimKbgCuK4vb29vHx8du3b/8DAOAgvn379vj4mGVZR8O1Blye54+Pjz9+/CiK4gUAgIMoiuLHjx+Pj495nm8ccFmWff/+/ffv35PJpG0MAAC7NZlMfv/+/f3799Fo1DamNeCur6+LolBvAAAHNplMiqK4vr5uG9AVcC8vL/u5KgAAury8vAg4AICUCDgAgMQIOACAxAg4AIDECDgAgMQIOACAxOw74O4u/6m7vNvqSg/g7vI9Xx0AwMwhAq7SRHeX//xzfvW8yTUejIADAFJw8ICbPl+dLwru+eo8tjIXHF6mXuPg89X54pTnq/PF6fHZK9OcX11dBkfLNcLZcQEHALx3bxNwl3f1h+4uFwkXHi6/jh1cFtzd5fn5eZlj51fPlaarrPo9X53Xs3Dx3azkBBwA8N69my3UaKu1TzM/uIi1y8vLStQFy3PV88Nia0xrCxUASMHhb2Ko1Vs4YLkL2rjdIXrwblZtd5fnV3dX5+dXz4sjZduFp5crc5W92nBYPfsAAN6jw2+hVh5aBl10qa4RfNWDz1fn51fPz1fnl3ezdJsdmAo4AOCYvV3A1RorPrCeWLWDz1fnl1ezaJvfnRC81a11C3X5gC1UACBBbxpw5SPzDdLzq+fm8faD80nKu0nPz8+rM7bcxFDfmZ1/7yYGACANb7iFGr79bbYHWt5UGvlskejBcP5KspUHYp9G0rwr1seIAAAJ8U9pAQAkRsABACRGwAEAJEbAAQAkRsABACRGwAEAJEbAAQAkRsABACRmy4DLsuznz5/7uSQAALr8/PlzNBq1PdoacPf39+PxeDKZ7OeqAACIm0wm4/E4z/O2Aa0BVxTFzc3Nv//+WxTFfq4NAIC6oijG4/HNzc2vX7/axrQG3Oz8+/v7LMuuAQA4iNFolOd5R72tCDgAAN4hAQcAkBgBBwCQGAEHAJAYAQcAkBgBBwCQGAEHAJAYAQcAkBgBBwCQGAEHAJAYAQcAkBgBBwCQGAEHAJAYAQcAkBgBBwCQGAEHAJAYAQcAkBgBBwCQGAEHAJAYAQcAkJiOgHsY9E6a+sPpdDrsl19Wvl7TFqdsZtjf5+wAAG9qu4AL7b3GNvXuLggAYKdWBlw0hLpW4MLua6mo8JTFs8yOVU5a46Fwwt7goRadIg4AOEY7Drhlay30Bg+dp8fW+eaTxR6aTyfgAICPa8Mt1EqnNQJudsYy2doSMBJw85Nmj1QqrZxvHofBMzUDrj47AMDx2WnANdff4mtwzYArx4QpVu+/YKiAAwA+rp1uoW4fcNEUE3AAABE7Dbj6FmqbjQKuYws1ugsr4ACAI7f3mxhiPbdZwEVn63iiyE2rAABHZPcfI1JJq/hq3IZbqOWMldnCTqtsoS7Db/VaIABAet7zP6XVUZAAAB+XgAMASIyAAwBIzHsOOAAAIgQcAEBiBBwAQGIEHABAYgQcAEBiBBwAQGIEHABAYo4z4P7888+3vgQAgH3pCrj/Zv9J8b+///5bwAEAR0zAAQAkRsABACRGwAEAJGY3AffHH39scTA6QMABAHTbPuBq+dWssWirvZ+Au/3y6dOX25ZHTr8G35ycfp1Op19PT2Ljy2m+np7ExJ/j62nbI8GA5UXMj1QPAAAf1atW4LprrDvg/mh4NwEXxlrZbysDLhzbmCb+HO1FFrkAAQcAzO1gC7XZYeH/jQZcdEFuzwF3++VTdIksvlo2z6XWk06/1tfcFpW1yKxgkW2Np65eQKXf5l8JOABgbmdbqB2V1l1sO2+4HazALYRLaKtX4MpxQdHVx8aPNmdYVltrPwIAH9XOtlC7A+6Q/70y4BbNVG+kdQKuPPf0tLaiVw5uzFu/jtly3acvt7Mvw4CUbQDAdLqrLdR1Aq75prfou9/CI21fbxFw6+5iLvc/T792nzMfWR1UTaz5Y+HBRobVDtx++XRy+mXWdNW0E3AAwNwuP0ZkZcCtuYy3j4Cra1tnWz68fKT8prYIt5ijsdDW1VrVRbjGst7X09Ov8cVBAQcAzO3lLtSVAbfXDxNZGXCzhppVUksWhYcjN6IGFVbGVtt6XXQf9dOX2477UOdztr0BLjorAPBxfLSAu/3yaV5N4Qe4ta+h3X75FLk5NDgltlq2crEssrdae9gKHADQajd3oa6zZ/r2Aff1NIymsJIqmTYt18aqJ0zDm0LDU+fvV1t7tezr6cnJyadPn1pX0tYNuBX7wADAkTpcwHUP3nfANf/pg0YlLRbnZvXW+Tm7XdNMWxfLFpEXPLY4tOLSopMu9nE7Py4YADhCOwi49ZfWajclrFN7u1yBq2r/GJHwX1Zot7xLtRFr9daaD+zIrOoIK3AAQJfX3oUa7bDm54NE7yHt+DCRAwQcAECidvMxIu/qPwEHABw3AQcAkJiugPs7WQIOADhirQH3Z+IO+SICABxS1wocAADvkIADAEiMgAMASIyAAwBIjIADAEiMgAMASIyAAwBIjIADAEiMgAMASIyA+7ienp4OdhYAsEMdAZed/dV0lh3owrKzvz5frJsK2Vn8yjaaZOVsr595o9nWuYytL+np4vMWP0DbWZteKgDwKisC7u3+Kgs4AQcAxG0TcMGf8aeLz4tBTxefmyt1s6EXZ8uj2Vl1RHb21+eLrDy3fMIwR4Kp49GRnf3119nFVpOUh5cHgx989mjkVVgxc+21a8zYfMaWgFv+UNGLjk7S9pLGTm+/qsZv+aJx1taX+nTxufxfxezoyl8xALC03Qrc4qGni8/zP7eVwdnZ4o98GECzdFvWXlkbtY4oRy//tFdaKfIHfq1JyuvLzspKKC87nDj46bpegc7La7wejWcJv2kNuLBzw5zqnKTt1QiFk3RMWPstd63AbXKpTxefaz238lcMACxt+B64sEnOsuyspW8qxVIJp8bXbWtVixypZ+TTxefmk66apH7SYkC8UWdHgw6J/4Tdlxc80PazVgav2kLdYJL25b/qWbH2nlZerPpveb0t1NWXWp1nrV8xALC09Xvgois7YfM1/1KHmdJorGDaRRl9vniqbcy2bbKtmKQRSPMBnet53Zt5qy+vmTHtgzcIuDUmaXs1QsuDna9w7be8WcC1z1xJtPV+xQDA0tYBV9k1K6Ona2dy64Bb/cd89wE3X5+rhMxC8FjX5c2nWb6M7YM3DLgVk2wecK2vcO23vHnAxWduBJxeA4BNbBlws7dFVd4CF/4N3izgNtpCXedSd7KFWr/6xpiVl1e+tT+2hxydreOHat2XbE7yyi3UyqDKb/m1W6iVZ4+MBwDWs1XALf/+xjpmvlpVltPqgIu9/70cXH3De/ydaetN0nUTQ+2dX5G5Gs+4+vLmr0R1CzI2eJOAWz1J26sRqt/EEJmw+VveNOBaL7UW1Ov8igGApU0/yLe6KdgIsfqQNVfgzprvOgsHhxuY7TlVfnDGyknqG4zLndHqtS2+iW+zrnF5kTcKRgdvFHArJ2l7SSuqcRmZMPpbbiTpdpfavE0h/hpGXxcA4M3/KS37ZzvnJQWAIyfgjo+XFACOnIA7Pl5SADhybx5wAABsRsABACRGwAEAJEbAAQAkRsABACRGwAEAJEbAAQAkRsABACRGwAEAJEbAAQAkRsABACRGwAEAJEbAAQAkRsABACRGwAEAJEbAAQAkRsABACRGwAEAJEbAAQAkRsABACRGwAEAJKY14P5ewyEvNCEPDw9vfQkAwDHrCrg/O/03+8+qyYf9k6Xe4CE83h++8sp3MsnOPQx64U8KALB7KwKu48wVAfcw6FUCa9g/Kb8XcAAA29tTwMU6ZthfLMMN+ycn/cGg11ybm3Vfx+HlwSDgZo/Wam52CYPFImB/uFwQXI5sebrGRI0x1XycfxeMfH9pCQAcjf0E3Ip1qFlJBctx87GV04JvyloKBywO1pf6wmtYPBA+4XKOtqdrzLKYPbjUaMCt/skBAF5vPwG3YnuzpX7qZz0Meif9Ydtss6NBU9U00qv+ddvT1ScJj7Vcq4ADAA7oHQVcsAFZufWhpYnKDdGWXqqcNuxXvq7td0bvtGicV5lUwAEAb+aQW6jlx2u0B1ysfToCbr6QFi2mdQJuZWoJOADg/TngTQzLPc01t1AbA+JHO9691hVwa93GagsVAHh/9vsxIrXPfot/jEi1fqqhFdy1Wo5oThJ9I9zKgGt9usaPEbmJITwe3i4h4ACAvdtbwE2n636Qb+W78J1pwRnLw+XIymmR+lodcO1PV9H2USPBm/CGy66cj/YxIgDA3nQF3H+z/3T/d8gLBQBgxj9mDwCQGAEHAJAYAQcAkBgBBwCQGAEHAJAYAQcAkBgBBwCQGAEHAJAYAQcAkBgBBwCQGAEHAJAYAQcAkBgBBwCQGAEHAJCYroAriiLP8yzLrtM0Go3yPC+K4mCvJgDAAbQGXFEUt7e34/E43QAqiuLp6SnLsnR/BACAptaAy/N8PB4f8lL2ZDwe53n+1lcBALAzrQF3NAtXRVGMRqO3vgoAgJ1pDbjr6+tDXsdeHdPPAgAg4AAAEiPgAAASI+AAABIj4AAAEiPgAAASI+AAABKTcMA9PDysOfL9/ywAAOvbTcAN+ydL/eE6w1ePip/YGzxMp9OHQW/+1ToEHABwTHYQcNUcexj0VtbZ1gFXEnAAwMf1+oArV8WCA/M8q4Za7fhg0Kst2c2qbNBfHh72q0Nmz/VQnrlmBgo4AOCYvD7gOpbcugKufGR5/izMmkOWy222UAEAdvMeuOAtcJWq6lyBGzaGVVIwHFN+LeAAAHZ8F+qi5JY7nm0BF9bXosYqVRaOEXAAAEt7+BiRyo6ngAMA2LFXB1zkjtKwtzbdQhVwAAAr7OgmhiCmgneyhW9qa7tDYTrsn8SqTMABAMTt4YN8G/cxzI8OB71wC3W4+DCQcvwGATfvQR8jAgB8QAn/U1rrO6afBQBAwAEAJEbAAQAkRsABACRGwAEAJEbAAQAkRsABACRGwAEAJKY14LIsK4rikJeyJ0VRjEajt74KAICdaQ24+/v7p6enQ17Knjw9PeV5/tZXAQCwM60BVxTFzc3NeDxOdx2uKIqnp6ebm5tfv3699bUAAOxMa8BNp9OiKO7v77Msu07TaDTK81y9AQBHpivgAAB4hwQcAEBiBBwAQGIEHABAYgQcAEBiBBwAQGIEHABAYgQcAEBi/g/J8FBeot34ZwAAAABJRU5ErkJggg==" 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,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" 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进行栅格布局!

回到目录

Bootstrap~表单Form的更多相关文章

  1. bootstrap的表单form

    (1)默认表单 <form> <div class="form-group"> <label class="control-label&qu ...

  2. Bootstrap表单

    Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) -> 这个不好看,都是手机版了,PC版占一排不好看: 内联表单 -> 我相信这个才是你想要的,PC版响应横排,手机版响应竖 ...

  3. bootstrapValidator.js,最好用的bootstrap表单验证插件

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  4. bootstrap表单带验证

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  5. 详解Bootstrap表单组件

    表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS:  forms.less SASS:  _forms.scss boot ...

  6. 基于Bootstrap表单验证

    基于Bootstrap表单验证 GitHub地址:https://github.com/chentangchun/FormValidate 使用方式: 1.CSS样式 .valierror { bor ...

  7. 第二百三十四节,Bootstrap表单和图片

    Bootstrap表单和图片 学习要点: 1.表单 2.图片 本节课我们主要学习一下 Bootstrap 表单和图片功能,通过内置的 CSS 定义,显示各 种丰富的效果. 一.表单 Bootstrap ...

  8. 测开之路一百一十一:bootstrap表单

    bootstrap表单 引入bootstrap和jquery 默认表单 垂直表单 表单属性绑定:for属性,当for的属性和id的属性相同时,单击for标签,光标自动跳到相同属性的输入框 复选框 水平 ...

  9. bootstrap 表单类

    bootstrap 表单类 表单美化 用法: 向父元素 <form role="form"></form>     添加 role="form&q ...

随机推荐

  1. C++面试中关于sizeof问题总结

    原文:http://blog.sina.com.cn/s/blog_7c983ca60100yfdv.html#SinaEditor_Temp_FontName (1)      sizeof是操作符 ...

  2. 封装ios静态库碰到的一些问题(三)

    静态库封装好以后,就存在一个问题,静态库,模拟器的静态库何真机的静态库是分开的,那么能够合并,答案是肯定的,但是必须我们手工在终端工具下执行命令合并 lipo -create Release-ipho ...

  3. C#引用类型(class)和值类型(struct)

    1. 值参数 当利用值向方法传递参数时,编译程序给实参的值做一份拷贝,并且将此拷贝传递给该方法.被调用的方法不传内存中实参的值,所以使用值参数时,可以保证实际值是安全的. using System; ...

  4. vim的跨文件复制粘贴

    1.用vim打开一个文件,例如:a.cpp 2.在普通模式下,输入:":sp"(不含引号)横向切分一个窗口,或者":vsp"纵向切分一个窗口,敲入命令后,你将看 ...

  5. loadrunner回放脚本报错27780:“[10053] 软件导致连接中止”

    录制的脚本在回放时报错,错误如下: vuser_init.c(12): 警告 -26627: 对于“http://bsp.paycenter.58.com.cn/favicon.ico”,HTTP 状 ...

  6. Matlab-Octave中绘制网格图和等高线:mesh 和 surf

    x=linspace(-50, 50, 50); % 在x轴上取50点y=linspace(-25, 25, 25); % 在y轴上取25点[xx,yy]=meshgrid(x, y); % xx和y ...

  7. TeamViewer11使用教程

    下载地址(官网):http://res.ncmem.com/download/TeamViewer11.exe 下载地址(360):https://yunpan.cn/cvxRiTfSC3iH6(访问 ...

  8. CrossApp入门简介

    来自9miao社区的CrossApp号称可以极大的简化移动应用的开发,因为开源的时间不长,有效的资料不多. 官方网站: http://crossapp.9miao.com/ 环境搭建说明:http:/ ...

  9. ElasticSearch学习笔记-02集群相关操作_cat参数

    _cat参数允许你查看集群的一些相关信息,如集群是否健康,有哪些节点,以及索引的情况等的. 检测集群是否健康 curl localhost:9200/_cat/health?v 说明: curl 是一 ...

  10. How to create Web Deployment Package and install the package

    Create Web Deployment Package To configure settings on the Connection tab In the Publish method drop ...