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>