第五章 前端开发学习——Boostrap

第五章 前端开发学习——Boostrap

一、Bootstrap基础

二、Bootstrap布局

三、Bootstrap组件

四、Bootstrap插件

一、Bootstrap基础

什么是Bootstrap(what):

由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架 简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。

Bootstrap版本:

Bootstrap2、Bootstrap3、Bootstrap4

Bootstrap下载:(前往官网自行下载)

  • 用于生产环境 的Bootstrap(CSS\JavaScript)(用这种)
  • Bootstrap LESS源码 (LESS是CSS预处理器)
  • Bootstrap SASS源码(SASS也是CSS预处理)

Bootstrap CDN服务:

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

目录结构:

生产环境版:

导入步骤:

①Bootstrap的js特效是基于jQuery写的,在导入Bootstrap前,必须先导入jQuery库。

②导入css样式

二、Bootstrap布局

 1.响应式布局

A)手机屏幕的分辨率

  • 现在绝大部分 手机 视网膜屏幕, 有物理分辨率,和 渲染分辨率。 iphone8 750*1334 渲染分辨率: 375*667
  • 手机浏览器 为了让 没有做响应式处理的网页能够正常显示, 自动进行缩放。视口的大小通常会设置为 980px

B)媒体查询

根据多种媒体可能写多种media对应的css样式

@media (min-width:) {
    选择器 {

    }
    选择器 {

    }
}
<style>
        body {
            margin:0;
        }

        /*默认 <768px 手机 */
        .container {
            margin:0 auto;
            width:100%;
            height:400px;
            text-align: center;
            background: pink;
        }

        /*媒体查询*/

        /* >= 768  < 992   小屏幕  平板 */
        @media (min-width:768px) {
            .container {
                width:750px;
            }
            .row {

            }
        }

        /* >=992 <1200  中等屏幕 */
        @media (min-width:992px) {
            .container {
                width: 970px;
            }
        }

        /*>=1200 大屏幕*/
        @media (min-width:1200px) {
            .container {
                width: 1170px;
            }
        }
    </style>

媒体特效:
min-width
min-height
max-width
max-height
width
height
.........

C)移动设备优先

为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签。

<meta name="viewport" content="width=device-width, initial-scale=1">

在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能。这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。注意,这种方式我们并不推荐所有网站使用,还是要看你自己的情况而定!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

user-scalable=no  不允许缩放

initial-scale=1        缩放比例

maximum-scale=1最大缩放比例

minimum-scale=1 最小缩放比例

 2.栅格系统

A)布局容器

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

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

<div class="container-fluid">
  ...
</div>

B)栅格系统简介

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

栅格系统用于通过一系列的行(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-*不存在, 也影响大屏幕设备。

C)栅格参数

三、Bootstrap组件

四、Bootstrap插件

原文地址:https://www.cnblogs.com/neymargoal/p/9507511.html

时间: 2024-10-21 08:28:24

第五章 前端开发学习——Boostrap的相关文章

前端开发学习笔记(一)深入浅出Javascript

从事开发工作已经有十几年时间了,但一直没有真正涉猎WEB开发,这在当今IT业界听起来有些不可思议哈.从今天开始静下心来,全面深入的学习WEB开发的有关知识.将学习的体会和要点记录下来,以作备忘. 深入浅出Javascript一共12章,按照章节记录. 第一章 前端开发涉及到三个层面:HTML(内容) + CSS(外观) + Javascript(交互/行动) JS脚本不论在<script>块中 还是 嵌入HTML中,都应以";"分号作为结束符.这是一个规范的写法 中文网页应

2018web前端学习路线,详谈web前端开发学习路线

近几年IT业可谓是发展火热,而且新生了很多的职业.在这众多的新生职业中备受瞩目的当属web前端工程师了,web前端在IT行业真正受到重视的时间不超过五年,但是web前端的发展前景却是非常的可观,好前景高薪资吸引了众多的人投入到前端开发的学习当中去,想学好web前端,这份web前端开发学习路线分享给你. 好的学习方法和掌握好正确的学习路线可以让我们的学习达到事半功倍的效果,如果你新手想要学习web前端的话,那么这份前端的学习路线图很适合你.这份学习路线的课程涵盖JavaScript.HTML5.C

WEB前端开发学习:源码canvas 雪

WEB前端开发学习:源码canvas 雪 双旦节要到了,程序员们为了响应气氛,特别用代码制作了动态雪花,WEB前端开发学习的初学者们一起跟着案例做一遍吧! <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body style="overflow: hidden;margin:

web前端开发学习路线图分享,详谈2018web前端开发学习路线

近几年IT业可谓是发展火热,而且新生了很多的职业.例如安卓开发工程师.iOS开发工程师.在这众多的新生职业中备受瞩目的当属web前端工程师了,前端工程师薪资高,就业发展前景好,更多的人选择了这一职业成为自己的发展方向,想要自己成为一名合格的web前端工程师,web前端开发学习路线图值得大家去看看.挺适合大家借鉴来学习的.web前端课程包括了几个方面的内容: 1.学习HTML,这是最简单,最基本的是要掌握div,formtable.Ulli.P.跨度.字体这些标签,这些都是最常用的,尤其是DIV和

【转载】web前端开发学习经验总结

原文链接 web开发大概分为前台和后端,前台又可以分为美工,交互设计,js编程.后端了解不多,前端的话,可以按如下思路系统学习: 基础知识: 1. html + css.这部分建议在 www.w3school.com.cn 上学习,边学边练,每章后还有小测试.之后可以模仿一些网站做些页面.在实践中积累了一些经验后,可以系统的读一两本书,推荐<head first html 与 css 中文版>,不过这本书讲的太细了,我没能拿出耐心细读. 2. javascript. 要学的内容实在很多,如果没

web前端开发学习课程大纲路线图及学习方法分享

想学好web前端开发,要学会阅读别人优秀的代码.web前端开发思想并不是统一固定不变的,阅读别人代码的过程就是间接的在向别人学习,这一过程中可以学习别人的开发思路,不同的人思路是不一样的,如果别人写的代码很优秀.很简单.且运行和性能上有很大的优势,就有很多可以借鉴的地方. 以下这份web前端学习路线图适合所以零基础的学员学习,都是从浅入深,没有基础的同学跟着视频教程及课程大纲一步一步的学习是可以很好的掌握的. 那么想要学好html5前端开发,那么需要掌握的专业技术有: 第一阶段:前端页面重构 内

前端开发学习路线_零基础如何学web前端_从小白到大神进阶

下面给大家讲解一下前端需要掌握哪些技术和学习路线Web前端基础知识:一.前端相关概念建立主要内容:浏览器的概念介绍: 浏览器的作用.工作方式浏览器的概念介绍: 浏览器的作用.工作方式HTTP协议: 协议产生的原因.作用.及内容页面加载流程:当用户打开浏览器,输入地址栏并按下回车之后发生的事情二.HTML-CSS-JS基础-jQuery学习内容:HTML及HTML5:理解浏览器如何解析HTML.基本的语法规则.不同标签的使用方式.嵌套方式CSS:理解层叠式样式表的语法规则.各种盒模型及常用布局CS

Web 前端开发学习之路(入门篇)

字数1374 阅读4622 评论0 喜欢49 以前学习过一段时间的web前端开发,整理了一些我看过的/我认为比较好的学习资料(网站.书籍).不要问我为啥没有进阶版,我只是一条产品汪而已,求轻喷.== 以下引用知乎 @李路 的话. 以我的经验,大部分技术,熟读下列四类书籍即可. 入门,用浅显的语言和方式讲述正确的道理和方法,如head first系列全面,巨细无遗地探讨每个细节,遇到疑难问题时往往可以在这里得到理论解答,如Definitive Guide/Programming xx系列实践,结合

web前端开发学习路径图

第一阶段 WEB前端工程师课程 HTML语句,HTML页面结构.css语法.style属性.link和style标签.id属性.等HTML语句中的相关属性: 通过Dreamweaver制作出跨越平台限制和跨越浏览器兼容性的页面,掌握Dreamweaver成为Web前端工程是的关键. 浏览器兼容性问题处理:XHTML与CSS校验,XHTML校验器,CSS校验器:解决如:Chrome.Safari.firefox.opera 等主流浏览器的兼容问题. 第二阶段 WEB前端移动端+响应式布局 Boot