• bootstrap


    简单、直观、强悍的前端开发框架,让web开发更迅速、简单。 来自Twitter,是目前很受欢迎的前端框架之一。 Bootrstrap是基于HTML、CSS、JavaScript的,让书写代码更容易。 移动优先,响应式布局开发。

    bootstrap中文网址:http://www.bootcss.com/

    bootstrap 容器

    • container-fluid 流体
    • container
      • 1170
      • 970
      • 750
      • 100%

    bootstrap 栅格系统

    bootstrap将页面横向分为12等分,按照12等分定义了适应不同宽度等分的样式类,这些样式类组成了一套响应式、移动设备优先的流式栅格系统:

    1、col-lg-
    2、col-md-

    3、col-sm-
    4、col-xs-

    bootstrap响应式查询区间:

    1、大于等于768
    2、大于等于992
    3、大于等于1200

    bootstrap 表单

    1、form 声明一个表单域
    2、form-inline 内联表单域
    3、form-horizontal 水平排列表单域
    4、form-group 表单组、包括表单文字和表单控件
    5、form-control 文本输入框、下拉列表控件样式
    6、checkbox checkbox-inline 多选框样式
    7、radio radio-inline 单选框样式
    8、input-group 表单控件组
    9、input-group-addon 表单控件组物件样式 10、input-group-btn 表单控件组物件为按钮的样式
    10、form-group-lg 大尺寸表单
    11、form-group-sm 小尺寸表单

    bootstrap 按钮

    1、btn 声明按钮
    2、btn-default 默认按钮样式
    3、btn-primay
    4、btn-success
    5、btn-info
    6、btn-warning
    7、btn-danger
    8、btn-link
    9、btn-lg
    10、btn-md
    11、btn-xs
    12、btn-block 宽度是父级宽100%的按钮
    13、active
    14、disabled
    15、btn-group 定义按钮组

    bootstrap 图片

    img-responsive 声明响应式图片

    bootstrap 隐藏类

    1、hidden-xs
    2、hidden-sm
    3、hidden-md
    4、hidden-lg

    bootstrap 字体图标

    通过字体代替图标,font文件夹需要和css文件夹在同一目录

    bootstrap 下拉菜单

    1、dropdown-toggle
    2、dropdown-menu

    bootstrap 选项卡

    1、nav
    2、nav-tabs
    3、nav-pills
    4、tab-content

    bootstrap 导航条

    1、navbar 声明导航条
    2、navbar-default 声明默认的导航条样式
    3、navbar-inverse 声明反白的导航条样式
    4、navbar-static-top 去掉导航条的圆角
    5、navbar-fixed-top 固定到顶部的导航条
    6、navbar-fixed-bottom 固定到底部的导航条
    7、navbar-header 申明logo的容器
    8、navbar-brand 针对logo等固定内容的样式
    11、nav navbar-nav 定义导航条中的菜单
    12、navbar-form 定义导航条中的表单
    13、navbar-btn 定义导航条中的按钮
    14、navbar-text 定义导航条中的文本
    9、navbar-left 菜单靠左
    10、navbar-right 菜单靠右

    bootstrap 模态框

    1、modal 声明一个模态框
    2、modal-dialog 定义模态框尺寸
    3、modal-lg 定义大尺寸模态框
    4、modal-sm 定义小尺寸模态框
    5、modal-header
    6、modal-body
    7、modal-footer

    bootstrap 响应式专题网站实例

  • 相关阅读:
    Docker的安装、配置及其基本使用
    Java提升七:注解
    Java提升六:泛型
    Java提升五:反射与动态代理
    MySQL中如何将主键默认值设为UUID()
    图解Mybatis框架原理及使用
    Java提升四:Stream流
    Java提升三:函数式接口
    Java提升二:Lambda表达式与方法引用
    java提升一:内部类
  • 原文地址:https://www.cnblogs.com/alwaysInMe/p/7404469.html
Copyright © 2020-2023  润新知