bootstrap入门模板开发（导航+正文）

最新推荐文章于 2024-01-03 18:00:00 发布

原创最新推荐文章于 2024-01-03 18:00:00 发布 · 822 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

107 篇文章

订阅专栏

本文将引导您入门Bootstrap，通过实例讲解如何构建基本的导航栏和页面主要内容区域。首先，我们将介绍Bootstrap框架的基本结构和CSS类。然后，逐步搭建一个包含响应式导航和清晰内容区的网页模板。这个教程适合初学者，旨在帮助您快速掌握Bootstrap的基础应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<img src="https://img-blog.youkuaiyun.com/20150227151406380" style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);" alt="" />

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title></title>

    <link rel="stylesheet" href="bootstrap.min.css">
    <style>
        body{
            padding-top: 50px;
        }
        .starter{

            padding:40px 15px;
            text-align: center;
        }

    </style>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">project name</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">home</a><<span style="font-family: Arial, Helvetica, sans-serif;">/li></span>

                    <li ><a href="#">about</a></li>
                    <li ><a href="#">contact</a></li>
                </ul>
            </div>
         </div>
    </nav>
<div class="container">
    <div class="starter">
        <h1>bootstrap starter template</h1>
        <p class="lead">你好，我好，大家好你好，我好，大家好你好，我好，大家好你好，我好，大家好</p>
    </div>


</div>

</body>
</html>

<span style="font-family: Arial, Helvetica, sans-serif;"><link rel="stylesheet" href="bootstrap.min.css">  导入外部样式表 bootstrap 的 css 样式</span>

<span style="font-family: Arial, Helvetica, sans-serif;">
</span>

<span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="html"><meta name="viewport" content="width=device-width,initial-scale=1">设置屏幕自适应：设置整个的宽是屏幕的宽，当前的缩放比例为不缩放，即scale=1

</pre><pre name="code" class="html"><pre name="code" class="html"><nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">  创建导航，样式是inverse，位置为固定顶部，设定role

</pre><pre name="code" class="html"><pre name="code" class="html"> <span style="white-space:pre">	</span><div class="container">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">project name</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">home</a></li>
                    <li ><a href="#">about</a></li>
                    <li ><a href="#">contact</a></li>
                </ul>
            </div>
         </div>

为导航设置logo：project name

为导航设置选项 home about contact 并为home这是选中，所有都习惯性得承载在a标签中

</pre><pre name="code" class="html"><pre name="code" class="html"><div class="container">
    <div class="starter">
        <h1>bootstrap starter template</h1>
        <p class="lead">你好，我好，大家好你好，我好，大家好你好，我好，大家好你好，我好，大家好</p>
    </div>

</div>

添加正文内容，为避免被覆盖，调整样式如下：

    <style>
        body{
            padding-top: 50px;
        }
        .starter{
            padding:40px 15px;
            text-align: center;
        }
    </style>

设置starter容器上下距离40排序，左右距离15px 居中。