bootstrap系列-1.简单的Demo

奇点码农

已于 2022-08-19 08:18:11 修改

阅读量463

点赞数

分类专栏： bootStrap 文章标签： bootstrap css 前端

于 2022-08-17 19:36:43 首次发布

本文链接：https://blog.csdn.net/cdc8596/article/details/126392908

版权

bootStrap 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

关键信息以备注形式讲解

<!DOCTYPE html>
<html>
<head>
<!--META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>BootStarp简单Demo</title>
    <!--引用bootstrap css样式表-->
    <link rel="stylesheet" href="bootstrap.css">
	 <meta charset="utf-8" />
    <!--width=device-width:宽度为设备宽度  initial-scale:缩放比例设置-->
    <!--width：设置layout viewort的宽度，值为一个正整数，或者字符串"device-width"，也就是设备宽度
    height：设置layout viewport的高度，之歌属性对我们并不重要，很少使用
    initial-scale：设置页面的初始缩放值，为一个数字，可以带小数
    minimum-scale：设置页面的最小缩放值，为一个数字，可以带小数
    maximum-scale：设置页面的最大缩放值，为一个数字，可以带小数
    user-scalable：是否允许用户缩放，值为"yes"或"no"
    -->
    <meta name="viewport"  content="width=device-width,initial-scale=1" >    
    <style>
        body {
        padding-top:50px;
        }
        .starter {
            padding:40px 15px;
            text-align:center;
        }
    </style>
</head>
<body>
    <!--nav标签是html5版本中新增的标签,是使用来定义导航链接的部分,navigation:增加浏览器对导航栏显示的兼容性-->
    <nav class="nav 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></li>
                    <li><a href="#">Abort</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container">
        <!--这里定义的-->
        <div class="starter">
            <h1>Bootstrap starter</h1>
            <p class="lead">你好!会了吗!</p>
        </div>
    </div>
</body>
</html>