<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>预定义样式风格</title>
<link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css">
<script src="../JS/jquery-3.2.1.min.js"></script>
<script src="../JS/bootstrap.js"></script>
<style type="text/css">
#login{width: 400px;}
</style>
</head>
<body style="height: 2000px">
<div class="container">
<br>
<input type="button" value="自定义" class="btn">
<input type="button" value="首选项" class="btn btn-primary">
<input type="button" value="成功" class="btn btn-success">
<input type="button" value="一般信息" class="btn btn-info">
<input type="button" value="警告" class="btn btn-warning">
<input type="button" value="危险" class="btn btn-danger">
<input type="button" value="默认" class="btn btn-default">
<input type="button" value="链接" class="btn btn-link">
<br><br>
<input type="button" value="首选项" class="btn btn-primary">
<input type="button" value="首选项" class="btn btn-primary btn-lg">
<input type="button" value="首选项" class="btn btn-primary btn-sm">
<input type="button" value="首选项" class="btn btn-primary btn-xs">
<br><br>
<br><br>
<input type="button" value="首选项" class="btn btn-primary">
<input type="button" value="首选项" class="btn btn-primary active">
<input type="button" value="首选项" class="btn btn-primary disabled">
<br><br>
<br><br>
<p>默认段落</p>
<p class="bg-primary">首选项</p>
<p class="bg-success">成功</p>
<p class="bg-info">一般信息</p>
<p class="bg-warning">警告</p>
<p class="bg-danger">危险</p>
<br><br>
<span>默认文字</span><br>
<span class="text-paimary bg-primary">首选项</span><br>
<span class="text-success bg-success">成功</span><br>
<span class="text-info bg-info">一般信息</span><br>
<span class="text-warning bg-warning">警告</span><br>
<span class="text-danger bg-danger">危险</span><br>
<br><br>
<div class="alert alert-primary">我是警告框</div>
<div class="alert alert-warning">我是警告框</div>
<div class="alert alert-info">我是警告框</div>
<div class="alert alert-success">我是警告框</div>
<div class="alert alert-danger">我是警告框</div>
<br><br>
<div class="panel panel-primary">
<div class="panel-heading">
<h4>我是面板的标题</h4>
</div>
<div class="panel-body">
<h4>我是面板的主体内容</h4>
</div>
</div>
<br><br><br><br>
<div id="login" class="panel panel-primary">
<div class="panel-heading">Login</div>
<div class="panel-body">
<div class="form-group">
<label>用户名:</label><input type="text" class="form-control input-sm">
<div class="alert alert-warning">用户名不能为空</div>
<label>密码:</label><input type="password" class="form-control">
<a href="#" class="text-info">忘记密码</a>
</div>
<input type="button" value="登录" class="btn btn-primary pull-right">
</div>
</div>
</div>
</body>
</html>
<!--
预定义风格的样式: 首选项 成功 一般信息 警告 危险
1.按钮样式:
btn(自定义) primary success info warning danger default(默认) link(链接)
2.按钮大小:
如果没有定义就是默认大小 还有三种:lg sm xs
3.按钮状态:
选中状态active 禁用状态:disabled
4.按钮种类:
常给 a input button 这三种标签加按钮样式
5.按钮默认是行内样式,可以通过设置btn-block使它变成块状,独占一行
6.按钮组,下节学习
<种类 class='btn btn-[primary success info warning danger] btn-[lg sm xs] [active disabled]'>
背景样式:
首选项 成功 一般信息 警告 危险
class='bg-[primary success info warning danger]'
文字样式:
首选项 成功 一般信息 警告 危险
class='text-[primary success info warning danger]'
警告样式:
首选项 成功 一般信息 警告 危险
class='alert alert-[primary success info warning danger]'
面板样式:
首选项 成功 一般信息 警告 危险
class='panel panel-[primary success info warning danger]'
class="panel-[heading body]"
表单样式:
class="form-control" 大小可以设置input-[lg sm xs]
<input type="text" class="form-control input-sm">
-->
bootstrap-预定义样式及简单登录框
最新推荐文章于 2024-06-30 12:00:24 发布