Home >  > 前端模板

前端模板

0

自己折腾的一个模板:

效果预览:

代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v3.8.5">
    <title>Navbar Template · Bootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.css">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>


<body>
      
<nav class="navbar-header">
    <div class="container">
    <a href="" class="navbar-brand" style="width:450px;">
        <img src="http://icollagen.cn/wp-content/themes/simplegreen/static/picture/logo.png" style="height:60px;"/></a>
        <div class="searchform">
            <form class="form-inline">
                <div class="md-form my-0">
                    <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
                </div>
                <button class="btn btn-info btn-md my-2 my-sm-0 ml-3" type="submit">搜索</button>
            </form>
        </div>
    <!-- </div> -->
    </div>
</nav>


<nav class="navbar navbar-expand-lg navbar-dark bg-info">
  <div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExample07">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="#">美容美发</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="#">宠物相关</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="#">生活服务</a>
        </li>

      </ul>
    </div>
  </div>
</nav>

</body>

备忘:
1.搜索框
之前搜索框直接显示在logo下面,我自己加了一个Div。

.searchform{
	padding: 1.5rem 0rem;
	float:right	
}

2.如果要修改导航栏中的项目的间距,可以修改下面的值。

  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 3.5rem;
    padding-left: 0.5rem;
  }
本文暂无标签

发表评论

*

*