Bootstrap的基本使用

目录

  • 全局CSS样式
    • 布局容器
    • 栅格系统
    • 排版
    • 表格
    • 表单
    • 按钮
    • 图片
    • 辅助
  • 组件
    • 图标
    • 导航条
    • 巨幕
    • 面板
  • JS插件
  • 官方文档 https://v3.bootcss.com/

  • Bootstrap是一个基于JQuery的前端框架, 因此使用Bootsrap先导入JQuery
    • JQuery
    • css文件
    • js文件

全局CSS样式

布局容器

  • class=container 两侧有留白
  • class=container-fluid 无留白

栅格系统

  • 默认情况下, 一个row就是一行, 一个row被分为十二等份 class="row"
  • 我们可以通过 class=col-md-num 来控制占用几等份
  • 尺寸 xs sm md lg
  • 列偏移 class="col-md-offset-num" 向右移几等份
  • 列顺序 class="col-md-pull-2" 或者 class="col-md-push-10"



    
    Bootstrap的使用
    
    
    
    

    
    

    



col-md-3
col-md-9
col-md-6
col-md-10
col-md-2

排版

  • 小号文本
  • 斜体
  • 下划线
  • 横线
  • 加粗
  • 高亮
  • class="lead" 文本变大
  • class="text-center" 文本居中
  • class="pull-left/right" 浮动

表格

  • class="table"
  • class="table-hover"
  • class="table-bordered"
  • class="table-striped"
name gender age
Alpha male 18
Bravo male 18
Charlie male 18

表单

  • class="form-control"

  • class="form-inline" 内联表单



按钮

  • class="btn"
  • class="btn-default" 设置按钮颜色

图片

  • ...

  • ...
  • ...

辅助

  • 文本颜色
  • 背景颜色
  • 关闭按钮
  • 清除浮动

组件

图标

  • bootstrap图标

  • fontawsome图标

导航条

巨幕

面板

JS插件

你可能感兴趣的:(Bootstrap的基本使用)