bootstrap框架学习笔记（一）

网格系统

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
    < !-- 另一行 -->
   <div class="row">...</div>
</div>

说明

• 使用 .col-md-offset-* 类来进行缩进（水平居中） 这些类会把一个列的左外边距（margin）增加 ***** 列

 <div class="col-md-6 col-md-offset-3"></div>

• .col-xs-* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果

字体图标

<span class="glyphicon glyphicon-search"></span>

下拉菜单和分割线

		<div class="dropdown">
			<button class="btn" data-toggle="dropdown">第三个</button>
			<ul class="dropdown-menu">
                <li class="dropdown-header">下拉菜单标题</li>
				<li>1djgs</li>
				<li>2djgs</li>
				<li>3djgs</li>
				<li class="divider"></li>
				<li>4djgs</li>
				<li>5djgs</li>
			</ul>
		</div>

说明

• 在class.dropdown内使用class.dropdown-menu类生成下拉选项，在点击的按钮上添加属性data-toggle="dropdown"联动
  +下拉选项添加class.dropdown来添加下拉标题，分割线使用class.divider来生成。

按钮和按钮组

<button class="btn btn-success btn-lg btn-block">父级长度的按钮</button>
		<button class="btn btn-warning btn-lg">大按钮</button>
		<button class="btn btn-link btn-sm">链接按钮</button>

		<div class="btn-group">
			<button class="btn btn-danger">按钮1</button>
			<button class="btn btn-primary">按钮2</button>
			<button class="btn btn-info">按钮3</button>
		</div>
		<div class="btn-group-vertical btn-group-lg">
			<button class="btn btn-danger">按钮4</button>
			<button class="btn btn-primary">按钮5</button>
			<button class="btn btn-info">按钮6</button>
		</div>
		<!-- 嵌套按钮组 -->
		<div class="btn-group">
			<button class="btn btn-primary">按钮7</button>
			<button class="btn btn-primary">按钮8</button>
			<div class="btn-group">
				<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">下拉 按钮</button>
				<ul class="dropdown-menu">
					<li>下拉1</li>
					<button class="btn btn-info btn-block">
						按钮2
					</button>
				</ul>
			</div>
		</div>

说明

• 按钮都需要加class.btn类
• 按钮组需要加class.btn-group类
• 按钮常用样式可以加 .btn-primary || .btn-info || .btn-danger || .btn-warning || .btn-success
• 按钮大小有 .btn-lg || .btn-sm || .btn-xs
• 嵌套按钮组（按钮组下拉菜单）
  1. 在 .btn-group内又加一个 .btn-group 类
  2. 在需要下拉的按钮上添加按钮样式以及 .dropdown-toggle类并且加属性 data-toggle=“dropdown”
  3. 下拉菜单添加 .dropdown-menu 类

表单

		<form action="">
			<div class="form-group">
				<label for="name">用户名</label>
				<input type="text" class="form-control">
			</div>
			<div class="form-group">
				<label for="name" class="control-label">用户</label>
				<input type="text" class="form-control">
			</div>
		</form>

<form action="" class="form-horizontal">
			<div class="form-group has-error">
				<label for="name" class="control-label col-md-2">用户</label>
				<div class="col-md-6">
					<input type="" class="form-control">
				</div>
				<label for="name" class="sr-only control-label col-md-2">错误</label>
			</div>
		</form>

说明

• 输入框必须包含form-control 类
• 默认上下排列，添加 .form-horizontal 类水平排列
• 可以通过添加 .has-error || has-success 类改变输入框颜色
• 输入框组内的label 都有control-label 类，可以通过加col-sm- * 改变表单大小，为label 添加sr-only 类可以隐藏标签

输入框组

<div class="container">
			<div class="row">
				<div class="col-md-2"></div>
				<div class="col-md-8">
					<form>
					    <div class="input-group">
					        <span class="input-group-addon">@</span>
					        <input type="text" class="form-control">
					    </div>
					    <br>
					    <div class="input-group">
					        <input type="text" class="form-control">
					        <span class="input-group-addon">.00</span>
					    </div>
					    <br>
					    <div class="input-group">
					        <span class="input-group-addon">$</span>
					        <input type="text" class="form-control">
					        <span class="input-group-addon">.00</span>
					    </div>
					</form>
				</div>
				<div class="col-md-2"></div>
			</div>
		</div>

说明

• 输入框组基于表单
• 只要在 .input-group 输入框组内添加 span.input-group-daaon ,便可以在span标签内加入其他组件（按钮组 下拉菜单等），做成一些有趣的东西
  
  勉强放张图