Bootstrap 学习记录

[toc]

bootstrap 是一个开源的css动态样式框架. 针对响应式和移动端做了很多优化.主要提供全局的css样式,和部分api用来操作css.

网格系统

可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

定义网格类row或col-xs-4 然后使用col-–来进行12格的占用

表格

基本类为table, table-bordered 设置框,table-hover设置悬浮阴影.可以加active,success,warning,danger;

<table class="table">
<thead>
<th></th>
</thead>
<tbody></tbody>
</table>

表单

垂直表单,内联表单,水平表单
向所有的input,textarea,select添加form-control.

图片

img-rounded 是矩形边框截下来,img-circle img-thumbnail 圆形,缩略图
img-responsive

辅助类

文本: text-muted: text-primary:
背景: bg-primary类,bg-success类
其他:pull-left 浮动到左边.center-block 居中显示.show强制显示.hidden强制隐藏. text-hide 将页面元素所包含的文本内容替换为背景图 caret显示下拉功能. close显示关闭

响应式工具

布局组件

• 图标: class=”glyphicons glyphicons-search”
  可以使用导航栏图标 glyphicon glyphicon-home 出现home图标
• 下拉菜单: dropdown定义全部,然后 dropdown-toggle设置下拉按钮. 加入dropdown-menu 设置其他菜单项,用 <li><a href="fff"></a></li>
• 按钮组:btn-group; btn-toolbar把btn-group放在一起
• 按钮下拉菜单:直接一个按钮<span class="caret"> ;加一下下拉菜单dropdown-menu即可.
• 输入框组:input-group
• 导航: nav: nav-tabs带框 nav-pills胶囊 垂直式胶囊nav nav-pills nav-stacked; 两端对齐的导航nav-justified;先设置一个可以用的class=”active”,也可以设置一个禁止点击的
• 带下拉菜单的点击:在想要加下拉的地方还是加先加dropdown ,dropdown-menu
• 导航栏: navbar-header加一下还是在导航的基础上的. 响应式必须要加collapse 和navbar-collapse; 加在要折叠的地方
  • 导航栏里面的表单navbar-form
  • 按钮:nav-btn
  • 文本:nacbar-text
  • 导航链接:一般登录和退出按钮:
  • 对其 navbar-fixed-top置顶的
• 面包屑导航:基于目录结构的\home\boke\jia :使用class=breadcrumb
• 分页 pagination ; actiove用于指示当前页面,那disabled; pagination-lg获取比较大的项. 使用pager实现翻页的按钮可以左右对齐 privious next;
• 标签:lable lable-default -success -primary等
• 徽章:小红点上加数字基本用法 badge:
• 缩略图:thumbnail
• 警告:alert
• 进度条: progress class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"><span class="sr-only">40% 完成</span>
  • 加一个条纹的进度条: progress progress-striped;
  • 加一个动画的progress progress-striped active
  • 可以实现堆叠一起 在progress里面放多个
• 多媒体对象: media 然后设置对其即可
• 列表组: list-group list-group-item设置<li>
• 面板: panel panel-default; 设置panel-body设置内容 panel-title设置标题
• 预警一般都是组件加success 或者 warning info danger primary
• well会引起内容凹陷显示或插图效果的容器.

插件

开启$(document).off(‘.data-api’); $(document).off(“.alert.data-api”)