bootstrap开发

shuizhongyue_

浏览: 68278 次

最近访客更多访客>>

wang306033

song0394

dengjianbin

long64783977

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

bootstrap开发

bootstrap常见开发知识(重点要截图)

1布局容器如下

!-- 固定宽度1170px -->
<div class="container">container</div>
<!-- 宽度100% -->
<div class="container-fluid">container-fluid</div>

2内容排版

<h1 class="page-header">这里是大标题的下划线</h1>
<small>副标题小一号</small>
<big>副标题大一号</big>
<strong>副标题</strong>
<em>斜体</em>
<del>删除</del>

3文本对齐方式

.text-left 向左 .text-center 中间 .text-right向右

<p class="text-uppercase">[字母全大写]我是upper的信息</p>
<p class="text-lowercase">[字母全小写]我是upper的信息</p>
<p class="text-capitalize">[首字母大写]我是upper的信息</p>

4列表样式

.list-unstyled 去掉列表前面小点

.list-inline 横向排列

       <ul class="list-unstyled list-inline">
		<li>spring</li>
		<li>mybatis</li>
		<li>html5</li>
	</ul>

5自定义

.dl-horizontal 横向列表展示

	<dl class="dl-horizontal">
		<dt>自定义列表头</dt>
		<dd>自定义列表详细信息</dd>
	</dl>

6表格

table 基础样式

table-bordered 加边框

table-hover 鼠标悬停变色

table-striped 隔行变色

table-condensed 减小行高

<table class="table table-bordered table-hover table-striped table-condensed">
	<tr><th>标题1</th><th>标题2</th></tr>
	<tr><td>内容01</td><td>内容02</td></tr>
	<tr><td>内容11</td><td>内容12</td></tr>
	<tr><td>内容21</td><td>内容22</td></tr>
	<tr><td>内容31</td><td>内容32</td></tr>
	<tr><td>内容41</td><td>内容42</td></tr>
</table>

table-responsive给table的父元素添加，不能显示则出现滚动条

<div class="table-responsive">
<table class="table table-bordered table-hover table-striped table-condensed">
	<tr><th>标题1</th><th>标题2</th><th>标题1</th><th>标题2</th><th>标题1</th><th>标题2</th></tr>
	<tr><td>内容01</td><td>内容02</td><td>内容01</td><td>内容02</td><td>内容01</td><td>内容02</td></tr>
	<tr><td>内容11</td><td>内容12</td><td>内容01</td><td>内容02</td><td>内容01</td><td>内容02</td></tr>
	<tr><td>内容21</td><td>内容22</td><td>内容01</td><td>内容02</td><td>内容01</td><td>内容02</td></tr>
	<tr><td>内容31</td><td>内容32</td><td>内容01</td><td>内容02</td><td>内容01</td><td>内容02</td></tr>
	<tr><td>内容41</td><td>内容42</td><td>内容01</td><td>内容02</td><td>内容01</td><td>内容02</td></tr>
</table>
</div>

7图片自适应大小

img-responsive 图片自适应大小

img-circle 椭圆图片

img-rounded 四角矩形

img-thumbnail 四角矩形加边框

<!-- 宽度100% -->
<div class="container-fluid">
	<img alt="自适应图片" src="images/big.jpg" class="img-responsive img-thumbnail ">
</div>

8栅格系统(xs,sm,md,lg)

col-md-offset-2偏移2个单位

col-md-pull-2向左移动2个单位

col-md-push-2向右移动2个单位

9辅助类

下拉三角<span class="caret"></span>

快速浮动 pull-left左浮动 pull-right右浮动

清除浮动clearfix 给父盒子添加

10表单

<form action="">
		<div class="form-group">
			<label for="cemail">邮箱</label>
			<input type="email" name="cemail" id="cemail" class="form-control">
		</div>
		<div class="form-group">
			<label for="pwd">密码</label>
			<input type="password" name="pwd" id="pwd" class="form-control">
		</div>
		<div class="form-group">
			<label for="phone">手机</label>
			<input type="text" name="phone" class="form-control">
		</div>
		<div class="form-group">
			<label class="checkbox-inline"><input type="checkbox" name="hobby">HTML</label>
			<label class="checkbox-inline"><input type="checkbox" name="hobby">Spring</label>
			<label class="checkbox-inline"><input type="checkbox" name="hobby">SpringMVC</label>
		</div>
		<div class="form-group">
			<label class="radio-inline"><input type="radio" name="sex">男</label>
			<!-- 添加两个disables -->
			<label class="radio-inline disabled"><input type="radio" name="sex" disabled>女</label>
		</div>
</form>

form-control给数据框<input>,<textarea>添加

form-group给输入框的父元素添加样式

checkbox-inline给<lable>标签添加样式

radio-inline给<lable>标签添加样式

11组合数据框

input-group-addon给组合的内容加

input-group给父元素添加

	<div class="form-group">
		<div class="input-group">
			<span class="input-group-addon">查询</span>
			<input type="text" class="form-control" name="search">
		</div>
	</div>
	<div class="form-group">
		<div class="input-group">
			<input type="text" class="form-control" name="search">
			<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
		</div>
	</div>

12响应表单

表单行内显示form-inline

结合栅格系统组成响应式表单form-horizontal

注意：栅格系统不能给input标签添加，需要套用父元素div或span

	<form action="" class="form-horizontal">
		<div class="form-group">
			<label for="uname" class="col-md-2 col-sm-4 col-xs-5 text-right">邮箱</label>
			<div class="col-md-10 col-sm-8 col-xs-7">
				<input type="text" name="uname" id="uname" class="form-control">
			</div>
		</div>
		<div class="form-group">
			<label for="pwd" class="col-md-2 col-sm-4 col-xs-5 text-right">密码</label>
			<div class="col-md-10 col-sm-8 col-xs-7">
				<input type="password" name="pwd" id="pwd" class="form-control">
			</div>
		</div>
	</form>

13按钮及按钮组

btn-group表示按钮组

<div class="btn-group">
	<button class="btn btn-primary">button按钮</button>
	<input class="btn btn-info" type="button" value="input按钮">
	<a href="#" class="btn btn-danger">a标签按钮</a>
</div>

14下拉菜单

dropdown-menu 下拉列表的内容 ul加样式

dropdown-menu-left 下拉列表对齐方式

dropdown-menu-right 下拉列表对齐方式

dropdown 包含按钮和列表的div加样式 ul父元素

data-toggle 按钮触发器

divider分割线<li>中间不能有内容

<div class="dropdown">
	<button class="btn btn-default" data-toggle="dropdown">
		下拉按钮<span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
		<li><a href="#">html</a></li>
		<li><a href="#">css</a></li>
		<li class="divider"></li>
		<li><a href="#">react</a></li>
		<li><a href="#">java</a></li>
	</ul>
</div>

15标签页

nav标签页的基类

nav-tabs普通标签页

nav-pills胶囊式标签页

<ul class="nav nav-tabs">
	<li class="active"><a href="#">首页</a></li>
	<li><a href="#">tab-one</a></li>
	<li><a href="#">tab-two</a></li>
</ul>

16导航栏

navbar 导航栏基类，用于<nav>元素

navbar-default 默认导航栏样式，用于<nav>元素

container 是<nav>的子元素，导航栏内容都放在其中

navbar-header 导航栏头部样式

collapse折叠导航栏样式基类

navbar-collapse 折叠导航栏样式

nav 导航栏的链接基类

navbar-nav 导航栏的链接样式

navbar-left和navbar-right 组件排列，导航链接，按钮和文本对齐方式

navbar-fixed-top 导航栏固定在顶部，用于<nav>元素

navbar-fixed-bottom 导航栏固定在底部，用于<nav>元素

navbar-inverse 可以实现反色导航，用于<nav>元素

<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
		<!-- 页面的头部 -->
		<div class="navbar-header">
			<a href="#"><img alt="图片" src="path"></a>
		</div>
		<!-- 导航链接 -->
		<div class="collapse navbar-collapse">
			<ul class="nav navbar-nav">
				<li><a href="#"><span class="glyphicon glyphicon-align-justify"></span></a></li>
				<li><a href="#">首页</a></li>
				<li><a href="#">博客</a></li>
				<li><a href="#">关于我</a></li>
			</ul>
		</div>
	</div>
</nav>

17具有自适应的导航条

<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
		<!-- 页面的头部 -->
		<div class="navbar-header">
		   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
		    	<span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		    </button>
			<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
		</div>
		<!-- 导航链接 -->
		<div class="collapse navbar-collapse" id="navbar-collapse-1">
			<ul class="nav navbar-nav">
				<li><a href="#">首页</a></li>
				<li><a href="#">博客</a></li>
				<li><a href="#">关于我</a></li>
			</ul>
		</div>
	</div>
</nav>

分享到：