Fork me on GitHub

使用bootstrap3样式制作一个炫酷的网页


使用bootstrap就可以很快制作出一个这样的网页

如果你对bootstrap一窍不通请先浏览本站的上一篇文章。

《Bootstrap基础》

1.导航栏

navbar 导航栏 ~点击查看完整版代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!-- 小屏幕例如手机打开时 显示精简响应式导航栏 -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<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="#">DP LEE</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#showcase">Home</a></li> <!-- 可直接定位到指定的id元素 -->
<li><a href="#info1">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
navbar 导航栏 自定义样式 style.css ~点击查看完整版代码
1
2
3
4
5
6
7
8
9
10
11
.navbar-default {
background: #fff;
border: 0;
font-family: Poppins;
}

.navbar-brand {
font-size: 20px;
color: #000 !important;
font-weight: bold;
}

2. showcase 展示区域

showcase 展示区 ~点击查看完整版代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<section id="showcase">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="showcase-left">
<img src="img/image1.jpg">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="showcase-right">
<h1>Bootstrap starter template</h1>
<p>Use this document as a way to quickly start any new project.
All you get is this text and a mostly barebones HTML document.</p>
</div>
<br>
<a class="btn btn-lg btn-default showcase-btn">Read More</a>
</div>
</div>
</div>
</section>
showcase 展示区 自定义样式 style.css ~点击查看完整版代码
1
2
3
4
5
6
7
8
9
10
11
12
13
#showcase h1{
font-size: 50px;
margin-bottom: 20px;
}

#showcase img{
width: 90%;
margin-left: 60px;
}

#showcase .showcase-right{
margin-top: 90px;
}

3.testimonial 文字介绍版块

testimonial 文字介绍版块 ~点击查看完整版代码
1
2
3
4
5
6
7
<section id="testimonial">
<div class="container">
<p>"Build on the basic template above with Bootstrap's many components. We encourage you to customize and adapt
Bootstrap to suit your individual project's needs."</p>
<p class="customer">- DP LEE</p>
</div>
</section>
testimonial 文字介绍版块 自定义样式 style.css ~点击查看完整版代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#testimonial{
background: #f1f1f1;
padding: 50px 0 30px 0;
text-align: center;
margin-top: 40px;
}

#testimonial p{
font-size: 32px;
font-family: "Josefin Sans";
color: #000;
}

#testimonial p.customer{
font-size: 20px;
color: #666;
}

4.info 详细信息展示板块

info 详细信息展示板块 ~点击查看完整版代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<section id="info1">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="info-left">
<img src="img/image2.png">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="info-right">
<h2>Get To Know Home</h2>
<p>Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers
might display differently styled, though fully functional, renderings of certain components.</p>
<br>
<a class="btn btn-default btn-lg">Read More</a>
</div>
</div>
</div>
</div>
</section>
<hr>
<section id="info2">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="info-left">
<h2>Info Block One</h2>
<p>Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers
might display differently styled, though fully functional, renderings of certain components.</p>
<br>
<a class="btn btn-default btn-lg">Read More</a>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="info-right">
<h2>Info Block Two</h2>
<p>Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers
might display differently styled, though fully functional, renderings of certain components.</p>
<br>
<a class="btn btn-default btn-lg">Read More</a>
</div>
</div>
</div>
</div>
</section>
info 详细信息展示板块 自定义样式 style.css ~点击查看完整版代码
1
2
3
4
5
6
7
#info1 .info-right{
margin-top: 90px;
}

#info2{
margin: 20px 0 60px 0;
}

5.底部联系我们和版权信息

底部联系我们和版权信息 ~点击查看完整版代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<section id="contact">
<div class="container">
<div class="row">
<div class="col-md-5 col-xs-5">
<form>
<div class="form-group">
<label>Name: </label>
<input class="form-control" type="text" name="" value="" placeholder="Enter Name">
</div>
<div class="form-group">
<label>Email: </label>
<input class="form-control" type="text" name="" value="" placeholder="Enter Email">
</div>
<div class="form-group">
<label>Message: </label>
<textarea class="form-control" name="" value="" placeholder="Enter Message"></textarea>
</div>
<button class="btn btn-default">Submit</button>
</form>
</div>
<div class="col-md-7 col-sm-7">

</div>
</div>
</div>
</section>

<footer>
<p class="text-center">TechScroll Copyright &copy;</p>
</footer>
底部联系我们和版权信息 自定义样式 style.css ~点击查看完整版代码
1
2
3
4
5
6
7
8
9
10
11
#contact{
background: url("../img/image3.png");
padding: 40px;
color: #fff;
border-top: #333 7px solid;
border-bottom: #333 7px solid;
}

footer{
padding: 30px;
}

6.总结

整体效果:



  • bootstrap样式可以在自定义样式中进行修改,例如
    这样就可以修改导航栏中的字体大小和颜色,!important 表示就用这个样式覆盖别的样式。
  • 很多组件和javascript相关操作都可以直接在bootstrap文档中查看使用方式,也可以直接复制里面的demo进行修改。

下一篇文章将会使用scrollreveal.js来给这格网页添加动态效果,点击下面的链接直接跳转到该文章。

《使用scrollreveal.js给网站添加滑动动态效果》

本文结束啦 感谢您阅读
路漫漫其修远兮 吾将上下而求索