03-Bootstrap学习

时间 2019-12-18

标签 bootstrap 学习栏目 Bootstarp 繁體版

原文原文链接

1、Bootstrap的介绍

凡是使用过Bootstrap的开发者，都不在意作这么两件事情：复制and粘贴。哈哈~，是的使用Bootstrap很是简单，可是在复制粘贴以前，须要先对Bootstrap的用法一一熟悉以后咱们才开始干活！javascript

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、javascript 的，它简洁灵活，使得 Web 开发更加快捷。css

它用于开发响应式布局、移动设备优先的 WEB 项目html

2.1使用Bootstrap第一步，先将生成环境的Bootstrap下载下来。而后将下载，而后引入到本身建好的当前目录中前端

2.2点到起步中的基本模板java

将看到的整段代码复制粘贴到建好的index.html文件中bootstrap

官网明确表示：
使用此给出的这份超级简单的HTML模板，或者修改这些实例。咱们强烈建议你对这些实例按照本身的需求进行修改，而不要简单的复制、粘贴

也就是说使用Bootstrap能够在移动设备上运行。为了确保适当的绘制和触屏缩放，须要在<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">

为了加强跨浏览器表现的一致性，咱们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。echarts

Bootstrap 须要为页面内容和栅格系统包裹一个 .container 容器。咱们提供了两个做此用处的类。注意，因为 padding 等属性的缘由，这两种容器类不能互相嵌套。框架

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

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

.container-fluid 类用于 100% 宽度，占据所有视口（viewport）的容器。

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

栅格系统的鼻祖是 https://960.gs/.

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

栅格系统用于经过一系列的行（row）与列（column）的组合来建立页面布局，你的内容就能够放入这些建立好的布局中。下面就介绍一下 Bootstrap 栅格系统的工做原理：

使用单一的一组 .col-md-* 栅格类，就能够建立一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一块儿的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。全部“列（column）必须放在 ” .row 内。

一些常使用网站

阿里巴巴图标库网站：

PS:仍是那句话，使用Bootstrap很是简单，根据项目的需求适当去官网复制粘贴，而后根据需求更改本身的内容，若是想修改本身的样式，能够添加类，按照以前我们学习css同样的方式，给它相应的样式