Bootstrap总结

Posted 2020-10-30

简介
BootStrap是当前比较流行的CSS框架之一，他是Twitter推出的一个用于前端开发的开源工具包。
为什么要学习BootStrap

• 企业开发多使用某种CSS框架，其中以BootStrap为目前使用居多
• 本课程后面的web界面为了统一将使用bootstrap作为统一的前端框架
• 有利于学习和理解其它框架
  BootStrap基本样式-栅格
  拼命尺寸和12列布局介绍：
  
  栅格基本使用方式
• 使用.container（ 1170 px）或container-fluid包裹
• 列应当包含在行”row”中
• 列的基本格式： (col-屏幕大小-数字）
  例：
  <div class="container">
  <div class="row">
  <div class="col-md-3" style="background-color: #ddd">col-3</div>
  <div class="col-md-9" style="background-color: red">col-9</div>
  </div>
  </div>

一行多余12列时将自动换行

列偏移：.col-md-offset-n：向右偏移N列

嵌套列：在一个col下再使用row产生一个或多个行
排版
基本html标签样式：h1-h6、p、mark、del、strong
文本对齐：Text-left text-right text-center text-nowrap
列表：list-unstyled：去掉标记 ，List-inline：将li显示在一行
表格样式
Table:基本样式
table-striped：条纹表格
table-bordered：带边框表格
table-hover：鼠标悬停
table-condensed：紧缩表格
状态类，可以给单元格设置颜色：

• .active
• .success
• .info
• .warning
• .danger

响应式表格：table-responsive
表单样式
表单基本样式

• Form-control:表单元素的宽度属性为100%
• input-group：表单分组（使用表单分组时无需添加row)
• checkbox-inline：在一行显示checkbox
• Radio-inline:在一行显示radio
• Disabled:禁用
• Readonly:只读
• .has-warning、.has-error?或?.has-success：表单校验
• 添加图标： has-feedback
• 控件尺寸：input-lg ,input-sm
  表单其他样式：
• Form-inline：内联表单
• form-horizontal: 水平标签

按钮

• Btn:显示为一个按钮，用于button元素或其它元素
• 颜色： btn-default， btn-primary, btn-success, btn-info, btn-warning, btn-danger, btn-link
• 尺寸： btn-lg，btn-sm,btn-xs,btn-block
• Disabled:禁用
  图片
• 响应式图片： img-responsive
• 图片形状： img-rounded， img-circle， img-thumbnail
  辅助工具
  文字颜色
• text-muted
• text-primary
• text-success
• text-info
• text-warning
• text-danger
  背景颜色
• bg-muted
• bg-primary
• bg-success
• bg-info
• bg-warning
• bg-danger
  ）
  浮动
• Pull-xx: right:xxx%
• Push-xx：left: xxx%
• clearfix
  内容居中
• center-block
  显示或隐藏
• Show
• hidden
  响应式工具
• visible-xs-* 可见
• hidden-xs 隐藏
  BootStrap组件

下拉菜单

• Dropdown
• Dropdown-menu
• dropdown-header：不可点击的菜单
  按钮组
• Button-group
• btn-group-vertical:垂直排列
  导航
• nav
• Nav-tabs：标签式导航
• Nav-pills:胶囊式导航

导航条

• Navbar
• navbar-brand：品牌图标
• navbar-btn：导航按钮
• Navbar-text:导航文本
• Navbar-left/navbar-right:元素居左/居右
• navbar-fixed-top：固定在顶部
• navbar-fixed-bottom：固定在底部
• navbar-default：反色
  路径导航

• Breadcrumb：

  分页

• Pagination：
  路径导航
• Breadcrumb：
  标签
• Label
• label-default
• label-primary
• label-success
• label-info
• label-warning
• label-danger
  徽章
• badge
  巨幕
• jumbotron ：
  缩略图
• thumbnail ：
  列表
• list-group：
• List-group-item:列表项
• list-group-item-heading
• list-group-item-text
  面板
• Panel
• panel-heading
• panel-title
• panel-body：
• panel-footer
• panel-primary
• panel-success
• panel-info
• panel-warning
• panel-danger
• Panel和其它元素的组合

Javascript插件

• 模态框
• 下拉菜单
• 滚动监听
• 标签页
• 工具提示
• 弹出框
• 手风琴组件
• 图片轮播组件

Javascript插件-模态框
data方式调用

• <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
  js方式调用
• $(‘#myModal‘).modal(options)
  

Javascript插件-标签页
data方式调用

• <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
  js方式调用
• $(‘#someTab‘).tab(‘show‘)
  事件
• show.bs.tab 显示前触发（2）
• shown.bs.tab 显示后触发（4）
• hide.bs.tab 隐藏前触发（1）

• hidden.bs.tab 隐藏后触发（3）

• javascript插件-轮播图
  data方式调用
• <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"></div>
  js方式调用
• $(‘.carousel‘).carousel()
  Javascript插件-模态框