首页 > 其他分享 >Bootstrap

Bootstrap

时间:2023-02-08 11:33:02浏览次数:28  
标签:这是 一个 Bootstrap 标题 内容 珠海 按钮


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<!-- 适合手机的屏幕 -->
<meta name="viewport" content="width=device-width, inital-scale=0.5,maximum-scale=1,minimum-scale=1,user-scalable=no">
<title>Bootstrap</title>
<!-- 引入jQuery -->
<script type="text/javascript" src="jQuery/jquery-1.8.2.min.js"></script>
<!-- 引入bootstrap的css -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"></link>

<script type="text/javascript" src="js/bootstrap.min.js"></script></head>

<body>
<button class="btn btn-info">Hello World!</button>

<h1>标题一<small>小标题</small></h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>

<span class="h1">标题一</span>
<span class="h2">标题二</span>
<span class="h3">标题三</span>
<span class="h4">标题四</span>
<span class="h5">标题五</span>
<span class="h6">标题六</span>

<!-- 段的位置 -->
<p class="text-left">
哈哈
</p>
<p class="text-center">
哈哈
</p>
<p class="text-right">
哈哈
</p>

<!-- 大小写转化 -->
<p class="text-lowercase">
HELLO!
</p>

<p class="text-uppercase">
HELLO!
</p>


<!-- 表格 -->
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>标题一</th>
<th>标题二</th>
<th>标题三</th>
<th>标题四</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td>内容一</td>
<td>内容二</td>
<td> 内容三</td>
<td>内容四</td>
</tr>
<tr class="waring">
<td>内容一</td>
<td>内容二</td>
<td>内容三</td>
<td>内容四</td>
</tr>
红色
<tr class="danger">
<td>内容一</td>
<td>内容二</td>
<td>内容三</td>
<td>内容四</td>
</tr>
</tbody>
</table>

<!-- 表单 -->
<form class="form-inline">
<div class="form-group">
<label for="">这是一个输入框</label>
<input type="text" class="form-control" placeholder="这是一个输入框">
</div>
<div class="form-group">
<label for="">这是一个下拉框</label>
<select class="form-control">
<option>珠海</option>
<option>珠海</option>
<option>珠海</option>
</select>
</div>
<div class="form-group">
<label for="">这是一个输入框</label>
<textarea class="form-group"></textarea>
</div>
</form>

<!-- 按钮 -->
<button class="btn btn-default">这是一个按钮</button>
<button class="btn btn-success">这是一个按钮</button>
<button class="btn btn-primary">这是一个按钮</button>
<button class="btn btn-info">这是一个按钮</button>
<button class="btn btn-warning">这是一个按钮</button>
<a class="btn btn-danger" href="#">这是a标签的按钮效果</a>

<!-- 字体图标 -->
<span class="glyphicon glyphicon-ok"></span>
<span class="glyphicon glyphicon-heart"></span>

<button class="btn btn-default">
<span class="glyphicon glyphicon-star"></span>
这是一个按钮
</button>
</body>
</html>


标签:这是,一个,Bootstrap,标题,内容,珠海,按钮
From: https://blog.51cto.com/u_12182769/6043806

相关文章