中软大前端0507-Bootstrap

发表于 | 分类于

响应式布局-Bootstrap

栅格系统

将宽度等分成12列
外层 row
如果是一行3列，则每一部分占4列，即col-md-4，自动换行

class="row">
1
2
3
4
5
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">第一列</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">第二列</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">第三列</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">第四列</div>
</div>

尺寸

480 : col-xs (手机)
768 : col-sm (平板)
992 : col-md (标准)
1200 : col-lg

偏移 offet

col-md-offset-1 :从当前位置，向右偏移一列

卡片模型-thumbnail

响应式图片 img-responsive

按钮 btn

样式：btn-danger
尺寸：btn-sm
按钮组合：btn-group (无间隙)

导航 nav

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<nav class="navbar" role="navigation">
	<div class="container-fluid">
		<div class="navbar-header">
		<!-- 导航收缩按钮 -->
			<button type="button" class="navbar-toggle" data-toggle="coolapse"
			data-target="">
			<!-- 三杠 -->
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
		</div>
		<div class="collapse navbar-collapse" id="mynav">
			<ul class="nav navbar-nav">
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">一级导航</a>
					<!-- 小三角 -->
					<a href="#"><span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li>二级导航</li><li>二级导航</li>
						<li>二级导航</li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</nav>

轮播

表格

class=”table”
table-boedered
table-hover
table-striped (隔行换色)
响应式TABLE 外层加div 设置class=”table-responsive”

分页

pagination

1
2
3
4
5
6
7
<ul class="pagination">
	<li><a href=""> <<< </a></li>
	<li><a href=""> 1 </a></li>
	<li><a href=""> 2 </a></li>
	<li><a href=""> 3 </a></li>
	<li><a href=""> >>> </a></li>
</ul>

弹窗

placement:方位

1
<a href="#" id="navtitle" title="标题" data-toggle="popover" data-placement="right"></a>

  • 触发模式trigger
    hover: 悬浮触发
    click: 点击触发

    1
    2
    3
    4
    5
    6
    $("#navtitle").popover({
    	trigger: 'hover',
    	html:true,
    	content:"<img src='img/' style='width: 100%;'>"
    });

  • 弹窗激活–弹出提示框

    1
    $("[data-toggle='popover']").popover();

表单

1
2
3
4
5
6
7
8
9
<form role="form">
	用户名：<input type="text" name="">
	<div class="form-group">
		<label for="userName" class="col-md-2 control-label">用户名</label>
		<div class="col-md-10">
			<input type="text" class="form-control" name="userName" id="userName">
		</div>
	</div>
</form>

面板-panel

1
2
3
4
5
6
7
8
9
10
<div class="panel panel-danger">
	<div class="panel-heading">
		<h3 class="panel-title"></h3>
	</div>
	<div class="panel-body">
		<ul>
			<li></li>
		</ul>
	</div>
</div>

数据库

select * from 表名 order by id desc
查询所有内容通过id 倒序排序

导航内容 轮播图片 新闻列表（展示信息随机，有更新）

ctrl+ shift + I :反选区域

通道中，白色代表有，黑色表示没有，灰色代表半透明

通道抠图：选择通道中的某一模式，调色阶（使要抠图区域 与其他区域分界明显），抠图部分调成黑色，调完色阶后，用画笔（实线）将要抠图部分全部变黑。然后在通道中载入选区，反选区域然后回到图层

ctrl + I :颜色反相（互补颜色）
ctrl + E :合并图层
ctrl + F ：风格化增强
ctrl + H : 显示额外内容
ctrl + K : 首选项
ctrl + Q : 退出软件
ctrl + W : 关闭当前文件

ctrl + Y : 校样颜色（红色，蓝色变化大）

三键 + T

三键 + E 盖印图层，当前图层合并 并新建图层

上浅下深 是凸

上深下浅 是凹