bootstrap开发 --- 2
偏移
偏移 offset
注意:只能向右偏移
语法:Col-xs/sm/md/lg-offset-数值
Col-md-offset-2 pc中等屏幕向右偏移 2个列
排序(了解)
语法:col-xs/sm/md/lg-pull 向左偏移
Col-xs/sm/md/lg-push 向右偏移
快速浮动 pull-left 左浮动 pull-right 右浮动
清除浮动 .clearfix 给父盒子加就相当----<divstyle=”clear:both”></div>
<label class="checkbox-inline disabled">
disabled 不让选
.checkbox-inline 给label 标签加 给包含<input >和内容加样式
.radio-inline 给label 标签加,给<input>和内容加样式
输入框组
.input-group-addon 给给组合的内容加
.input-group 给父元素加
表单行内显示
给表单加 .form-inline
.form-horizontal 给表单加<form>
变成响应式效果 ---必须结合栅格系统
注意:输入框不能使用栅格系统,给<div ><span>…给这类的标签加
按钮
可以加按钮效果的有哪些标签
<input type=”button” value=”按钮”>
<button>按钮</button>
<a href=”#”>内容</a>
.btn 是按钮样式的基类
按钮样式 .btn-primary.btn-default .btn-success .btn-warning .btn-danger
按钮的大小 .btn-lg(最大的) .btn-sm .btn-xs (最小的)
按钮组 给父元素加 .btn-group
缩略图
<p>Cras jus</p>
</div>
<div class="bttton-group text-right">
<button class="btn btn-success">购买</button>
<button class="btn btn-primary">继续看看</button>
</div>
</div>
下拉菜单
l .dropdown-menu 给下拉列表中的内容给 ul加样式
l .dropdown 包含触发的按钮和下拉列表加样式 ---父元素
l .Data-toggle 按钮的触发器
l .dropdown-menu-left 下拉列表的对齐 .dropdown-menu-right 右对齐
l .divider 给 <li>加<li></li>之间没有内容
下拉菜单
l .dropdown-menu 给下拉列表中的内容给 ul加样式
l .dropdown 包含触发的按钮和下拉列表加样式 ---父元素
l .Data-toggle 按钮的触发器
l .dropdown-menu-left 下拉列表的对齐 .dropdown-menu-right 右对齐
l .divider 给 <li>加<li></li>之间没有内容
标签页
.nav 是标签页的一个基类 ---给ul加
.nav-tabs 普通标签页
.nav-pills 胶囊式标签页
. nav-stacked 垂直排列
.active 给<li>加默认显示的是哪个标签页内容
导航栏
l navbar:导航栏的基类,用于<nav>元素。
l .navbar-default:导航栏默认样式,用于<nav>元素。
l .container是<nav>的子元素。导航栏内容都放入其中。
l .navbar-header:导航栏头部样式。
l .collapse是折叠导航栏的样式的基类。列表<ul>父元素加
l .navbar-collapse是折叠导航栏样式。给ul的父元素加
l .nav是导航栏的链接基类。<ul>
l .navbar-nav是导航栏的链接样式。<ul>
l .navbar-left 或 .navbar-right :组件排列。导航链接、按钮或文本对齐。
l .navbar-fixed-top:导航栏固定在顶部,用于<nav>元素。需要为<body>设置padding-top:70px
l .navbar-fixed-bottom:导航栏固定在底部,用于<nav>元素
l .navbar-inverse:可以实现反色导航栏,用于<nav>元素。