Bootstrap

最新推荐文章于 2024-11-01 13:37:40 发布

77不吃香菜.

最新推荐文章于 2024-11-01 13:37:40 发布

阅读量49

点赞数

文章标签： bootstrap 前端 javascript

本文链接：https://blog.csdn.net/luna_H/article/details/133621452

版权

table宽度100%

table-striped条纹表格

table-bordered设置表格边框

table-hover鼠标悬停

table-condensed紧缩表格--内边距

active选中的颜色
       success成功标识
       info提示信息
       warning警告信息
       danger危险信息

table-responsive响应式表格添加横向滚动条

form-group独占一行

form-control宽度100%变为块元素

placeholder input中的提示信息

sr-only隐藏

file上传文件

help-block上传文件的提示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css"/>
		<title></title>
	</head>
	<body style="height: 2000px;">
		For example, <code>&lt;section&gt;</code> should be wrapped as inline.
		<div>&lt;h1&gt;</div>
		<kbd>ctrl+</kbd>
		<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
		<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
		<samp>11111111111</samp>
		<hr >
		<!-- table宽度100% -->
		<!-- table-striped条纹表格 -->
		<!-- table-bordered设置表格边框 -->
		<!-- table-hover鼠标悬停 -->
		<!-- table-condensed紧缩表格--内边距 -->
		<!-- active选中的颜色
		 success成功标识
		 info提示信息
		 warning警告信息
		 danger危险信息-->
		 <!-- table-responsive响应式表格添加横向滚动条 -->
		 <div class="table-responsive">
			 <table class="table table-bordered table-hover table-condensed">
			 	<tr class="success">
			 		<th>姓名</th>
			 		<th>年龄</th>
			 		<th>性别</th>
			 	</tr>
			 	<tr class="active">
			 		<td>Data11111111111111111</td>
			 		<td>Data</td>
			 		<td>Data</td>
			 	</tr>
			 	<tr class="info">
			 		<td>Data</td>
			 		<td>Data</td>
			 		<td>Data</td>
			 	</tr>
			 	<tr class="warning">
			 		<td>Data</td>
			 		<td>Data</td>
			 		<td>Data</td>
			 	</tr>
			 	<tr class="danger">
			 		<td>Data</td>
			 		<td>Data</td>
			 		<td>Data</td>
			 	</tr>
			 </table>
		 </div>
		<hr >
		<form>
			<!-- form-group独占一行
			 form-control宽度100%变为块元素-->
			 <!-- placeholder   input中的提示信息 -->
		  <div class="form-group">
			  <!-- sr-only隐藏 -->
		    <label class="sr-only" for="aa">Email address</label>
		    <input type="email" class="form-control" id="aa" placeholder="请输入">
		  </div>
		  <div class="form-group">
		    <label for="bb">Password</label>
		    <input type="password" class="form-control" id="bb" placeholder="Password">
		  </div>
		  <div class="form-group">
		    <label for="exampleInputFile">File input</label>
			<!-- file上传文件 -->
		    <input type="file" id="exampleInputFile">
			<!-- help-block上传文件的提示 -->
		    <p class="help-block">最多只能上传9个文件，最大文件只能上传2M</p>
		  </div>
		  <div class="checkbox">
		    <label>
		      <input type="checkbox"> Check me out
		    </label>
		  </div>
		</form>
	</body>
</html>