Bootstrap 创建一个网页

前面几十节分别学过网格、导航栏、超大屏幕、面板与按钮，本节把它们组装成一个完整的企业官网静态页，体会从"小组件"到"整页面"的完整流程。整体结构分四段：顶部导航、横幅与主内容、三列信息、页脚。

布局规划

页面自上而下依次是：navbar 负责站内导航；jumbotron 制造首屏大横幅；row 加 col-md-4 把内容排成三列；页脚自定义深色底。所有中间内容放进 container，保证居中并随屏幕自适应。

导航栏

导航栏直接放在 <body> 开头，这里选用 navbar-inverse 深色风格：

<nav class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">某某科技</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </div>
</nav>

显示效果：页面顶部出现整行深色导航条，左侧品牌名"某某科技"，右侧三个菜单项且"首页"默认高亮。

横幅与三列主内容

横幅用 jumbotron 放站点标语，下方栅格三列各放一张面板卡片：

<div class="jumbotron">
    <h1>欢迎来到某某科技</h1>
    <p>提供专业的企业信息化解决方案。</p>
</div>
<div class="row">
    <div class="col-md-4">
        <div class="panel panel-default"><h3>产品</h3><p>稳定可靠的产品线</p></div>
    </div>
    <div class="col-md-4">
        <div class="panel panel-default"><h3>服务</h3><p>7×24 小时支持</p></div>
    </div>
    <div class="col-md-4">
        <div class="panel panel-default"><h3>联系</h3><p>欢迎洽谈合作</p></div>
    </div>
</div>

显示效果：灰底大横幅居中醒目；三张面板在宽屏下从左到右并排，标题与摘要清晰易读。

页脚

页脚要通栏显示，须放在 container 之外，用行内样式直接做深色底：

<footer class="text-center"
    style="background:#333;color:#fff;padding:20px">
    © 2024 某某科技 版权所有
</footer>

显示效果：页面底部出现一条深色居中文字的页脚，宽度与浏览器一致。

拼装成完整页面

把导航栏、横幅、三列内容、页脚按顺序写进 <body>，再在 <head> 中引入 Bootstrap 3 样式（如需折叠菜单还要引 jQuery 与 bootstrap.min.js）。缩窄浏览器窗口观察：三列先变两列再堆叠为单列，栅格让整页在手机上也井井有条。

小结：制作网页 = 规划"导航 + 横幅 + 栅格内容 + 页脚"骨架，再逐段套用组件并把它们装进 container；熟练后可复制本套路改文字、配色与栏目，快速产出各类静态站点。

笔记加载中…

标签：#Bootstrap

返回知识库