学会BootStrap这一篇文章就够了
程序员文章站
2022-05-01 10:10:01
...
用一个框架之前当然我没要了解它是什么
中文的网站：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="aaa@qq.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推荐阅读