响应式头部

最新推荐文章于 2024-01-09 11:04:10 发布

Einstein8

最新推荐文章于 2024-01-09 11:04:10 发布

阅读量817

点赞数

分类专栏：笔记本推荐文章标签：响应式导航

本文链接：https://blog.csdn.net/Einstein8/article/details/77751439

版权

笔记本推荐专栏收录该内容

8 篇文章 0 订阅

订阅专栏

最近学习了响应式的导航，然后模仿了官网

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--提高ie浏览器的性能和渲染速度-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--让移动端适用该页面-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
        <style>
            .masthed{
                padding: 90px 0 110px;
            }
            .container{
                text-align: center;
            }
            .media-button-links{
                margin-top: 30px;
            }
            .jumbotron{
                background: url(http://static.bootcss.com/www/assets/img/bs-docs-masthead-pattern.png);
            }
        </style>
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-static-top navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button class="navbar-toggle" data-toggle='collapse' data-target='#col'>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="" class="navbar-brand">Bootstrap中文网</a>
                </div>
                <div class="collapse navbar-collapse" id="col">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="">关于</a></li>
                    </ul>
                    <ul class="nav navbar-nav">
                        <li><a href="">Bootstrap 3.0</a></li>
                        <li><a href="">Bootstrap 4.0预览</a></li>
                        <li><a href="">less教程</a></li>
                        <li><a href="">JQUERY</a></li>
                        <li><a href="">网站实例</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="jumbotron masthed">
            <div class="container">
                <h1>Bootstrap</h1>
                <h2>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</h2>
                <p class='media-button-links'><a href="#" class="btn btn-primary btn-lg">Bootstrap3中文文档(v3.3.7)</a></p>
            </div>
        </div>
    </body>
</html>

简单写了导航条，按照框架的要求一步步拽写
了解到一些图标转换为字体再应用在页面处
导航条的关键字有navbar

Einstein8

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式头部

最近学习了响应式的导航，然后模仿了官网<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>  <meta http-equiv="X-UA-Compatible" content="IE=edge">
复制链接

扫一扫