zoukankan      html  css  js  c++  java
  • 前端之Bootstrap

    Bootstrap简介

      Bootstrap是一个前端框架、是目前最受欢迎、最流行的web前端框架、是Twitter公司的Mark Otto和Jacob Thornton一起开发的,Bootstra框架是基于HTML、CSS、JavaScript 开发的,它因简洁、直观、功能强大被开发者广发使用。

      Bootstrap前端框架使得 Web 开发更加快捷,提供了优雅的HTML、CSS和JavaScript规范,它是由动态CSS语言Less写成。Bootstrap前端框架刚推出就颇受欢迎,一直是GitHub上的热门开源项目,是一些前端开发者较为熟悉的框架。

    Bootstra框架用途和优点

      我们可以使用bootstra框架提供的样式和组件快速的完成一个网站的前端页面,只需要引用一些定义好样式和组件(通过定义好的class来引用相应的样式和组件),就可以完成一个非常漂亮网页。而且bootstra框架还支持自适应,在不同大小的屏幕上会自动调节网页显示的内容,避免了在在pc上很漂亮的网页,而在移动端(小屏幕)左右出现滚动条,网页内容太小看不清等不利于用户体验的表现。

    bootstrap框架文件包结构

      针对具有不同技能等级的开发者和不同的使用场景,Bootstrap提供了3种方式的文件包:

      用于生产环境的bootstrap框架文件包结构

    • Bootstrap:主目录
    • Css/:CSS样式文件目录
    • bootstrap.css:核心CSS文件
    • *.css.map:source map文件
    • bootstrap.min.css:压缩版核心CSS文件
    • bootstrap.min.css.map:压缩版source map文件
    • bootstrap-theme.css:可选的Boostrap主题文件
    • bootstrap-theme.min.css:压缩版可选的Bootstrap主题文件
    • js/:JavaScript文件目录
    • bootstrap.js:核心JavaScript文件
    • bootstrap.min.js:核心JavaScript文件压缩
    • fonts/:文体图标文件目录
    • glyphicons-halflings-regular.eot:字体图标文件
    • glyphicons-halflings-regular.svg:字体图标文件
    • glyphicons-halflings-regular.tt:字体图标文件
    • glyphicons-halflings-regular.woff:字体图标文件
    • glyphicons-halflings-regular.woff2:字体图标文件

    Bootstra框架环境搭建

      要使用bootstrap框架至少需要引入3个文件:bootstrap.min.css、jQuery.min.js、bootstrap.min.js。

      

    <!-- jQuery文件,必须在bootstrap.min.js 之前引入 -->
    <script src="jquery/1.11.3/jquery.min.js"></script>
    <!-- Bootstrap核心CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Bootstrap核心JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>

      注意:

    1. bootstrap.min.css、jquery.min.js、bootstrap.min.js这三个文件的引入顺序不是随意的,jQuery文件必须在bootstrap.min.js 之前引入。
    2. jquery.min.js、bootstrap.min.js一般在HTML网页的最底部引入,这样可以避免这两个文件先加载出现问题,网页内容显示慢或不显示的问题。

    Bootstra使用方法

    注:由于bootstrap官网文档比较详细,这里就不一一介绍了,只做几个重要的介绍,其它的可以参考https://v3.bootcss.com/

    1.布局容器

      Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种 容器类不能互相嵌套。

    .container 类用于固定宽度并支持响应式布局的容器。
    <div class="container">
      ...
    </div>
    .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
    <div class="container-fluid">
      ...
    </div>

    2.栅格系统

      栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理:

    • “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
    • 通过“行(row)”在水平方向创建一组“列(column)”。 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
    • 类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
    • 通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding。

    • 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
    • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。
    • 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
    • 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-lg-* 不存在, 也影响大屏幕设备。

      注意:栅格系统是以12为单位的每一个div下面都被分为12等分

      例子:

    <style>
            .red {
                background-color: red;
                border: 3px solid green;
                height: 100px;
            }
    </style>
    <div class="container">
        <div class="row">
            <div class="col-md-6 red"></div>
            <div class="col-md-6 red"></div>
        </div>
    </div>

    3.栅格参数

  • 相关阅读:
    SAP PI 如何实现消息定义查询
    EWM与ERP交互程序
    ITS Mobile Template interpretation failed. Template does not exist
    SAP Material Flow System (MFS) 物料流系统简介
    SAP EWM Table list
    EWM RF 屏幕增强
    SAP EWM TCODE list
    SAP扩展仓库管理(SAPEWM)在线研讨会笔记
    ERP与EWM集成配置ERP端组织架构(二)
    EWM RF(Radio Frequency)简介
  • 原文地址:https://www.cnblogs.com/wangchengpei/p/10976290.html
Copyright © 2011-2022 走看看