bootstrap 学习之路6_form-horizontal 垂直-优快云博客

本文链接：https://blog.youkuaiyun.com/wangboa123/article/details/8901368

bootstrap学习了一段时间了，好几天没学了，不是因为我偷懒，是因为我抽空学了下javascript ，改天有时间把javascript 学习的给写上去。

bootstrap 学了一段时间后，觉得没什么意思了，都是bootstrap封装的一些类，拿来用就好了，还学那么多有什么用呢？想了想，学习还是要持之以恒呀，不能因为简单而不学它，也不能因为复杂而放弃它。俗话说：“世上是有难易乎？为之，则难者亦易已，不为，则易者亦难已。”所以，不管简单还是复杂，我们都耐心的来一遍吧。

其实这个学习6部分，没什么难点，就是把bootstrap官网的各个内容，我自己写了一下，主要包括一下内容：

1. 代码标签：code、pre、section.用来显示代码。 pre是代码块、 section是一条、code也是代码块，但是效果要舒服些，i like this

2. table，现在的网页上也就不外乎 title table img 三个部分，所以要学下table

3. form表单。 bootstrap 学了这么久，如果不会写表单，不会提交表单岂不是很笑话

4. button 按钮

5. 自带icon的使用

这节的内容都很基础，很无聊。就是按官网来练就好了。

二话不说，上代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
		
		<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="./bootstrap/css/bootstrap-responsive.min.css" />

		<!--这里加上想用的css-->
		<style type="text/css">
			.overlap{
				float:left;
			}

			.carousel-control{
				height:80px;
				margin-top:0px;
				font-size:120px;
				text-shadow:0 1px 1px rgba(0,0,0,4);
				background-color:transparent;
				border:0px;
				z-index:10;
			}

			.carousel-caption{
				left:10%;
				top:30%;
				right:30%;
				bottom:20%;
				background-color:transparent;
				
			}

			.carousel-caption h1{
				color:#fff;
			}
			
			.item img{
				margin: 0 auto;
			}

			.form-horizontal .control-label{
				width:50px;
			}

			.form-horizontal .controls{
				margin-left:80px;
			}

		</style>
	</head>

	<body>
		<div class="navbar navbar-inverse">
			<div class="navbar-inner">
				<div class="container">
				
					<ul class="nav" >
						<li class="active"><a href="#">home</a></li>
						<li><a href="#">content</a></li>
						<li><a href="#">about</a></li>
					</ul>
				</div>
			</div>
		</div>
		
		<div id="myCarousel" class="carousel slide">
			<div class="carousel-inner">
				<div class="item active">
					<img src="heropic.jpg" alt="" />
					<div class="container">
						<div class="carousel-caption">
							<h1>pic 01</h1>
							<p>the first pic content</p>
						</div>
					</div>
				</div>
				<div class="item">
					<img src="heropic.jpg" alt="" />
					<div class="container">
						<div class="carousel-caption">
							<h1>pic 02</h1>
							<p>the second pic content</p>
						</div>
					</div>
				</div>
				<div class="item">
					<img src="heropic.jpg" alt="" />
					<div class="container">
						<div class="carousel-caption">
							<h1>pic 03</h1>
							<p>the third pic content</p>
						</div>
					</div>
				</div>
			</div>	
			<a href="#myCarousel" class="left carousel-control" data-slide="prev">‹</a>
			<a href="#myCarousel" class="right carousel-control" data-slide="next">›</a>
		</div>
		<div class="container">
			<div class="row-fluid">
				<div class="span3"><h1>code</h1>
					<code>
							#include<iostream><br />

							using namespace std; <br />

							   void main() <br />

							  { <br />
							    cout<<"helloworld"<<endl; <br />
							  }
					</code>
					</div>
				<div class="span5">
					<h1>表格</h1>
					<table class="table table-striped table-hover">
						<thead>
							<tr>
								<th>first name</th>
								<th>middle name</th>
								<th>last name</th>
							</tr>
						</thead>
						<tbody>
						<tr>
							<td>hello</td>
							<td>hello</td>
							<td>world</td>
						</tr>
						<tr>
							<td>jim</td>
							<td>hadder</td>
							<td>green</td>
						</tr>
						</tbody>
					</table>
				</div>
				
				<div class="span4"><h1>form表单</h1>

					<form class="form-search">
						  <input type="text" class="input-medium search-query">
						  <button type="submit" class="btn">Search</button>
					</form>

					<form action="" class="form-horizontal">
						<div class="control-group">
								<label class="control-label" for="">text</label>
								<div class="controls">
									<input type="text" />
								</div>

							</div>
							<div class="control-group">
								<label  class="control-label" for="">checkbox</label>
								<div class="controls">
									<input type="checkbox" />
								</div>
							</div>
							
							<div class="control-group">
								<div class="controls">
									<input type="button" class="btn btn-primary btn-large " value="helloBtn" />
								</div>
							</div>

							<a href="" class="btn btn-large btn-success"><i class="icon-home icon-white"></i>首页</a>

						</div>
					</form>

				</div>
			</div>
			
			<hr />
			<div class="footer">
				© 2013 Company, Inc. · 
			</div>
		</div>

		
		
		<script type="text/javascript" src="./bootstrap/thirdpart/jquery.min.js"></script>
		<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>  
       
	</body>
</html>

注释：

1. <code>
#include&ltiostream><br /> <和> 分别表示<>. 毕竟这样才不会跟html标签冲突。扩展一下，还有&reg &copy &quot &nbsp,好了，其余的转义附也不会用

using namespace std; <br />

   void main() <br />

  { <br />
    cout<<"helloworld"<<endl; <br />
  }
</code>

2. <table class="table table-striped table-hover"> table 中的各种类型 .table 表格 table-striped 是表格行与行之间变颜色， .table-hover 是相应鼠标移动。扩展一下，还有.table-bordered 表格圆角和. table-condensed 表格内缩

3.<form class="form-search"> form 表单有三种，第一种form-search 搜索第二种 form-horizontal 纵向排列第三种 form-inline 横向排列

4. <div class="control-group"> 纵向之后，用这个标签将每一行的input给包括起来，以便格式统一

5. <input type="button" class="btn btn-primary btn-large " value="helloBtn" /> button 的使用，button中有三个类，btn表示是一个button， btn-primary 表示一种button的状态，或者说是颜色。有好几种，可参考bootstrap中文网查看。 btn-large 是大按钮。

6. <a href="" class="btn btn-large btn-success"><i class="icon-home icon-white"></i>首页</a> 另一种button的写法，同时还可以放入icon 支持，简直非常强大。并且这些icon是免费使用的

效果图;