Bootstrap知识框架整理学习笔记

Bootstrap知识框架整理学习笔记：响应式导航条：.navbar .navbar-default/inverse .navbar-fixed-top/bottom；全局样式。

Bootstrap知识框架整理学习笔记

• 概述
  • Twitter两个的工程师，托管在Github.com
  • 是一个HTML/CSS/JS框架
  • 适用于移动设备优先的响应式Web开发
  • 主要内容
    • HTML
      • 扩展了属性 data-*
    • CSS
      • CSS Reset
      • 近千个class
    • JS
      • 基于jQuery提供了十几个插件
• 起步
  • 下载
  • 模板
    • viewport
    • X-UA-Compitable
    • bootlint.js
    • html5shiv.js
    • respond.js
  • Bootlint
  • 示例程序
  • 兼容性
  • 禁用响应式布局
• 全局样式
  • 按钮
    • .btn
    • .btn-default
    • .btn-danger/success/warning/info/primary
    • .btn-block
  • 图片
    • .img-rounded
    • .img-circle
    • .img-thumbnail
    • .img-responsive
  • 文本
    • .text-五种颜色
    • .bg-五种颜色
    • .text-left/right/center/justify
    • .text-uppercase/lowercase/capitalize
  • 排版和代码
    • .list-unstyled
    • .list-inline
  • 表格
    • .table
    • .table-bordered
    • .table-striped
    • .table-hover
    • .table-responsive
  • 栅格系统
    • .container / .container-fluid
    • .row
    • .col-xs-* .col-sm-* .col-md-* .col-lg-*
    • .col-xs-offset-* ...
    • .hidden-xs ...
    • 调整列的顺序
  • 表单
    • 默认表单
      • <form>
        • .form-group .has-feedback
        • .form-control
        • .help-block
        • .form-control-feedback
    • 行内表单
      • <form class="form-inline">
        • .form-group .has-feedback
        • label.sr-only
        • .form-control
        • .form-control-feedback
    • 水平表单
      • <form class="form-horizontal">
        • 整合栅格系统+表单项
    • 导航条中的表单
      • <form class="navbar-form">
• 组件
  • 图标字体
    • 服务器端字体
      • @font-face
    • .glyphicon
    • .glyphicon-*
  • 按钮组
    • .btn-group
  • 下拉菜单
    • .dropdown
    • data-toggle="dropdown"
    • .dropdown-menu
  • 导航
    • 标签页导航
      • .nav .nav-tabs
      • .nav-justified
    • 胶囊式导航
      • .nav .nav-pills
      • .nav-justified
      • .nav-stacked
  • 面包屑
    • .breadcrumb
  • 分页条
    • 数字型
      • .pagination
    • 上下页型
      • .pager
  • 标签
    • .label
    • .label-五种颜色
  • 徽章
    • .badge
  • 巨幕
    • .jumpotron
  • 水井
    • .well
  • 警告框
    • .alert
    • .alert-四种颜色
  • 媒体对象
    • .media
    • .media-left/body/right
  • 列表组
    • .list-group
    • .list-item
  • 面板
    • .panel
    • .panel-五种颜色
    • .panel-heading/body/footer
  • 响应式导航条
    • .navbar .navbar-default/inverse .navbar-fixed-top/bottom
      • .container
        • .navbar-header
          • .navbar-brand
          • .navbar-toggle data-toggle="collapse"
        • .navbar-collapse
          • .nav .navbar-nav
          • .btn .navbar-btn
          • .navbar-text
          • .navbar-link
          • .navbar-form
          • .navbar-left/right
• jQuery插件
  • 下拉菜单
  • 警告框
  • 标签页
  • 工具提示
  • 弹出框
  • 模态框
  • 折叠效果
    • 基本效果
    • 手风琴
    • 响应式导航条
  • 轮播广告
  • 附加导航
• 定制