Bootstrap4学习笔记+练习

62 阅读 0 评论 41 点赞

我是靠谱客的博主无聊柚子，最近开发中收集的这篇文章主要介绍Bootstrap4学习笔记+练习，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、导航栏内容居右：ml-auto；导航栏内容居左：mr-auto；

附上未完成的练习。。

<!DOCTYPE html>
<html>
<head>
    <title>监控公司</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="./css/index.css">
    <link rel="stylesheet" type="text/css" href="./css/common.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-sm bg-light navbar-light">
	  <!-- Brand -->
		<a class="navbar-brand" href="#">
			<img src="./images/logo.png" style="height: 75px;">
		</a>

		<!-- Toggler/collapsibe Button -->
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
			<span class="navbar-toggler-icon"></span>
		</button>
		<!-- <div style="width: 50px; height: 50px; background-color: green;"></div> -->
		<!-- Navbar links -->
		<div class="collapse navbar-collapse" id="collapsibleNavbar">
			<ul class="navbar-nav ml-auto">
			  <li class="nav-item">
			      <a class="nav-link" href="#" style="color: #da3600;">网站首页</a>
			  </li>
			  <li class="nav-item">
			      <a class="nav-link" href="#">关于我们</a>
			  </li>
			  <li class="nav-item">
			      <a class="nav-link" href="#">新闻资讯</a>
			  </li>
			  <li class="nav-item">
			      <a class="nav-link" href="#">产品中心</a>
			  </li>
			  <li class="nav-item">
			      <a class="nav-link" href="#">技术专区</a>
			  </li>
			  <li class="nav-item">
			      <a class="nav-link" href="#">留言中心</a>
			  </li>
			  <li class="nav-item">
			      <a class="nav-link" href="#">联系我们</a>
			  </li>
			</ul>
		</div> 
	</nav>
</body>
</html>

/*********************导航栏部分************************/
.navbar{
    padding-left: 7%;
    padding-right: 7%;
}
.navbar-nav {
    /*margin-left: 31%;*/
}
.bg-light {
    background: linear-gradient(to bottom,#F2F2F2 0%,#bbb 100%);
}
.navbar-light .navbar-nav .nav-link {
    color: #333333;
}
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
    color: #da3600;
}
.nav-item {
    margin: 0 6px;
}