bootstrap框架基础知识2

bootstrap思维导图
在这里插入图片描述
Bootstrap简介

1.来自Twitter，是目前最流行的前端框架
2.是基于HTMl，CSS,javascript的一个简洁灵活的开源框架，便于人员随时上手
3.目前版本V3

bootstrap受欢迎的原因

1.快速制作响应的网页来适配各种终端
2.开发简单，方便
3.移动先行
4.代码开源
5.代码有良好是规范

1.支持Internet Exporer 8-11
2.开发环境（webstorm）
3.引入Bootstrap框架文件
3.1压缩处理文件bootstrap.min.css
bootstrap.min.js
3.2使用bootstrap中文网提供的免费CDN加速服务

基本模板

<html>
<head lang="en">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0"/>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
	<h1>这是一个Bootstrap框架的最基本HTML模板</h1>
<script scr="js/jquery-1.12.4.js"></script>
<script scr="js/bootstrap.js"></script>
</body>
</html>

boostrap架构
在这里插入图片描述
栅格系统

1.栅格系统是通过一系列（row）与列
（column）的组合来创建页面的布局设置的内容就可以放在这些创建好的布局中
2.实现原理
2.1通过定义容器的大小，平分为12份
2.2调整内外边距
2.3结合媒体查询

栅格系统的使用
1.列组合

<div class="container">
	<div class="row">
		<div class="col-md-8">.col-md-8</div>
		<div class="col-md-4">.col-md-4</div>
	</div>
</div>

2.列偏移

<div class="container">
	<div class="row">
		<div class="col-md-4">.col-md-8</div>
		<div class="col-md-4 col-md-offset-4">.col-md-4.col-md-offset-4</div>
	</div>
</div>

3.列嵌套

<div class="container">
	<div class="row">
		<div class="col-md-9">
			<div class="row">
				<div calss="col-md-6"></div>
				<div calss="col-md-6"></div>
			</div>
		</div>
		<div class="col-md-3></div>
	</div>
</div>

4.列排序

<div class="row">
	<div class="col-md-9 col-md-push"></div>
	<div class="col-md-3 col-md-pull-9></div>
</div>

CSS全局样式

1.又称为CSS布局
2.是Bootstrap三大核心内容的基础，即基础的布局语法
3.包括
3.1基础排版（Typograhy）
3.2表单（Form）
3.3按钮（Buttons）
3.4图片（images）

1.标题

<h1><h2><h3><h4><h5><h6>
2.页面主体
特别强调的锻炼标签
<p class="lead"></p>
3.强调文体
文本强调元素：small,strong,em
对齐方式
<p class="text-left">左对齐</p>
<p class="text-center">左对齐</p>
<p class="text-right">左对齐</p>
<p class="text-justify">左对齐</p>

4.列表

<ul class="list-inline">
	<dl class="dl-horizontal">
		<dt>111</dt>
		<dd>111111</dd>
		<dt>111</dt>
		<dd>111111</dd>
		<dt>111</dt>
		<dd>111111</dd>
	</dl>
</ul>

表单

<form action="#">
	<div class="form-group">
	姓名：<input class="form-control" type="text"/>
	</div>
	<div class="form-group">
	邮箱：<input class="form-control" type="text"/>
	</div>
	<input class="form-control" type="submit" 提交/>
</form>

内联表单

<form action="#" class="form-inline">
<!--省略部分HTML代码-->
</form>

横向表单

<form action="#" class="form-horizontal">
	<div class="form-group">
	<span class="col-sm-2 text-center">姓名：<span>
	<div class="cot-sm-10">
		<input class="form-control" type="text" placeholder="请输入你的名字">
	</div>
	</div>
</form>

验证提示状态

1.has-warning 警告（黄色）
2.has-error 错误（红色）
3.has-success 成功（绿色）

控件大小

1.大题输入框
2.小型输入框
<input type="text" class="input-lg form-control" placeholder="大型输入框">
<input type="text" class="form-contorl" placeholder="正常输入框"/>
<input type="text" class="input-sm form-control placeholder="小型输入框"/>

按钮

<input type="button" class="btn btn-default" value="default(灰色)"/>
<input type="button" class="btn btn-default btn-lg value="default (灰色)大型"/ >
<input type="button" class="btn btn-primary " value="primary(深蓝色)默认大小"/ >
<input type="button" class="btn btn-success btn-sm" value="success(绿色)小型"/>
<input type="button" calss="btn btn-info btn-xs" value="info(天蓝色)超小型"/>

图片

响应式图片
<img scr="..." class="img-responsive"/>
图片形状
<img src="image/1.jpg" class="img-rounded" alt=""/>
<img src="image/1.jpg" class="img-circle" alt=""/>
<img src="image/1.jpg" class="img-thumbnail" alt=""/>

注意：
在使用img-circle制作圆形图片的时候，必须保证图片是正方形，是否图片将变成随园形的

bootstrap框架基础知识2

猜你喜欢