初学者-如何使用bootstrap框架设计一个简单的网页主界面HTML+CSS+Bootstrap

最新推荐文章于 2023-08-16 09:10:06 发布

Keaiting12134

最新推荐文章于 2023-08-16 09:10:06 发布

阅读量1.5w

点赞数 34

分类专栏： bootstrap 文章标签： css html bootstrap html5

本文链接：https://blog.csdn.net/Fighting_hyt/article/details/109777867

版权

bootstrap 专栏收录该内容

1 篇文章 2 订阅

订阅专栏

自己也刚刚开始接触框架，在学习了bootstrap框架过后，练习写了一个简单的主界面，主界面的图如下：

这个页面主要用的bootstrap的栅格系统进行整体布局，网页效果简约大方，最重要的是比较简单吧。下面展示源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小院子官网</title>
    <link  href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        *{
            font-family: "微软雅黑 Light";
        }
        .fakeimg {
            height: 200px;
        }
        /*jumbotron是超大屏幕，作为组件，增加标题大小，为页面内容增添更多的页边距*/
        .jumbotron{
            background-color: #c1e2b3 ;
        }
        /*container容器用来固定宽度，配合响应式布局*/
        .container{
            width: 97%;
        }
    </style>
</head>
<body class="container">
<div class="jumbotron text-center" style="margin-bottom:0px">
<!--    margin-bottom设置下边距，允许为负-->
    <h1 class="text-left">小院子--您身边的植物小管家</h1>
    <p class="text-left text-muted">本店长期出售除甲醛类植物、家居植物和小多肉摆件，更多详情请到店铺咨询！</p>
<!--    text-muted效果是使文字减弱-->
</div>

<!--这个是导航栏-->
<nav class="navbar navbar-inverse">
<!--    设置导航栏的主题是黑色主题-->
    <div class="container-fluid">
<!--      设置导航栏100%的宽度-->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">小院子</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">主页</a></li>
                <li><a href="menu2.html">除甲醛植物</a></li>
                <li><a href="menu3.html">家居摆件</a></li>
                <li><a href="menu4.html">多肉小摆件</a></li>
                <li><a href="menu5.html">更多</a></li>
            </ul>
        </div>
    </div>
</nav>

<div >
    <div class="row">
<!--        栅格系统将页面左边三份分为自信导航栏-->
        <div class="col-sm-3" >
            <h2>植物相关咨询</h2>
            <ur >
            <li >满天星<small>原名:圆锥石头花,属于...</small></li>
            <li>栀子花<small>又名栀子、黄栀子，龙...</small></li>
            <li>鹤望兰<small>多年生草本植物，无茎...</small></li>
            <li>仙人掌<small>别名仙巴掌、观音掌、...</small></li>
            <li>...</li>
            </ur>
            <h3>小院子活动公告</h3>
            <p>双十一活动来袭</p>
            <ul class="nav nav-pills nav-stacked">
                <li ><a href="#">小院子六大售后服务...</a></li>
                <li ><a href="#">双十一活动重磅来袭...</a></li>
                <li ><a href="#">专业团队保证植物按...</a></li>
            </ul>
            <hr class="hidden-sm hidden-md hidden-lg">
        </div>

<!--        栅格系统右边9格分为图片展示栏-->
        <div class="col-sm-9">
            <h2>植物限时优惠</h2>
            <h5>总有你想不到的低价</h5>
            <div class="fakeimg">
                <img src="../img2/1.jpg" width="24%" height="200px">
                <img src="../img2/2.jpg" width="24%" height="200px">
                <img src="../img2/5.jpg" width="24%" height="200px">
                <img src="../img2/4.jpg" width="24%" height="200px">
            </div>
            <p>一些文本..</p>
            <p>这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？</p>
            <br>

            <h2>新品到店</h2>
            <h5>本店新到了栀子花、满天星等花材，快来订购吧！</h5>
            <div class="fakeimg">
                <img src="../img2/6.jpg" width="24%" height="200px">
                <img src="../img2/7.jpg" width="24%" height="200px">
                <img src="../img2/8.jpg" width="24%" height="200px">
                <img src="../img2/9.jpg" width="24%" height="200px">
            </div>
            <p>一些文本..</p>
            <p>这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？</p>

            <h2>萌萌多肉</h2>
            <h5>本店新到了小多肉，品种齐全，快来订购吧！</h5>
            <div class="fakeimg">
                <img src="../img2/23.jpg" width="24%" height="200px">
                <img src="../img2/24.jpg" width="24%" height="200px">
                <img src="../img2/25.jpg" width="24%" height="200px">
                <img src="../img2/26.jpg" width="24%" height="200px">
            </div>
            <p>一些文本..</p>
            <p>这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？</p>
        </div>
    </div>
</div>

<div class="jumbotron text-left" style="margin-bottom:0">

    <p>店铺位置：****************   订购电话：1**********   </p>
</div>



</body>
</html>

有问题可在下方评论（0o0）!

Keaiting12134

关注

34
点赞
踩
284

收藏

觉得还不错? 一键收藏
14
评论
初学者-如何使用bootstrap框架设计一个简单的网页主界面HTML+CSS+Bootstrap

自己也刚刚开始接触框架，在学习了bootstrap框架过后，联系写了一个简单的主界面，主界面的图如下：这个页面主要用的bootstrap的栅格系统进行整体布局，网页效果简约大方，最重要的是比较简单吧。下面展示源代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小院子官网</title> <link hre
复制链接

扫一扫

专栏目录