bootstrap raster system, code embedding, tables

I. Grid System

The grid system should note that bootstrap contains up to 12 columns, and if it goes beyond, it will change lines. It can also be nested. Transparency is set in the code, which is superimposable or good-looking. It should be used frequently in the future.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>grid system</title>
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
		<style>
			.row {
				margin-bottom: 20px;
			}
			.row .row {
				margin-top: 10px;
				margin-bottom: 0;
			}
			[class*="col-"] {
				padding-top: 15px;
				padding-bottom: 15px;
				background-color: #eee;
				background-color: rgba(86,61,124,.15);
				border: 1px solid #ddd;
				border: 1px solid rgba(86,61,124,.2);
			}
		</style>
	</head>
	<body>
		<div class="container">
			<!--12 Equal division-->
			<div class="row">
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
			</div>
			<!--4 Equal division-->
			<div class="row">
				<div class="col-md-3">col-md-3</div>
				<div class="col-md-3">col-md-3</div>
				<div class="col-md-3">col-md-3</div>
				<div class="col-md-3">col-md-3</div>
			</div>
			<!--When the content is too much, bootstrap Operation-->
			<div class="row">
				<div class="col-md-3">col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3</div>
				<div class="col-md-3">col-md-3</div>
				<div class="col-md-3">col-md-3</div>
			</div>
			
			<!--deviation-->
			<div class="row">
				<div class="col-md-4 col-md-offset-1">col-md-4</div>
			</div>
			
			<!--nesting-->
			<div class="row">
				<div class="col-sm-9">
					one
					<div class="row">
						<div class="col-xs-8">
							first
						</div>
						<div class="col-xs-4">
							two
						</div>
					</div>
				</div>
			</div>
			
			<!--Sorting of columns (variable order)-->
			<div class="row">
				<div class="col-md-9 col-md-push-3">col-md-9</div>
				<div class="col-md-3 col-md-pull-9">col-md-3</div>
			</div>
		</div>
	</body>
</html>

2. Code Embedding

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Code</title>
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
		
	</head>
	<body>
		<div class="container">
			<!--code-->
			<!--Inline code-->
			For Example:<code>&lt;section&gt;</code>
			<!--User input single character-->
			I hope our future<kbd>condition</kbd>Better and better
			<!--Code segment-->
			<pre>
				you should try to control your ...
			</pre>
			
		</div>
	</body>
</html>

Three, form

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>form</title>
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
		
	</head>
	<body>
		<!--Response Form-->
		<div class="table-responsive">
		<!--General form-->
		<!--<div class="table">-->
			<table class="table table-striped table-bordered table-hover">
				<thead>
					<tr>
						<th>Table title</th>
						<th>Table title</th>
						<th>Table title</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>Form unit</td>
						<td>Form unit</td>
						<td>Form unit</td>
					</tr>
					<tr>
						<td>Form unit</td>
						<td>Form unit</td>
						<td>Form unit</td>
					</tr>
					<tr>
						<td>Form unit</td>
						<td>Form unit</td>
						<td>Form unit</td>
					</tr>
				</tbody>
			</table>
			
			<!--Compact form-->
			<table class="table table-condensed">
				<thead>
					<!--Mouse hovering-->
					<tr class="active">
						<th>Table title</th>
						<th>Table title</th>
						<th>Table title</th>
					</tr>
				</thead>
				<tbody>
					<tr class="success">
						<td>Form unit</td>
						<td>Form unit</td>
						<td>Form unit</td>
					</tr>
					<tr class="info">
						<td>Form unit</td>
						<td>Form unit</td>
						<td>Form unit</td>
					</tr>
					<tr class="warning">
						<td>Form unit</td>
						<td>Form unit</td>
						<td>Form unit</td>
					</tr>
					<tr class="danger">
						<td>Form unit</td>
						<td>Form unit</td>
						<td>Form unit</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>

Today is lazy, in fact, there is nothing to say, are some basic operations.

I hope my record can help you ~please give me some praise if you like it! 65507

Thank you for seeing this! Writing in a hurry, there are omissions, please comment and correct, and discuss progress together!

Posted by tudoroprea on Wed, 23 Jan 2019 07:51:14 -0800

Programmer Group