Bootstrap笔记01

内联表单

为元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件，只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单，我们将这些元素的宽度设置为> width: auto;，因此，多个控件可以排列在同一行。

<form role="form" class="form-inline"><!-- 内联表单 -->

		<div class="form-group">
				<label class="sr-only">用户名</label>
				<input type="email" class="form-control"placeholder="Enter email">
			</div>
			<div class="form-group">
				<label class="sr-only">用户名</label>
				<input type="password" class="form-control"placeholder="password">
			</div>
			<div class="form-group">
				<label class="sr-only">选择文件</label>
				<input type="file">
				<p class="help-block">选择你的文件</p>
			</div>
		</form>

Bootstrap笔记01

实现表单的水平对齐

先创建一个表单

<form role="form" class="form-horizontal">
	<div class="form-group">
		<label>Email</label>
		<input type="email"placeholder="Email">
	</div>
	<div class="form-group">
		<label>Password</label>
		<input type="password"placeholder="password">
	</div>
</form>

Bootstrap笔记01
可以看出单元格是不对齐的，为了达到文字，输入框水平对齐效果，此时需要用到栅格系统
平均分配，给Email分配两个内容，给输入框分配8个内容

<form role="form" class="form-horizontal">
			<div class="form-group">
				<label class="col-sm-2 ">Email</label>
				<div class="col-sm-8">
				  <input type="email" placeholder="Email">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 ">Password</label>
				<div class="col-sm-8">
				  <input type="password" placeholder="password">
				</div>
			</div>
		</form>

再给其加上边框效果（圆角），就好看多啦

<label class="col-sm-2 control-label">Email</label>
<label class="col-sm-2 control-label">Passsword</label>

Bootstrap笔记01
添加记住密码选框，让其左边空出两个位置，与上面输入框对齐

<div class="form-group">
				<label class="col-sm-offset-2 col-sm-8">
					<div class="checkbox">
						<label>
						<input type="checkbox">记住密码
						</label>
					</div>
				</label>
			</div>

Bootstrap笔记01
添加一个默认样式的按钮

<div class="form-group">
	<label class="col-sm-offset-2 col-sm-8">
		<button type="submit" class="btn btn-default">登录
		</button>
	</label>
</div>

Bootstrap笔记01

栅格系统

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。Bootstrap
栅格系统的工作原理：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100%
宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。类似 .row 和
.col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值
margin 从而抵消掉为 .container 元素设置的
padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。负值的
margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。

	类前缀
超小屏幕手机 (<768px)	.col-xs-
小屏幕平板 (≥768px)	.col-sm-
中等屏幕桌面显示器 (≥992px)	.col-md-
大屏幕大桌面显示器 (≥1200px)	.col-lg-

1.先编写13列中等屏幕桌面显示器占据一个内容的栈格*

<div class="row">
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
</div>

可以看出每行最多显示12列
Bootstrap笔记01
2.添加占据四个内容的列

<div class="row">
			  <div class="col-md-4">.col-md-4</div>
			  <div class="col-md-4">.col-md-4</div>
			  <div class="col-md-4">.col-md-4</div>
</div>

Bootstrap笔记01

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移

Bootstrap笔记01

嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-*
元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12

<div class="row">
           	<div class="col-sm-9">
           		one
           		<div class="row">
           			<div class="col-xs-8">
           				first
           			</div>
           			<div class="col-xs-4">
           				tow
           			</div>
           		</div>
           	</div>
           </div>

Bootstrap笔记01

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

<div class="row">
           	<div class="col-md-9 col-md-push-3">col-md-9</div>
           	<div class="col-md-3">col-md-3</div>
           	</div>

Bootstrap笔记01

文本框

<form role="form">
			<fieldset>
				<input type="text" class="form-control">
			<textarea class="form-control"rows=5>Hello!</textarea>

复选框

<div class="checkbox">
			<label>
				<input type="checkbox" value="">
				吃橘子
			</label>
		</div>
		
		<div class="checkbox">
			<label>
				<input type="checkbox" value="">
				吃苹果
			</label>
		</div>

单选框

<div class="radio">
			<label>
				<input name="optionRadios" type="radio" checked>
				男
			</label>
		</div>
		<div class="radio">
			<label>
				<input name="optionRadios" type="radio" checked>
				女
			</label>
		</div>

下拉框

<select multipe class="form-control">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
		</select>

静态文本框

<p class="form-control-static">请按照我的格式输入:[email protected]</p>
			<input class="form-control" type="text">

Bootstrap笔记01
禁用标签
<fieldset disabled></fieldset>

为文本框添加一些状态

<form role="form">
			<div class="form-group has-warning">
				<label>用户ing</label>
				<input class="form-control" type="text">
			</div>
			<div class="form-group has-success">
				<label>用户ing</label>
				<input class="form-control" type="text">
			</div>
			<div class="form-group has-error">
				<label>用户ing</label>
				<input class="form-control" type="text">
			</div>
		</form>

Bootstrap笔记01
可以看出改变了边框颜色

内联表单

实现表单的水平对齐

栅格系统

相关推荐