<!DOCTYPE html> <html> <head> <meta charst="gb2312"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- user-scalable=no 在移动设备浏览器上，禁止用户缩放（zooming） --> <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0 user-scalable=no"> <title>Bootstrap基础练习</title> <!-- Bootstrap --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- 以下2个插件是用于在IE8支持HTML5元素和媒体查询的，如果不用可移除 --> <!-- 注意：Respond.js不支持 file:// 方式的访问 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- 标准按钮 --> <p> <button type="button" class="btn btn-default">Defaul（默认按钮）</button> <!-- 提供视觉加重，表示在一组button中，该按钮是最主要的button --> <button type="button" class="btn btn-primary">Primary（加重按钮）</button> <!-- 表示成功或正使用的button --> <button type="button" class="btn btn-success">Success（成功或正使用按钮）</button> <!-- 表示信息的button --> <button type="button" class="btn btn-info">Info（信息按钮）</button> <!-- 表示要进行某种行为的button --> <button type="button" class="btn btn-warning">Warning（进行某种行为按钮）</button> <!-- 表示危险或错误行为的button --> <button type="button" class="btn btn-danger">Danger（危险或错误行为按钮）</button> <!-- 让button的行为看起来像链接一样 --> <button type="button" class="btn btn-link">Link（链接按钮）</button> </p> <!-- 按钮大小 .btn-lg、.btn-sm、.btn=xs --> <p> <button type="button" class="btn btn-default btn-lg">大型Button</button> <button type="button" class="btn btn-primary btn-lg">大型Button</button> </p> <p> <button type="button" class="btn btn-success">正常Button</button> <button type="button" class="btn btn-info">正常Button</button> </p> <p> <button type="button" class="btn btn-warning btn-sm">小型Button</button> <button type="button" class="btn btn-danger btn-sm">小型Button</button> </p> <p> <button type="button" class="btn btn-default btn-xs">超小Button</button> <button type="button" class="btn btn-primary btn-xs">超小Button</button> </p> <!-- .btn-block不根据文本的长短，充满父容器100%宽度的按钮 --> <p> <button type="button" class="btn btn-primary btn-block">充满父容器的100%宽度的按钮</button> </p> <!-- 多标签支持 --> <p> <a class="btn btn-default" href="#">链接</a> <button class="btn btn-primary" type="submit">按钮</button> <input class="btn btn-success" type="button" value="输入框"> <input class="btn btn-warning" type="submit" value="提交"> </p> <!-- 按钮状态：活动状态、禁用状态 --> <!-- 活动状态 --> <p> <button type="button" class="btn btn-primary btn-lg active">Active Button</button> <a href="#" class="btn btn-primary btn-lg active" role="button">Active Link Button</a> </p> <!-- 禁用状态 --> <!-- 禁用状态按钮，主要实现将按钮的背景色做65%的透明处理。方法两种：1、使用原始disable属性。2、使用.disable样式。两者区别：.disable不禁止按钮的默认行为。 --> <p> 方法一：<button type="button" class="btn btn-danger" disable="disable">Active Button</button> 方法二：<button type="button" class="btn btn-danger" disable>Active Button</button> </p> </body> </html>
时间： 2024-11-25 18:52:03