Bootstrap4学习笔记+练习

95 阅读 0 评论 63 点赞

我是靠谱客的博主无聊柚子，这篇文章主要介绍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">
	  
		<a class="navbar-brand" href="#">
			<img src="./images/logo.png" style="height: 75px;">
		</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
			<span class="navbar-toggler-icon"></span>
		</button>
		
		
		<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!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>

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*********************导航栏部分************************/
.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;
}