初学bootstrap

最新推荐文章于 2021-03-03 15:49:43 发布

灵魂画手-编程如画

最新推荐文章于 2021-03-03 15:49:43 发布

阅读量1k

点赞数 2

分类专栏： web 文章标签： css bootstrap html web前端响应式

本文链接：https://blog.csdn.net/grape875499765/article/details/62890887

版权

web 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

之前一直写web前端的时候写的比较傻，用html原生语言，css样式写到吐，而且写的不好看，总出各种问题，然后就想到了响应式布局bootstrap，进而由于工作原因，今天写了两个很简单的页面，以其中一个为例记录一下
这里写图片描述
代码bootstrap_demo
写bootstrap首先要导入bootstrap的css样式文件和自己的style.css文件，分别用于引用它的样式和设定自己的样式，代码如下

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

接下来就是上面的轮播图，由于这里只有一张图，所以其他的附属部分都去掉了，基本代码如下

<div class="carousel-inner">
    <div class="item active">
        <img alt="" src="img/nav.jpg" />
    </div>
</div>

普通的居中图片

<img class="img-responsive center-block title-padding" src="img/one.jpg" alt="图片丢失"/>

居中文字

<h3 class="text-center title-font">
    什么是华投融
</h3>

按照网格比例放置居中文字

<div class="row-fluid">
    <div class="col-sm-3">
    </div>
    <div class="col-sm-6">
        <p class="text-center content-font">
            网络在线投融资平台是网络科技有限公司旗下的一家互联网金融服务中介信息平台，致力于为投资者提供安全、透明、便捷、低门槛、高回报的专业理财服务，为中小企业融资者提供快捷、高效、低成本的专业融资服务。
        </p>
    </div>
    <div class="col-sm-3">
    </div>
</div>

网格偏移字段

col-sm-offset-1

其中存在浏览器边缘的问题，要用自己写的style.css来覆盖开头的container-fluid，代码如下

.container-fluid{
    margin:0px;
    padding:0px;
}

其中针对网格在不同设备上的大小，有一个很经典的表格
这里写图片描述
基本问题都已经解决了，剩下的就是一些细节问题了，就不一一指出了，最后放一下我整个界面和自定义style.css文件的代码

html文件

<!DOCTYPE html>
<html>
    <head>
        <title>新手指引</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
    </head>
    <body>
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span12">
                    <div class="carousel-inner">
                        <div class="item active">
                            <img alt="" src="img/nav.jpg" />
                        </div>
                    </div>

                    <img class="img-responsive center-block title-padding" src="img/one.jpg" alt="图片丢失"/>
                    <h3 class="text-center title-font">
                        什么是
                    </h3>
                    <div class="row-fluid">
                        <div class="col-sm-3">
                        </div>
                        <div class="col-sm-6">
                            <p class="text-center content-font">
                                网络在线投融资平台是（北京）网络科技有限公司旗下的一家互联网金融服务中介信息平台，致力于为投资者提供安全、透明、便捷、低门槛、高回报的专业理财服务，为中小企业融资者提供快捷、高效、低成本的专业融资服务。
                            </p>
                        </div>
                        <div class="col-sm-3">
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span4">
                        </div>
                        <div class="span4">
                            <img class="img-responsive center-block title-padding" alt="140x140" src="img/cycle.jpg" />
                        </div>
                        <div class="span4">
                        </div>
                    </div>

                    <img class="img-responsive center-block title-padding" alt="140x140" src="img/two.jpg" />
                    <h3 class="text-center title-font">
                        的优势
                    </h3>
                </div>
            </div>
            <div class="row-fluid">
                <div class="col-sm-2">
                </div>
                <div class="col-sm-8">
                    <div class="row-fluid title-padding">
                        <div class="col-sm-2 col-sm-offset-2">
                            <img class="img-responsive center-block" alt="140x140" src="img/advone.jpg" />
                            <p class="text-center title-two">
                                高收益、低门槛
                            </p>
                        </div>
                        <div class="col-sm-2 col-sm-offset-1">
                            <img class="img-responsive center-block" alt="140x140" src="img/advtwo.jpg" />
                            <p class="text-center title-two">
                                安全审核流程
                            </p>
                        </div>
                        <div class="col-sm-2 col-sm-offset-1">
                            <img class="img-responsive center-block" alt="140x140" src="img/advthree.jpg" />
                            <p class="text-center title-two">
                                立足怀柔本地
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                </div>
            </div>

            <div class="row-fluid">
                <div class="span12">
                    <img class="img-responsive center-block title-padding" alt="140x140" src="img/three.jpg" />
                    <h3 class="text-center title-font">
                        投资理财流程
                    </h3>
                    <div class="row-fluid">
                        <div class="col-sm-3">
                        </div>
                        <div class="col-sm-6">
                            <img class="img-responsive center-block title-padding" alt="140x140" src="img/step1.jpg" />
                            <img class="img-responsive center-block" alt="140x140" src="img/step2.jpg" />
                            <img class="img-responsive center-block title-padding" alt="140x140" src="img/computer.jpg" />
                        </div>
                        <div class="col-sm-3">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

style.css文件

.container-fluid{
    margin:0px;
    padding:0px;
}

.title-padding{
    padding-top:40px;
}

.btn-warning{
    margin-top:40px;
    margin-bottom:80px;
    background-color:#E56717;
}

.title-font{
    font-weight:bold;
    font-size:28px;
}

.content-font{
    font-size:16px;
    line-height:32px;
}