[郑州|结业弟子]JS-高世豪|2019年11月13日的日报-技能树.IT修真院

发表于： 2019-11-13 21:22:00

1 1006

一、今天完成的事情什么是bootstrap？bootstrap是一个用于快速开发web应用程序和网站的前端框架。bootstrap是基于html，css，JavaScript的。它是由Twitter的两个人在2011年8月发布在github上的产品。为什么使用bootstrap？移动设备优先：自bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式。浏览器支持：所有的主流浏览器都支持bootstrap。容易上手：只要具备html和css的基础知识，就可以开始学习bootstrap。响应式设计：bootstrap的响应式css能够自适应于台式机，平板电脑和手机。他为开发人员创建接口提供了一个简洁同一的解决方案它包含了功能强大的内置组件，易于定制。它提供了基于web的定制它是开源的bootstrap包含的内容基本结构：bootstrap提供了一个带有网格系统、链接样式、背景的基本结构。css：bootstrap自带以下特性：全局的css设置，定义基本的html元素样式，可扩展的class，以及一个先进的网格系统。组件：bootstrap包含了十几个自定义的jQurey插件。可以直接包含所有的插件，也可以逐个包含这些插件。定制：可以定制bootstrap的组件，less变量和jQuery插件来得到自己的版本。下载并安装bootstrap：可以从官网下载bootstrap的最新版本。也可以不下载，直接link <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">提示：bootstrap推荐全局样式和设置统一，使之标准化。HTML5 doctype头部规范html5标准的doctype头部定义是首要的，否则会导致样式失真<!doctype html><html lang="zh-cn">...</html>响应式meta标签移动设备优先，bootstrap4不同于历史版本，他首先为移动设备优化代码，然后用css媒体查询来扩展组件。为了确保所有的设备的渲染和触摸效果，必须在网页的<head>区添加响应式的视图标签，简要的说就是要优先引入下面一行。<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">盒尺寸为了更直观的用bootstrap的尺寸规范（而不受浏览器标准影响），我们把将全局的box-sizing的值由默认的content-box重定义为border-box，以保证padding不受影响元素的最后计算宽度。但在页面引用Google自定义搜索、Google map地图等第三方产品时会出现兼容性问题。对此你可以用下面的方法来重置盒尺寸：.selector-for-some-widget {box-sizing: content-box;}用了上面方法重定义后，所有嵌套在内的元素，包括通过：.before以及:after产生的内容，都会继承.selector-for-some-widger所指定的box-sizing。bootstrap CDN在线引用跳过下载和本地部署，直接引用到项目中（如果是离线项目这种方式是无效的）<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>container容器container容器是窗口布局的最基本元素，我们推荐所有样式都定义在 .container 或 .container-fluid容器之中，这是启用整个栅格系统必不可少的前置条件，他们分别对应选择一个响应式的、固定宽度的容器，或者选择一个流式自适应浏览器或容器最大合法宽度的窗口（意味着任何时候它的宽度总是100%）.container 容器可以被嵌套，但是大多数布局并不需要这么做（最少层次的嵌套构建出的网页更好看），其呈现的效果和使用方法如下所示：
使用 .container-fluid 类，可以使div宽度扩展到整个宽度（如果没有被其他css容器包裹，则应是浏览器运行时的宽度，否则应是父容器中允许的最大宽度，一般视为100%宽度），示例效果和代码方法如下：