Web前端学习笔记之BootStrap

Bootstrap介绍

Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。

它是为实现快速开发Web应用程序而设计的一套前端工具包。

它支持响应式布局，并且在V3版本之后坚持移动设备优先。

为什么要使用Bootstrap？

在Bootstrap出现之前：

命名：重复、复杂、无意义（想个名字费劲）

样式：重复、冗余、不规范、不和谐

页面：错乱、不规范、不和谐

在使用Bootstrap之后： 各种命名都统一并且规范化。 页面风格统一，画面和谐。

Bootstrap-

官方地址：css // CSS文件│ ├── bootstrap-theme.css // Bootstrap主题样式文件│ ├── bootstrap-theme.css.map│ ├── bootstrap-theme.min.css // 主题相关样式压缩文件│ ├── bootstrap-theme.min.css.map│ ├── bootstrap.css│ ├── bootstrap.css.map│ ├── bootstrap.min.css // 核心CSS样式压缩文件│ └── bootstrap.min.css.map├── fonts // 字体文件│ ├── glyphicons-halflings-regular.eot│ ├── glyphicons-halflings-regular.svg│ ├── glyphicons-halflings-regular.ttf│ ├── glyphicons-halflings-regular.woff│ └── glyphicons-halflings-regular.woff2└── js // JS文件 ├── bootstrap.js ├── bootstrap.min.js // 核心JS压缩文件

处理依赖

由于Bootstrap的某些组件依赖于jQuery，所以请确保-对应版本的jQuery文件，来保证Bootstrap相关组件运行正常。

Bootstrap全局样式

排版、按钮、表格、表单、图片等我们常用的HTML元素，Bootstrap中都提供了全局样式。

我们只要在基本的HTML元素上通过设置class就能够应用上Bootstrap的样式，从而使我们的页面更美观和谐。

标题相关

标题

一级标题36px

二级标题30px

三级标题24px

四级标题18px

五级标题14px

六级标题12px

副标题

一级标题小标题

文本对齐

文本左对齐

文本居中

文本右对齐

文本大小写

Lowercased text.

Uppercased text.

Capitalized text.

表格

状态类

表单

内联表单

表单状态

带图标的表单

按钮

LinkButton

按钮样式

（默认样式）Default（首选项）Primary（成功）Success（一般信息）Info（警告）Warning（危险）Danger（链接）Link

按钮大小

（大按钮）Large button （大按钮）Large button

（默认尺寸）Default button （默认尺寸）Default button

（小按钮）Small button （小按钮）Small button

（超小尺寸）Extra small button （超小尺寸）Extra small button

图片

图片形状

辅助类

文本颜色

p class="text-muted">...

...

...

...

...

...

背景颜色

...

...

...

...

...

关闭按钮

×

下拉三角

快速浮动

内容块居中

清除浮动

显示与隐藏

常用Bootstrap组件

字体图标下拉菜单按钮组输入框俎导航分页标签和徽章页头缩率图进度条

模拟滚动的进度条：

var $d1 = $("#d1");var width = 0;var theID = setInterval(setValue, 200);function setValue() { if (width === 100) { clearInterval(theID); } else { width++; $d1.css("width", width+"%").text(width+"%"); }}

模拟滚动的进度条

响应式开发

为什么要进行响应式开发？

随着移动设备的流行，网页设计必须要考虑到移动端的设计。同一个网站为了兼容PC端和移动端显示，就需要进行响应式开发。

什么是响应式？

利用媒体查询，让同一个网站兼容不同的终端（PC端、移动端）呈现不同的页面布局。

用到的技术：

CSS3@media查询

用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸、是否可触摸、屏幕精度、横屏竖屏等信息。

常见属性：

device-width, device-height 屏幕宽、高width,height 渲染窗口宽、高orientation 设备方向resolution 设备分辨率

语法：

@media mediatype and|not|only (media feature) { CSS-Code;}

不同的媒体使用不同的stylesheet

viewport

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

设置viewport

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。height：和 width 相对应，指定高度。initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。maximum-scale：允许用户缩放到的最大比例。minimum-scale：允许用户缩放到的最小比例。user-scalable：用户是否可以手动缩放。

Bootstrap的栅格系统

containerrowcolumn

注意事项： 使用Bootstrap的时候不要让自己的名字与Bootstrap的类名冲突。

JavaScript插件

​​常用的Bootstrap自带插件​​

​​其他常用插件​​

Bootstrap实例精选：

封面图Carousel博客页面控制台登录页Offcanvas

Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。

它是为实现快速开发Web应用程序而设计的一套前端工具包。

它支持响应式布局，并且在V3版本之后坚持移动设备优先。

为什么要使用Bootstrap？

在Bootstrap出现之前：

命名：重复、复杂、无意义（想个名字费劲）

样式：重复、冗余、不规范、不和谐

页面：错乱、不规范、不和谐

在使用Bootstrap之后： 各种命名都统一并且规范化。 页面风格统一，画面和谐。

Bootstrap-

官方地址：css // CSS文件│ ├── bootstrap-theme.css // Bootstrap主题样式文件│ ├── bootstrap-theme.css.map│ ├── bootstrap-theme.min.css // 主题相关样式压缩文件│ ├── bootstrap-theme.min.css.map│ ├── bootstrap.css│ ├── bootstrap.css.map│ ├── bootstrap.min.css // 核心CSS样式压缩文件│ └── bootstrap.min.css.map├── fonts // 字体文件│ ├── glyphicons-halflings-regular.eot│ ├── glyphicons-halflings-regular.svg│ ├── glyphicons-halflings-regular.ttf│ ├── glyphicons-halflings-regular.woff│ └── glyphicons-halflings-regular.woff2└── js // JS文件 ├── bootstrap.js ├── bootstrap.min.js // 核心JS压缩文件

处理依赖

由于Bootstrap的某些组件依赖于jQuery，所以请确保-对应版本的jQuery文件，来保证Bootstrap相关组件运行正常。

Bootstrap全局样式

排版、按钮、表格、表单、图片等我们常用的HTML元素，Bootstrap中都提供了全局样式。

我们只要在基本的HTML元素上通过设置class就能够应用上Bootstrap的样式，从而使我们的页面更美观和谐。

标题相关

标题

一级标题36px

二级标题30px

三级标题24px

四级标题18px

五级标题14px

六级标题12px

副标题

一级标题小标题

文本对齐

文本左对齐

文本居中

文本右对齐

文本大小写

Lowercased text.

Uppercased text.

Capitalized text.

表格

状态类

表单

内联表单

表单状态

带图标的表单

按钮

LinkButton

按钮样式

（默认样式）Default（首选项）Primary（成功）Success（一般信息）Info（警告）Warning（危险）Danger（链接）Link

按钮大小

（大按钮）Large button （大按钮）Large button

（默认尺寸）Default button （默认尺寸）Default button

（小按钮）Small button （小按钮）Small button

（超小尺寸）Extra small button （超小尺寸）Extra small button

图片

图片形状

辅助类

文本颜色

p class="text-muted">...

...

...

...

...

...

背景颜色

...

...

...

...

...

关闭按钮

×

下拉三角

快速浮动

内容块居中

清除浮动

显示与隐藏

常用Bootstrap组件

字体图标下拉菜单按钮组输入框俎导航分页标签和徽章页头缩率图进度条

模拟滚动的进度条：

var $d1 = $("#d1");var width = 0;var theID = setInterval(setValue, 200);function setValue() { if (width === 100) { clearInterval(theID); } else { width++; $d1.css("width", width+"%").text(width+"%"); }}

模拟滚动的进度条

响应式开发

为什么要进行响应式开发？

随着移动设备的流行，网页设计必须要考虑到移动端的设计。同一个网站为了兼容PC端和移动端显示，就需要进行响应式开发。

什么是响应式？

利用媒体查询，让同一个网站兼容不同的终端（PC端、移动端）呈现不同的页面布局。

用到的技术：

CSS3@media查询

用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸、是否可触摸、屏幕精度、横屏竖屏等信息。

常见属性：

device-width, device-height 屏幕宽、高width,height 渲染窗口宽、高orientation 设备方向resolution 设备分辨率

语法：

@media mediatype and|not|only (media feature) { CSS-Code;}

不同的媒体使用不同的stylesheet

viewport

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

设置viewport

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。height：和 width 相对应，指定高度。initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。maximum-scale：允许用户缩放到的最大比例。minimum-scale：允许用户缩放到的最小比例。user-scalable：用户是否可以手动缩放。

Bootstrap的栅格系统

containerrowcolumn

注意事项： 使用Bootstrap的时候不要让自己的名字与Bootstrap的类名冲突。

JavaScript插件

​​常用的Bootstrap自带插件​​

​​其他常用插件​​

Bootstrap实例精选：

封面图Carousel博客页面控制台登录页Offcanvas

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。