Bootstrap 介绍

作者: kmmyzi | 来源:发表于2017-03-27 01:12 被阅读0次

    一.Bootstrap  概述

    Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美,可用于快速、简单地构建基于 PC 及移动端设备的 Web 页面需求。

    2010 年 6 月,Twitter内部的工程师为了解决前端开发任务中的协作统一问题。经历各种方案后,Bootstrap 最终被确定下来,并于 2011 年 8 月发布。经过很长时间的迭代升级,由最初的 CSS 驱动项目发展成为内置很多 JavaScript 插件和图标的多功能 Web 前端的开源框架。

    Bootstrap 最为重要的部分就是它的响应式布局,通过这种布局可以兼容 PC 端、PAD以及手机移动端的页面访问。

    二.Bootstrap  特点

    Bootstrap 非常流行,得益于它非常实用的功能和特点。主要核心功能特点如下:(1).跨设备、跨浏览器

    可以兼容所有现代浏览器,包括比较诟病的 IE7、8。当然,本课程不再考虑 IE9 以下浏览器。

    (2).响应式布局

    不但可以支持 PC 端的各种分辨率的显示,还支持移动端 PAD、手机等屏幕的响应式切换显示。

    (3).提供的全面的组件

    Bootstrap 提供了实用性很强的组件,包括:导航、标签、工具条、按钮等一系列组件,方便开发者调用。

    (4).内置 jQuery插件

    Bootstrap 提供了很多实用性的 jquery插件,这些插件方便开发者实现 Web 中各种常规特效。

    (5).支持 HTML5、CSS3

    HTML5 语义化标签和 CSS3 属性,都得到很好的支持。

    (6).支持 LESS 动态样式LESS 使用变量、嵌套、操作混合编码,编写更快、更灵活的 CSS。它和 Bootstrap 能很好的配合开发。

    三.Bootstrap  结构

    首先,想要了解 Boostrap 的文档结构,需要在官网先把它下载到本地。

    Bootstrap主要分为三大核心目录:css(样式)、js(脚本)、fonts(字体)。

    1.css 目录中有四个 css后缀的文件,其中包含 min 字样的,是压缩版本,一般使用这个;不包含的属于没有压缩的,可以学习了解 css代码的文件;而 map 后缀的文件则是css 源码映射表,在一些特定的浏览器工具中使用。

    2.js 目录包含两个文件,是未压缩和压缩的 js 文件。

    3.fonts 目录包含了不同后缀的字体文件。

    四.创建第一个页面

    我们创建一个 HTML5 的页面,并且将 Bootstrap 的核心文件引入,然后测试是否正常显示。

    在页面中引入bootstrap的层叠样式表,和javascript文件即可。

    五.学习的各项准备

    1.开发工具,我们使用Sublime Text3作为Bootstrap的开发工具,并且安装了Emmet代码生成插件;

    2.测试工具,除了常规的现代浏览器,其次就是作为移动端的测试工具,我们这里采用的是 Opera Mobile Emulator,和 Chrome 的移动 Web 测试工具。

    3.所需基础,至少有 HTML5 第一季课程的基础,Bootstrap 内置了很多 jQuery 插件,虽然使用起来比 jQuery 或 JS 本身要简单的多,但如果有 jQuery 和 JS 课程的基础,那学习理解力就更加深入;

    4.课程分辨率:基础课程,我们使用 1024 x 768 来录制,但某些特殊部分,比如响应式和项目课程,需要大分辨率录制,会采用 1440 x 900来录制。

    二、 排版样式

    一.页面排版

    Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。

    1. 页面主体

    Bootstrap 将全局 font-size 设置为 14px,line-height 行高设置为 1.428(即20px);

    段落元素被设置等于 1/2 行高(即 10px);颜色被设置为#333。

    //创建包含段落突出的文本

    给当前p标签添加lead类名即可


    2. 标题

    //从 h1 到 h6

    <h1>Bootstrap 框架</h1>

    //36px

    <h2>Bootstrap 框架<h2/>

    //30px

    <h3>Bootstrap 框架</h3>

    //24px

    <h4>Bootstrap 框架</h4>

    //18px

    <h5>Bootstrap 框架</h5>

    //14px

    <h6>Bootstrap 框架</h6>

    //12px

    Bootstrap 分别对 h1 ~ h6 进行了 CSS 样式的重构,并且还支持普通内联元素定义 class=(.h1 ~ h6)来实现相同的功能。

    //内联元素使用标题字体

    <span class="h1">Bootstrap</span>

    注:通过 Firebug 查看元素还看到,字体颜色、字体样式、行高均被固定了,从而保证了统一性,而原生的会根据系统内置的首选字体决定,颜色是最黑色。在 h1 ~h6 元素之间,还可以嵌入一个 small 元素作为副标题,//在标题元素内插入 small 元素

    我们发现 h1 ~ h3 下 small 元素的大小只占父元素的 65%,那么通过计算(查看 Firebug 计算后的样式),h1 ~ h3 下的 small 为 23.4px、19.5px、15.6px;h4 ~ h6 下 small 元素的大小只占父元素的 75% ,分别为:13.5px、10.5px、9px。在 h1 ~ h6 下的 small 样式也进行了改变,颜色变成淡灰色:#777,行高为1,粗度为 400。

    3. 内联文本

    元素//添加标记,元素或.mark 类

    删除的文本<del></del>

    无用的文本<s></s>

     插入的文本<ins></ins>

    下划线文本<u></u>

     三、 栅格系统学习要点:

    1.移动设备优先

    2.布局容器

    3.栅格系统

    一.移动设备优先

    在 HTML5 的项目中,我们做了移动端的项目。它有一份非常重要的 meta,用于设置屏幕和设备等宽以及是否运行用户缩放,及缩放比例的问题。

    //分别为:屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放

    栅格系统中,浏览器会随着屏幕的大小的增减自动分配最多12列。通过一系列的行(row)与列(column)的组合来创建页面布局。工作原理如下:

    1.“行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100%宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。

    2.通过“行(row)”在水平方向创建一组“列(column)”。

    3.你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。

    4.类似 .row和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

    5.通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了 padding。

    6.负值的 margin 就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。

    7.栅格系统中的列是通过指定 1 到 12 的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。

    8.如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。

    9.栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ,并且针对小屏幕设备覆盖栅格类。因此,在元素上应用任何 .col-lg-*不存在, 也影响大屏幕设备。

    栅格参数表如上图所示,栅格系统最外层区分了四种宽度的浏览器:超小屏(<768px)、小屏(>=768px)、中屏(>=992px)和大屏(>=1200px)。而内层.container容器的自适应宽度为:自动、750px、970px 和 1170px。自动的意思为,如果你是手机屏幕,则全面独占一行显示。//四种屏幕分类全部激活

    相关文章

      网友评论

        本文标题:Bootstrap 介绍

        本文链接:https://www.haomeiwen.com/subject/owslottx.html