bootstrap --- > 按钮

最新推荐文章于 2024-06-03 20:31:46 发布

栗子好好吃

最新推荐文章于 2024-06-03 20:31:46 发布

阅读量295

点赞数

分类专栏： bootstrap 文章标签：方便查询

bootstrap 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<head>
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" 
	  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body style="padding:5px;">
	<p>
    <!-- 标准按钮样式 -->
	<button type="button" class="btn btn-default">默认</button>
	
	<!-- 表示主要的按钮 -->
	<button type="button" class="btn btn-success">成功</button>
	
	<!-- 表示消息提示 -->
	<button type="button" class="btn btn-info">消息</button>
	
	<!-- 表示警告 -->
	<button type="button" class="btn btn-warning">警告</button>
	
	<!-- 表示危险操作 -->
	<button type="button" class="btn btn-danger">危险</button>
	
	<!-- 使其看起来向一个链接, 同时保持按钮的行为 -->
	<button type="button" class="btn btn-link">Link</button>
	</p>
	
	<p>
		<button type="button" class="btn btn-primary btn-lg">大号按钮</button>
		<button type="button" class="btn btn-default btn-lg">大号按钮</button>
	</p>
	
	<p>
		<button type="button" class="btn btn-primary ">默认按钮</button>
		<button type="button" class="btn btn-default ">默认按钮</button>
	</p>
	
	<p>
		<button type="button" class="btn btn-primary btn-sm">小号按钮</button>
		<button type="button" class="btn btn-default btn-sm">小号按钮</button>
	</p>
	
	<p>
        <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
        <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
    </p>
	
	<p>
	<button type="button" class="btn btn-primary btn-lg btn-block"> 此按钮为块级元素</button>
	<button type="button" class="btn btn-default btn-lg btn-block"> 此按钮为块级元素</button>
	</p>
	
	<p>
	<button type="button" class="btn btn-primary btn-lg" disabled="disabled">主要按钮</button>
	<button type="button" class="btn btn-default btn-lg" disabled="disabled">按钮</button>
	</p>
	
	<p>
		<a href="#" class="btn btn-primary btn-lg disabled" role="button">主要链接</a>
		<a href="#" class="btn btn-default btn-lg disabled" role="button">链接</a>
	</p>
</body>
</html>

提交按钮样式

在这里插入图片描述

// 点击提交之后显示loading... 且按钮变为禁用状态
<button id='loading-btn' data-loading-text="Loading..." class="btn btn-primary"> 提交 </button>
<script>
	$('#loading-btn').click(function (){
		var btn = $(this)
		btn.button('loading')
	})
</script>
// data-loading-text:点击之后的文本

参考 https://v3.bootcss.com/css/#buttons
参考《CSS高效开发实战》 P161~P163

栗子好好吃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap --- > 按钮

<head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRA...
复制链接

扫一扫

专栏目录