您的位置：首页 > Web前端 > BootStrap

使用BootStrap进行响应式布局案例

2015-09-29 00:03 549 查看
（1）首先下载BootStrap,把bootstrap.min.css拷贝到项目中。

（2）新建style.css,实现代码如下：

.row{

margin-bottom: 20px;

}

.row .row{

margin-top: 10px;
margin-bottom: 0px;

}

[class*="col-"]{
padding-top: 15px;
padding-bottom: 15px;
/*background-color: #eee;*/
/*background-color: rgba(86,61,124,.15);*/
/*border: 1px solid #dddddd;*/
/*border: 1px solid rgba(86, 61, 214,.2);*/

}


（3）新建index.html文件，实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="bootstrap.min.css" type="text/css" rel="stylesheet">

<link href="style.css" type="text/css" rel="stylesheet">
</head>
<!--<div>-->

<!--导航栏-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Password">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

<!--巨幕-->
<div class="jumbotron">

<div class="container">
<h1>Hello, world!</h1>

<p>This is a template for a simple marketing or informational website. It includes a large callout called a
jumbotron and three supporting pieces of content. Use it as a starting point to create something more
unique.</p>

<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>

<!--三列-->
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna
mollis euismod. Donec sed odio dui.</p>
<input class="btn btn-default" type="button" value="View details »">
</div>

<div class="col-md-4">
<h2>Heading</h2>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna
mollis euismod. Donec sed odio dui.</p>
<input class="btn btn-default" type="button" value="View details  »">
</div>

<div class="col-md-4">
<h2>Heading</h2>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna
mollis euismod. Donec sed odio dui.</p>
<input class="btn btn-default" type="button" value="View details  »">
</div>
</div>
</div>

<!--页脚-->
<!--注意：<hr>是分割线-->

<div class="container">
<hr>
<footer>© Company 2014</footer>
</div>

</body>
</html>


（4）最后的实现效果如下：这是模仿BootStrap中的某一个模板设计出来的。可见BootStrap使用起来非常方便。


。

github主页：https://github.com/chenyufeng1991  。欢迎大家访问！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航