一个把html控件封装的很好的网站bootstrap

     最近一直忙于写前台代码突然发现twitter提供了一个开源的工具里面提供了一些非常好的css文件和jquery文件，嘿嘿，现在拿出来分享一下，下面来讲具体应用在MVC的操作

1、先把bootstrap的包下载下来

地址是http://twitter.github.com/bootstrap/，解压开会有三个文件css、img、js，我们需要的只有css文件里面的，和js文件夹里面的

2、创建一个mvc工程(本人使用的MVC3)

3、将步骤2解压的js文件和css文件分别考到工程的Scripts和Content文件夹下

4、在Views下面的Shared下面的_Layout.cshtml里面添加

    <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" />
    <script src="@Url.Content("~/Scripts/bootstrap.js")"></script>

5、下面我们可以使用bootstrap提供的所有控件了

<form class="form-search">
  <div class="input-append">
    <input type="text" class="span2 search-query">
    <button type="submit" class="btn">Search</button>
  </div>
  <div class="input-prepend">
    <button type="submit" class="btn">Search</button>
    <input type="text" class="span2 search-query">
  </div>
    <div class="btn-group">
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
</div>
  
</form>

在index里面添加上面代码，效果如下

现在bootstrap的所有控件的地址http://twitter.github.com/bootstrap/components.html#buttonGroups

现在bootstrap还提供了自己设计网页的工具jetstrap，地址http://jetstrap.com/build#，他还提供了多套模版，还可以自己生成模版

到此结束了，希望对大家有所帮助