bootstrap4学习

最新推荐文章于 2024-06-27 06:31:55 发布

Suxiaomowang

最新推荐文章于 2024-06-27 06:31:55 发布

阅读量693

点赞数 1

分类专栏： bootstrap学习分享文章标签： html5 html css

本文链接：https://blog.csdn.net/Suxiaomowang/article/details/119932835

版权

本文详细介绍了Bootstrap4的各种UI组件，包括导航栏、面包屑导航、表单（堆叠表单、内联表单、复选框、单选框）、输入框组、轮播、模态框、提示框/弹出框、滚动监听、边框/浮动以及CSS3弹性盒子的使用方法和实例，帮助开发者更好地理解和运用Bootstrap4进行网页布局。

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

Bootstrap4 导航栏

用 .navbar 类来创建一个标准的导航栏

navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。

用 ul 元素并添加 class="navbar-nav" 类。然后在 li 元素上添加 .nav-item 类， a 元素上使用 .nav-link 类:

删除 .navbar-expand-xl|lg|md|sm 类来创建垂直导航栏

bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light

激活和禁用状态: 可以在

元素上添加 .active 类激活。 .disabled 类禁用的。

设置在nav中ul前面设置a元素.navbar-brand 类用于高亮显示品牌/Logo

li上设置dropdown，li中的a上设置dropdown-toggle，data-toggle="dropdown"，li中创建下拉菜单

导航栏的表单form 元素使用 class="form-inline" 类来排版输入框与按钮

navbar-text:非连接文本,保证水平对齐

使用 .fixed-top 类来实现导航栏的固定 .fixed-bottom 类用于设置导航栏固定在底部

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!-- Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
		<!--  jQuery文件 务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- 用于弹窗、提示、下拉菜单，包含了 popper.min.js  -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<title></title>
	</head>
	<body>
		<div class="container">
			<nav class="navbar navbar-expand-lg bg-info fixed-top">
				<a href="#" class="navbar-brand">
					<img src="imgs/sxm.jpg" width="30px" height="30px" />
				</a>
			    <ul class="navbar-nav">
				<li class="nav-item"><a href="#" class="nav-link active">首页1</a></li>
				<li class="nav-item"><a href="#" class="nav-link">首页2</a></li>
				<li class="nav-item dropdown">
					<a href="#" class="nav-link  dropdown-toggle" data-toggle="dropdown">首页3</a>
					<div class="dropdown-menu">
						<a class="dropdown-item" href="#">下拉 1</a>
						<a class="dropdown-item" href="#">下拉 2</a>
						<a class="dropdown-item" href="#">下拉 3</a>
					</div>
				</li>
				<li class="nav-item"><a href="#" class="nav-link disabled">首页4</a></li>
			    </ul>
			    <form class="form-inline">
				    <input class="form-control" type="text" placeholder="搜索">
				    <button class="btn btn-info" type="button">搜索</button>
			    </form>
			    <!--非链接文本-->
			    <span class="navbar-text">navbar-text 非链接文本</span>
			</nav>
		</div>
	</body>
</html>

Bootstrap4 面包屑导航（Breadcrumb）

ul设置breadcrumb表示一个面包屑

breadcrumb-item面包屑中的每一项

<div class="container">
    <ul class="breadcrumb">
	    <li class="breadcrumb-item"><a href="">顶级分类列表</a></li>
		<li class="breadcrumb-item"><a href="">IT计算机</a></li>
		<li class="breadcrumb-item"><a href="">java</a></li>
	</ul>
</div>

Bootstrap4 表单

堆叠表单

垂直方向排列，全屏宽度

<div class="container">
	<form>
		<input type="text" class="form-control" id="email" placeholder="用户名">
	</form>
</div>

内联表单

所有内联表单中的元素都是左对齐的 form元素设置form-inline

<form class="form-inline">
	用户名:<input type="text" class="form-control" id="email" placeholder="用户名">
</form>

复选框

使用 .form-check-inline 类可以让选项显示在同一行上

<div class="container">
	<input type="checkbox" class="form-check-inline" name="fuxue" value="">Option 1
	<input type="checkbox" class="form-check-inline" name="fuxue" value="">Option 2
    <input type="checkbox" class="form-check-inline" name="fuxue" value="">Option 3
</div>

单选框

使用 .radio-inline 类可以让选项显示在同一行上

<input type="radio" class="radio-inline" name="danxue" value="">Option 1
<input type="radio" class="radio-inline" name&#

最低0.47元/天解锁文章

Suxiaomowang

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录