• Bootstrap


    1. 简介

      Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,它的源码是基于最流行的CSS 预处理脚本-Less和Sass开发的。
      Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。(<!DOCTYPE html>)
      Bootstrap 是移动设备优先的,支持响应式的布局。

    2. 栅格布局 

      通过一系列的行与列的组合来创建页面布局,一行最多12列.
      100%宽度布局 .container-fluid
      响应式的固定宽度布局 .container
      .row: 行必须放置在容器内,以便获得适当的对齐和内边距
      响应式的column
        .col-lg-* 大屏幕 大桌面显示器 (≥1200px)
        .col-md-* 中等屏幕 桌面显示器 (≥992px)
        .col-sm-* 小屏幕 平板 (≥768px)
        .col-xs-* 超小屏幕 手机 (<768px)
        列偏移 .col-md-offset-*:实际上是设置了margin
        列排序 .col-md-push- .col-md-pull-:本质上是通过left或right设置了位置
      如果一行中包含了的列大于12,多余的列所在的元素将被作为一个整体另起一行排列。

    3. 默认样式

      标题: <h1> 到 <h6> 和 .h1 到 .h6 类
      副标题:<small> .small

      无样式列表: .list-unstyled
      内联列表: .list-inline
      水平列表: .dl-horizontal

      表格
        基本表格: .table
        条纹状表格: .table-striped
        带边框表格: .table-bordered
        鼠标悬停: .table-hover
        表格紧缩: .table-condensed
        响应式表格: .table-responsive,会在小屏幕设备上(小于768px)水平滚动,当屏幕大于 768px 宽度时,水平滚动条消失.

      表单
        表单控件:.form-control .form-group
        内联表单:.form-inline
        内联单选框.radio-inline
        内联多选框.checkbox-inline
        静态控件:.form-control-static,当在表单中需将一行纯文本和label元素放置于同一行,为<p>元素添加 .form-control-static 类。
        水平表单:.form-horizontal

      按钮
        表示按钮的三种形式: <a> <input> <button>
        按钮类:.btn .btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link
        按钮状态类:
          激活:.active
          禁用:.disabled
        按钮尺寸:.btn-lg .btn-sm .btn-xs
        块级按钮:.btn-block

      图片
        响应式图片:.img-responsive
        圆角图片:.img-rounded
        圆形图片:.img-circle
        缩略图:.img-thumbnail
        mixin: img-responsive($display: block)

      透明度:opacity(@opacity)

      设置尺寸: size(@width @height) square(@size)

      截断文本(用省略号代替): text-overflow()

      隐藏文本(不是去除此元素): text-hide() hide-text()

      重置文本样式: reset-text()

      定义某一颜色label: label-variant($color)
      定义某一颜色文本: text-emphasis-variant($parent, $color)
      定义某一颜色背景: bg-variant($parent, $color)

      text-align样式: .text-left .text-right .text-center .text-justify .text-nowrap
      text大小写: .text-lowercase(全小写) .text-uppercase(全大写) .text-capitalize(首字母大写)

      Other: .clearfix .pull-left .pull-right .center-block .hide .show .hidden .invisible

      mixin:
        透明度: opacity(@opacity)
        设置尺寸: size(@width @height), square(@size)
        截断文本(用省略号代替): text-overflow()
        隐藏文本(不是去除此元素): text-hide(), hide-text()
        重置文本样式: reset-text()
        定义某一颜色label: label-variant($color)
        定义某一颜色文本: text-emphasis-variant($parent, $color)
        定义某一颜色背景: bg-variant($parent, $color)
        占位符文本颜色:placeholder(@color: @input-color-placeholder)

      字体图标: glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf, glyphicons-halflings-regular.woff

      徽章 .badge
      缩略图 .thumbnail
      面包屑: .breadcrumb
      面板: .panel .panel-default
      分页: .pagination
      警告框: .alert .alert-success .alert-danger role="alert"
      关闭按钮:<button type="button" class="close" >×</button>

      

  • 相关阅读:
    解决CollectionView TableView reloadData或者reloadSections时的刷新的闪烁问题
    HTTP请求头
    Fastlane 使用笔记
    python-函数式编程
    python-高级特性
    python基础使用
    python基础-函数02
    python基础-函数01
    python基础
    Linux基础
  • 原文地址:https://www.cnblogs.com/floraCnblogs/p/css-bootstrap.html
Copyright © 2020-2023  润新知