学会BootStrap这一篇文章就够了

来源：互联网发布：狙击模拟软件汉化版编辑：程序博客网时间：2024/06/05 15:08

用一个框架之前当然我没要了解它是什么

官网：http://getbootstrap.com/

中文的网站：http://www.bootcss.com/

上面两个网站对于BootStrap初学者来说可能可阅读性不高，因此博主推荐另一个网站

http://www.runoob.com/bootstrap/bootstrap-tutorial.html

接下来一般来说自学就能会，因为这个网站在博主看来写的还是挺详细的

案例：我们要做的是一个仿https://github.com/主页的响应式网页（注：火狐浏览器Ctrl+Shift+M可以查看效果）

首先我们要下载这个框架，可以去中文的网站下载，当然还要下载jquery

index.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>练习:用bootstrap仿www.github.com网站</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入BootStrap库 --><link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"><!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --><script src="jquery/jquery.min.js"></script><!-- 包括所有已编译的插件 --><script src="bootstrap/js/bootstrap.min.js"></script></head><body style="background:#2B3137"><!--响应式导航栏--><nav class="navbar navbar-inverse" role="navigation"><div class="container-fluid">  <div class="navbar-header">  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>   </button>   <a class="navbar-brand" style="padding:0;margin:0;"><img src="images/github.png"/></a><!-- 距左边的的距离可以设置百分百 --> </div> <div class="collapse navbar-collapse" id="example-navbar-collapse">   <ul class="nav navbar-nav navbar-left"><li><a href="#">Features</a></li><li><a href="#">Business</a></li><li><a href="#">Explore</a></li><li><a href="#">Marketplace</a></li><li><a href="#">Pricing</a></li>   </ul>   <form class="navbar-form navbar-right" role="search">             <input type="text" class="form-control" placeholder="Search GitHub" style="color: #404448;height: 30px;">             <a href="#" style="color: #ffffff">Sign in</a>             <a style="color: #585749">or</a>             <a href="#" style="color: #ffffff">Sign up</a>       </form> </div></div></nav><div class="container"> <div class="row">      <div class="col-sm-6 col-md-4" style="margin-left: 200px;margin-top: 60px;">            <h1><font style="color: #ffffff">Built for developers</font></h1>            <p>            <span style="color:#999396"> GitHub is a development platform inspired by the way you work. From </span>            <a style="color: #ffffff">open source</a> to <a style="color: #ffffff">business</a>            <span style="color:#999396">, you can host and review code, manage projects, and build software alongside millions of other developers. </span>            </p>      </div>      <div class="col-sm-6 col-md-4" style="background: #ffffff;margin-right: 50px;margin-top: 30px;border-radius: 5px;">    <div class="form-group" style="color:#586069">         <br/>         <label for="name" style="color:#586069;">Username</label>         <input type="text" class="form-control" id="name" placeholder="Pick a useename">         <br/>         <label for="name" style="color:#586069">Email</label>         <input type="text" class="form-control" id="name" placeholder="you@example.com">         <br/>         <label for="name">Password</label>         <input type="text" class="form-control" id="name" placeholder="Create a password">         <br/>         <label for="name" style="font-size: 10px;">Use at least one letter, one numeral, and seven characters.</label>         <br/>         <button type="button" class="form-control" style="background: #5CB85C;color: #ffffff;">Sign up for GitHub</button>         <br/>         <label for="name" style="font-size: 10px;">By clicking "Sign up for GitHub", you agree to our <a style="color: #57B5EE">terms of service</a> and <a style="color: #57B5EE">privacy policy</a>. We’ll occasionally send you account related emails.</label>         <br/>    </div>      </div>       </div></div></body></html>

如果不想自己去下载的小伙伴可以到下面这个链接

下载做项目要用到的BootStrap的框架和jquery，博主已经下载好了

http://download.csdn.net/download/yuhuiling/9942877

阅读全文

0 0