首页

文章资讯

bootstrap方法的原理（Web前端框架学习—Bootstrap）

2024-11-18 16:55:166

Bootstrap是一个非常好的前端框架，在前端时间的小项目中需要(yào)使(shǐ)用(yòng)Bootstrap做前端，于是就学习了一下，觉得非常好用，推荐给新手。

一. 什么是Bootstrap？

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。同时，Bootstrap 还是最受欢(huan)迎(yíng)的(de) HTML、CSS 和(hé) JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。作为一个框架，它和jQuery EasyUI、WeUI一样，助力于前端开发。简而言之，使用Bootstrap让前端开发变得简洁高效。

注释：

1. jQuery EasyUI：jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。

2. WeUI：WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。

二. Bootstrap入门

使用Bootstrap框架，必须(xū)具(jù)备(bèi) HTML 、 CSS 和(hé) JavaScript 的(de)基(jī)础(chǔ)知(zhī)识(shi)。如(rú)果(guǒ)没(méi)有(yǒu)掌(zhǎng)握(wò)，可(kě)以(yǐ)前(qián)往(wǎng)【菜(cài)鸟(niǎo)教(jiào)程(chéng)】学(xué)习(xí)。

2.1 环(huán)境(jìng)配(pèi)置(zhì)

你(nǐ)有(yǒu)两(liǎng)种(zhǒng)方(fāng)式(shì)可(kě)以(yǐ)使(shǐ)用(yòng)Bootstrap，本地调用和网络调用。

本地调用需要从网络上下载[用于生产环境的Bootstrap]，下载地址：
https://static1.haohuo.net/uploads/images/2188443/2188443_ 。

下(xià)载(zài)完(wán)成(chéng)后(hòu)，解(jiě)压(yā)文件(jiàn)，得(de)到(dào)如(rú)下(xià)图(tú)所(suǒ)示(shì)的(de)三(sān)个(gè)文件(jiàn)夹(jiā)，这(zhè)三(sān)个(gè)文件(jiàn)夹(jiā)分(fēn)别(bié)用(yòng)于(yú)存(cún)放(fàng)样(yàng)式(shì)文件(jiàn)、字(zì)体(tǐ)文件(jiàn)、js脚(jiǎo)本(běn)文件(jiàn)。

网(wǎng)络(luò)调(diào)用(yòng)只(zhǐ)需(xū)使(shǐ)用(yòng) BootCDN 提(tí)供(gōng)的(de)免(miǎn)费(fèi) CDN 加(jiā)速(sù)服(fú)务(wu)。在(zài)你(nǐ)的(de)网(wǎng)页(yè)文件(jiàn)中(zhōng)写(xiě)入(rù)以(yǐ)下(xià)link即(jí)可(kě)。

2.2 了解Bootstrap

2.2.1 Bootstrap是html5的文档

Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。

<!DOCTYPE html> <html lang="zh-CN"> ... </html>

2.2.2 移动设备优先

Bootstrap 3是对移动设备友好的。不是简单的增加一些可选的针对移动设备的样式，而是直(zhí)接(jiē)融(róng)合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对(duì)移(yí)动(dòng)设(shè)备的样式融合进了框架的每个角落，而不是增加一个额外的文件。

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

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

2.2.3 栅(zhà)格(gé)系(xì)统(tǒng)

Bootstrap 提(tí)供(gōng)了(le)一(yī)套(tào)响(xiǎng)应(yīng)式(shì)、移(yí)动(dòng)设(shè)备(bèi)优(yōu)先(xiān)的(de)流(liú)式(shì)栅(zhà)格(gé)系(xì)统(tǒng)，随(suí)着(zhe)屏(píng)幕(mù)或(huò)视(shì)口(kǒu)（viewport）尺(chǐ)寸(cùn)的(de)增(zēng)加(jiā)，系(xì)统(tǒng)会(huì)自(zì)动(dòng)分(fēn)为(wèi)最(zuì)多(duō)12列(liè)。它(tā)包(bāo)含(hán)了(le)易(yì)于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

栅格系统用于通过(guò)一(yī)系(xì)列(liè)的(de)行(xíng)（row）与(yǔ)列(liè)（column）的(de)组(zǔ)合(hé)来(lái)创(chuàng)建(jiàn)页(yè)面(miàn)布(bù)局(jú)，你(nǐ)的(de)内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100%

宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

通过“行（row）”在水平方向创建一组“列（column）”。

你的内容应当放置于(yú)“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

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

通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值

margin 从而抵消掉为 .container 元素设置的

padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

负值的 margin就是下面的示例为什么(me)是(shì)向(xiàng)外(wài)突(tū)出(chū)的(de)原(yuán)因(yīn)。在(zài)栅(zhà)格(gé)列(liè)中(zhōng)的(de)内(nèi)容(róng)排(pái)成(chéng)一(yī)行(xíng)。

栅(zhà)格(gé)系(xì)统(tǒng)中(zhōng)的(de)列(liè)是(shì)通(tōng)过(guò)指(zhǐ)定(dìng)1到(dào)12的(de)值(zhí)来(lái)表(biǎo)示(shì)其(qí)跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

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

栅(zhà)格(gé)类(lèi)适(shì)用(yòng)于(yú)与(yǔ)屏(píng)幕(mù)宽(kuān)度(dù)大(dà)于(yú)或(huò)等(děng)于(yú)分(fēn)界(jiè)点(diǎn)大(dà)小(xiǎo)的(de)设(shè)备(bèi) ，并(bìng)且(qiě)针(zhēn)对(duì)小(xiǎo)屏(píng)幕(mù)设(shè)备(bèi)覆(fù)盖(gài)栅(zhà)格(gé)类(lèi)。因(yīn)此(cǐ)，在(zài)元(yuán)素(sù)上应用任何

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

.col-lg-*不存在，也影响大屏幕设备。

通过研究后面的实例，可以将这些原理应用到你的代码中。