Bootstrap03(图标的使用)

最新推荐文章于 2024-08-08 07:17:07 发布

YL-IP.man

最新推荐文章于 2024-08-08 07:17:07 发布

阅读量982

点赞数

文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_65186994/article/details/124572169

版权

本文介绍了如何在Bootstrap中使用图标，通过访问官网下载图标插件，实现如放大镜等图标的展示。

摘要由CSDN通过智能技术生成

1.图标的使用

进入bootstrap官网下载图标插件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例4：图标组件的使用</title>
		<!-- 引入Bootstrap的样式-->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<!-- 引入Bootstrap的图标样式 -->
		<link rel="stylesheet" type="text/css" href="font/bootstrap-icons.css"/>
		<style>
			.navbar-collapse{
				 flex-grow: 0;/* 固定容器中 1代表弹性过大占用父容器剩余空间  0代表不占用 */
			 }
			 .form-group{
				 width: 300px;/* 宽度 */
				 margin-left: auto;/* 左间距自适应 自动 */
				 margin-right: auto;/* 右间距自适应 自动 */
				 margin-top: 31px;/* 100-38=62/2=31px  居中*/
			 }
			 .ss{
				 height: 100px;/* 高度 */
				 margin-top: 30px;/* 上间距 */
				 background-color: #DCDCDC;/* 背景颜色 */
			 }
			 /* 画像*/
			 .figure{
				 text-align: center;/* 文字居中 */
				 margin-top: 20px;/* 上间距 */
			 }
			 .list-group,#carouselExampleIndicators{
				 margin-top: 30px;/* 上间距 */
			 }
			 /*指示灯样式 */
			 .carousel-indicators li{
				 background-color: blue;
			 }
			 
			 .xxx{
				 margin-top: 30px;/* 上间距 */
				 background-image: url(img/title_bj.png);/* 背景图片 */
				 background-repeat: no-repeat;/* 不平铺 */
				 color: white;/* 字体颜色 */
				 font-size: 18px;/* 字体大小 */
				 padding-left: 20px;/* 左内间距 */
			 }
		 </style>
	</head>
	<body>
		<!-- 导航区域条组件  -->
		<nav class="navbar navbar-expand-lg navbar-light bg-light">
			<div class="container">
				<a class="navbar-brand" href="#">您好，欢迎来到嗷嗷的牛逼书店</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
				 aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarNav">
					<ul class="navbar-nav">
						<li class="nav-item active">
							<a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
						</li>
						<li class="nav-item">
							<a class="n