《前端》Bootstrap.用户界面架构

一、布局--.container

<div class="container">
	<h1 class="page-header">布局<small> 使用Bootstrap网格系统布局网页</small></h1>
	<p>你好.</p>
	<div class="row">
		<div class="span4">
			<h2 class="page-header">区块一</h2>
			<p>culum. </p>
		</div>
		<div class="span4">
			<h2 class="page-header">区块二</h2>
			<p> eget . </p>
		</div>
		<div class="span4">
			<h2 class="page-header">区块三</h2>
			<p>Lorem . </p>
		</div>
	</div>
</div>

注：·使用div容器包裹内容，class="container"，使得整体布局居中。
      ·使用div容器包裹三块区域并且class="row"，每个区域再定义div 且class="span4"，使得这三个区域并排显示。

2、嵌套布局与流动布局
    如果想在区块三种再添加两块内容：
        在区块三的span4内添加一个class="row",再添加两个div class="span2"。
    如果想把固定布局变为流动布局（页面会随着内容的变化而缩放，宽度会变成百分比形式）：
        把container变成container-fluid,所有的row变为row-fluid。

3、响应式布局        
    当页面像素在767px和979px之间的时候，背景为红色，其他时候为黑色。
    例子： 

<style>
	body{background:#000;}
	@media(min-width:767px) and (max-width:979px){body{background:#f00;}}
</style>

4、把已有的固定宽度布局转换成响应式布局    
     引入文件：bootstrap-responsive.css

二、表格--.table

    条纹表格：class="table table-striped"
    边框表格：class="table table-bordered"
    压缩表格：class="table table-condensed"

三、表单--

   1、 input可以实现的相关的类型： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
    2、添加表单输入框，框内显示默认文字：
        例子：

<input id="username" type="text" class="span3" placeholder="输入您的用户名">

3、 添加帮助提醒文字：.help-block标签：

  <p class="help-block">请输入您登录时使用的用户名</p>

4、文本框的前缀与后缀
    前缀：用<div class="input-prepend">包裹一个span和input，里面写：写一个<span class="add-on">符号</span><input> 
        加货币符号前缀例子：     

<div class="input-prepend">
	<span class="add-on">&yen;</span><input type="text">
</div>

    后缀同理用：<div class="input-append">    
    前后缀都有：

<div class="input-prepend input-append">
    <span class="add-on">&yen;</span><input type="text"><span class="add-on">.00</span>
</div>

    文本框和搜索后缀：

<div class="input-append">
    <input type="text"><button class="btn" type="button">搜索</button>
</div>

     这里的class="btn"也是bootstrap设计好的样式。
5、单选按钮

<input type="radio" name="" id=""><i>男</i>
或者：
<label class="radio">
    <input type="radio" name="gender" value="female">女</label>

6、复选框

<label class="checkbox">
   <input type="checkbox" name="gender" value="female">女</label>

7、选择列表

    单选列表框：

<label>想去的地方</label>
<select>
    <option value="yidali">意大利</option>
    <option value="meiguo">美国</option>
    <option value="riben">日本</option>
</select>

    多选列表框：--选择需要按住ctrl

在select中加上multiple="multiple"

8、表单的排版
    学习网址：https://www.runoob.com/bootstrap/bootstrap-forms.html
    Bootstrap 提供了下列类型的表单布局：

•         ·垂直表单（默认）
•         ·内联表单
•         ·水平表单

  （1）垂直或基本表单：
            向父 <form> 元素添加 role="form"。
            把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
            向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
  （2）内联表单
            所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。
            默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。
            使用 class .sr-only，您可以隐藏内联表单的标签。
  （3）水平表单
            水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。
            步骤：

1.                 向父 <form> 元素添加 class ="form-horizontal"。
2.                 把标签和控件放在