创建Navbar Vanilla HTML CSS Vs Bootstrap

创建Navbar Vanilla HTML CSS Vs Bootstrap

导航栏是指导航条,是网页的一个组成部分。它列出了网站内部和外部的许多链接,使不同部分之间的导航变得容易。目录、菜单和索引是导航条的一些常见例子。

构建导航条可能会耗费时间,而且令人困惑。因此,像Bootstrap这样的库有很多内置的类和选项,很方便。

例子1:不使用Bootstrap的导航条(Vanilla HTML CSS)。

<!DOCTYPE html>
<html>
    <head>
        <title>Navbar Geeksforgeeks</title>
        <style>
            body {
                margin: 0;
            }
            nav {
                width: 100%;
            }
            ul {
                margin: 0;
                padding: 0;
            }
            li {
                float: left;
                margin: 0;
                padding-top: 10px;
                padding-bottom: 10px;
                font-size: 30px;
                width: 12%;
                list-style: none;
                text-align: center;
            }
            a {
                color: rgb(0, 102, 0);
                text-decoration: none;
            }
            img {
                width: 80%;
            }
            #image {
                width: 24%;
            }
            #blankSpace {
                width: 16%;
                height: 34px;
            }
        </style>
    </head>
    <body>
        <nav>
            <ul>
                <li id="image">
                  <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png" 
                       alt="" /></li>
                <li><a href="">Tutorials</a></li>
                <li><a href="">Students</a></li>
                <li><a href="">Courses</a></li>
                <li id="blankSpace"><a href=""></a></li>
                <li><a href="">Hire with us!</a></li>
                <li><a href="">Login</a></li>
            </ul>
        </nav>
    </body>
</html>

解释:
HTML:

  • <nav>: 父元素,包裹了我们导航条内的所有按钮和图标。
  • <ul>:(无序列表)将导航栏中的所有链接存储为一个列表是一个好的做法。
  • <img>: 它是用于图标。
  • <a>:它被用作导航条的按钮。

CSS:

  • float。这个属性将元素的对齐方式从垂直改为水平。
  • list-style。当设置为none时,它将删除列表的弹出点。
  • text-decoration。它负责链接的下划线。
  • width:它指的是一个元素所占用的水平空间。
  • height。一个元素所占用的垂直空间。

输出:
创建Navbar Vanilla HTML CSS Vs Bootstrap

例2:使用Bootstrap的导航条

<!DOCTYPE html>
<html>
    <head>
        <title>bootstrapNavbar Geeksforgeeks</title>
        <link rel="stylesheet" 
              href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
              integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" 
              crossorigin="anonymous" />
        <style>
            div {
                text-align: center;
            }
            img {
                width: 80%;
            }
            .btn {
                font-size: 25px;
                color: rgb(0, 102, 0);
            }
        </style>
    </head>
  
    <body>
        <div class="row">
            <div class="col-3">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png" 
                     alt="" />
            </div>
            <div class="col-4 row">
                <div class="col-4">
                    <a href="#" class="btn">Tutorials</a>
                </div>
                <div class="col-4">
                    <a href="#" class="btn">Students</a>
                </div>
                <div class="col-4">
                    <a href="#" class="btn">Courses</a>
                </div>
            </div>
            <div class="col-2 row"></div>
            <div class="col-3 row">
                <div class="col-8">
                    <a href="#" class="btn">Hire with us!</a>
                </div>
                <div class="col-4">
                    <a href="#" class="btn">Login</a>
                </div>
            </div>
        </div>
    </body>
</html>

解释:由于我们的目标是一个没有任何JavaScript的静态导航条,使用格而不是一个导航是可行的。

1.将html文档与Bootstrap官方CDN(内容交付网络)链接。
2.定义一个带有bootstrap类row的div(这个类可以帮助我们把一行分成小列)。
3.接下来定义四个div,其类别分别为col-3、4、2和3(整数对应于一列的宽度)(总宽度为12)。
4.根据需要创建嵌套的div。
5.给所有的按钮一个bootstrap类btn,为我们提供所需的padding、margin和hover效果。

CSS:

1.这一次我们的CSS代码要小得多,包括一些小的样式,如字体大小和颜色。
2.padding和margin是由bootstrap类来照顾的。
3.导航条的整个布局是用bootstrap的行和列来完成的,这进一步减少了我们的CSS。

输出:
创建Navbar Vanilla HTML CSS Vs Bootstrap

两种方法之间的差异。

1.Bootstrap版本中的CSS非常少。
2.与bootstrap相比,vanilla的代码非常灵活。
3.编写vanilla代码是非常繁琐的,而一旦理解了bootstrap代码就变得非常容易。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

Bootstrap教程