Bootstrap入门

发布时间：2020-12-17 20:54:34 所属栏目：安全来源：网络整理

导读：导入bootstralp包，min.js和min.css 设置字符编码移动设备优先导入jQuery html5文档类型定义 meta charset="UTF-8"!--移动设备优先--meta name="viewport" content="width=device-width,initial-scale=1" /link href="bootstrap-3.3.7-dist/css/bootstrap.

导入bootstralp包，min.js和min.css
设置字符编码
移动设备优先
导入jQuery
html5文档类型定义

		<meta charset="UTF-8">
		<!--移动设备优先-->
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
		<title>bootstrap入门</title>
		<script src="js/jquery-1.6.js"></script>
		<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

css全局样式：

1、布局容器类样式：.container和.container-fluid

.container:固定宽度并且具有响应式

.container-fluid:自由宽度(100%宽度)

2、标题样式<h1>到<h6>

<h1>到<h6>到h6重写了，基本上做到了兼容性

3、行内文本样式：

4、文本对其样式：

.text-left
.text-center
.text-right
.text-justify

5、列表样式：

.list-unstyled(无符号)

.list-inline（行内块）

表格样式：

表单样式：

.form-group 表单组样式:将<label>和表单元素包含其中，可以获得更好的排列
.form-control表单元素样式，用于<input><textarea><select>元素
.form-inline:内联表单样式，可以使元素一行排列
.radio-inline:可以使一组单选框排在同一行
.checkbox-inline:可以使一组复选框排在同一行
.sr-only:可以隐藏元素

Placehoder属性(H5新增加的)：

描述：给<input>添加提示信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!--移动设备优先-->
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
		<title>bootstrap入门</title>
		<script src="js/jquery-1.6.js"></script>
		<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	</head>
	<body style="padding: 50px; background-color: #31B0D5;" >
		<div class="text-center">
			<h1>这是一个标题</h1>
			<p class="text-center">这是一条新闻</p>
			
		</div>
		<div class="text-center"> 
		<ul class="list-unstyled">
			前端:
				<li>html</li>
				<li>css</li>
				<li>javascript</li>
		</ul>
		<ul class="list-inline"></ul>
			前端:
				<li>html</li>
				<li>css</li>
				<li>javascript</li>
		</ul>
		</div>
		<div class="container" style="background-color:#C0C0C0;padding: 20px;">
		<table class="table table-striped">
			<tr>
				<td>id?</td>
				<td>标题?</td>
				<td>作者?</td>
				<td>时间?</td>
				<td>内容?</td>
			</tr>
			<tr>
				<td>?</td>
				<td>?</td>
				<td>?</td>
				<td>?</td>
				<td>?</td>
			</tr>
			<tr>
				<td>?</td>
				<td>?</td>
				<td>?</td>
				<td>?</td>
				<td>?</td>
			</tr>
		</table>
		<form>
			<div class="form-group">
			<label>用户名：</label>
			<input type="text" id="username" placeholder="输入你的用户名" />
			</div>
			<div class="form-group">
			<label>密码：</label>
			<input type="password" id="password" placeholder="输入密码" />
			</div>
		</form>
		</div>
	</body>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!