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给网站添加滑动动态效果》

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