Bootstrap4学习

最新推荐文章于 2024-05-18 14:03:48 发布

VIP文章 Suxiaomowang

最新推荐文章于 2024-05-18 14:03:48 发布

阅读量808

点赞数 1

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

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

版权

Bootstrap4 按钮

btn 按钮没有边框和背景

btn-xxxx 设置按钮背景

btn-outline-primary 设置按钮边框颜色鼠标进入后修改背景颜色

<!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">
			<input type="button" class="btn btn-info btn-outline-primary" value="测试按钮" />
		</div>
	</body>
</html>

鼠标指上去会实现hover的效果

btn-block 设置块级按钮

<input type="button" class="btn btn-info btn-outline-primary  btn-block" value="测试按钮" />

可以看到按钮拥有了块级元素的效果

btn-lg 大按钮

btn-sm 小按钮

btn-block 设置块级按钮

<input type="button" class="btn btn-info btn-outline-primary btn-block btn-lg" value="大按钮" />
<input type="button" class="btn btn-info btn-outline-primary btn-block" value="普通按钮" />
<input type="button" class="btn btn-info btn-outline-primary btn-block btn-sm" value="小按钮" />

可以看到按钮大小的不同

active 默认选中

disabled 不可选取

<input type="button" class="btn btn-info btn-outline-primary btn-block btn-lg active" value="大按钮" />
<input type="button" class="btn btn-info btn-outline-primary btn-block" value="普通按钮" />
<input type="button" class="btn btn-info btn-outline-primary btn-block btn-sm disabled" value="小按钮" />

可以看到大按钮默认选中，小按钮不可选取

我们也可以使用 botton 标签 a 标签替换 input 标签

<input type="button" class="btn btn-info btn-outline-primary btn-block btn-lg active" value="大按钮" />
<a href="#" class="btn btn-info btn-outline-primary btn-block" >普通按钮</a>
<button class="btn btn-info btn-outline-primary btn-block btn-sm disabled"  >小按钮</button>

Bootstrap4 按钮组

1.创建下拉菜单 class="dropdown-menu"

2.创建下拉菜单每一项 class="dropdown-item"

3.按钮绑定下拉菜单,class设置dropdown-toggle,按钮设置data-toggle="dropdown"

4.为了当前按钮与下拉菜单组合，使用div设置class="btn-group"将按钮与下拉菜单包围

btn-group-vertical:设置垂直按钮组

<div class="btn btn-group">
   <button class="btn btn-info btn-outline-primary dropdown-toggle" data-toggle="dropdown">菜单</button>
   <div class="drop

最低0.47元/天解锁文章

Suxiaomowang

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Bootstrap4学习

btn 按钮btn 按钮没有边框和背景btn-xxxx 设置按钮背景btn-outline-primary 设置按钮边框颜色鼠标进入后修改背景颜色<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt.
复制链接

扫一扫