bootstrap 学习之路6

来源：互联网发布：linux系统拷贝文件编辑：程序博客网时间：2024/06/11 06:44

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是免费使用的

效果图;