Bootstrap 快速入门之第四章全局CSS之表单&按钮&图片&辅助类&响应式工具

最新推荐文章于 2023-04-23 16:16:06 发布

渊婉

最新推荐文章于 2023-04-23 16:16:06 发布

阅读量868

点赞数 1

文章标签： css bootstrap html

本文链接：https://blog.csdn.net/qq_61313896/article/details/124510392

版权

本文介绍了Bootstrap中关于表单的多种类型，包括基本表单、内联表单、表单组合、水平排列表单等，并详细讲解了按钮的预定义样式、尺寸和状态控制。此外，还探讨了响应式图片、辅助类的颜色和浮动工具，以及响应式工具的使用，帮助开发者更好地掌握Bootstrap的布局和设计。

摘要由CSDN通过智能技术生成

一：表单

①：基本表单

class="form-control"：可为<input> <textarea> <select>元素设置该属性，会将宽度设置为100%
class="form-group"：可为<div>设置该属性，<div>中包含<label>和<input>，这样层次会更清晰

基本表单演示：

	<form>
		  <div class="form-group">
		    <label for="exampleInputEmail1">Email address</label>
		    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
		    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
		  </div>
		  <div class="form-group">
		    <label for="exampleInputPassword1">Password</label>
		    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
		  </div>
		  <div class="form-check">
		    <input type="checkbox" class="form-check-input" id="exampleCheck1">
		    <label class="form-check-label" for="exampleCheck1">Check me out</label>
		  </div>
		  <button type="submit" class="btn btn-primary">Submit</button>
		</form>

	<form>
		  <div class="form-group">
		    <label for="exampleFormControlInput1">Email address</label>
		    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
		  </div>
		  <div class="form-group">
		    <label for="exampleFormControlSelect1">Example select</label>
		    <select class="form-control" id="exampleFormControlSelect1">
		      <option>1</option>
		      <option>2</option>
		      <option>3</option>
		      <option>4</option>
		      <option>5</option>
		    </select>
		  </div>
		  <div class="form-group">
		    <label for="exampleFormControlSelect2">Example multiple select</label>
		    <select multiple class="form-control" id="exampleFormControlSelect2">
		      <option>1</option>
		      <option>2</option>
		      <option>3</option>
		      <option>4</option>
		      <option>5</option>
		    </select>
		  </div>
		  <div class="form-group">
		    <label for="exampleFormControlTextarea1">Example textarea</label>
		    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
		  </div>
		</form>

②：内联表单

让所有的表单元素都显示在一行
<form class="form-inline">


		<form class="form-inline">
		  <label class="sr-only" for="inlineFormInputName2">Name</label>
		  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">	
		  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
		  <div class="input-group mb-2 mr-sm-2">
		    <div class="input-group-prepend">
		      <div class="input-group-text">@</div>
		    </div>
		    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
		  </div>	
		  <div class="form-check mb-2 mr-sm-2">
		    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
		    <label class="form-check-label" for