Web前端框架学习—Bootstrap_web前端框架教学_daixiangcn的博客-程序员秘密

零. 写在前面

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

一. 什么是Bootstrap？

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

注释：
1. jQuery EasyUI：jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。
2. WeUI：WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。

二. Bootstrap入门

使用Bootstrap框架，必须具备 HTML 、 CSS 和 JavaScript 的基础知识。如果没有掌握，可以前往【菜鸟教程】学习。
2.1 环境配置
你有两种方式可以使用Bootstrap，本地调用和网络调用。
本地调用需要从网络上下载[用于生产环境的Bootstrap]，下载地址：http://v3.bootcss.com/getting-started 。
这里写图片描述
下载完成后，解压文件，得到如下图所示的三个文件夹，这三个文件夹分别用于存放样式文件、字体文件、js脚本文件。
解压文件夹
网络调用只需使用 BootCDN 提供的免费 CDN 加速服务。在你的网页文件中写入以下link即可。

<!-- 最新版本的 Bootstrap 核心 CSS 文件 --> 
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 <!-- 可选的 Bootstrap 主题文件（一般不用引入） --> 
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

2.2 了解Bootstrap

2.2.1 Bootstrap是html5的文档

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

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

2.2.2 移动设备优先

Bootstrap 3是对移动设备友好的。不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。
为了确保适当的绘制和触屏缩放，需要在之中添加 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">

2.2.3 栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
栅格系统用于通过一系列的行（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-*不存在，也影响大屏幕设备。

通过研究后面的实例，可以将这些原理应用到你的代码中。
下面这幅图有助于理解Bootstrap的栅格系统。
这里写图片描述

三. 在线学习的网站推荐

Bootstrap V3版本官网：http://v3.bootcss.com
菜鸟教程Bootstrap专栏：http://www.runoob.com/bootstrap/bootstrap-tutorial.html
腾讯课堂：http://ke.qq.com
慕课网：http://www.imooc.com

本文链接：https://blog.csdn.net/yuanxiang01/article/details/78537357

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

逆向基础（六）_weixin_34032779的博客-程序员秘密

reverse-engineering · 2014/06/05 17:36Chapter 16 数组数组是在内存中连续排列的一组变量，这些变量具有相同类型1。16.1 小例子#!cpp#include &lt;stdio.h&gt;int main(){ int a[20]; int i; for (i=0; i&lt;20; i++) a[i]=i...

【pytorch】torchvision.transforms 图像的变换详解；图像的预处理；数据增强_学渣渣渣渣渣的博客-程序员秘密

torchvision.transforms是包含一系列常用图像变换方法的包，可用于图像预处理、数据增强等工作，但是注意它更适合于classification等对数据增强后无需改变图像的label的情况，对于Segmentation等对图像增强时需要同步改变label的情况可能不太实用，需要自己重新封装一下。

web点播VOD m3u8播放识别为live流播放几个.ts切片停止播放排错_wscxh1的博客-程序员秘密

web点播 m3u8播放识别为live流排错m3u8播放识别为live流播放几个.ts切片停止播放，排错了一小时，总结一下：1相关资料：.Live m3u8播放3个文件自动停止问题检查m3u8是否以下面内容结尾：#EXT-X-ENDLIST发现不管怎么调整m3u8都会出错（即文件确实是以#EXT-X-ENDLIST结尾）检查响应内容，发现少了一大截排查发现是Content-length设置后，重新编辑了m3u8文本，导致响应少了一大段服了...

Android Studio 数据库可视化工具（Database Inspector）报错_android studio数据库可视化_Joker_1228的博客-程序员秘密

Android Studio 数据库可视化工具（Database Inspector）报错使用这个工具的时候报了错，（诸位还有可能是好奇点了一下），然后，就报错了提示如下：Database Inspector: For security reasons offline mode is disabled when the process being inspected does not correspond to the project open in studio or when the proj

关于计算机的病毒案例分析,实例解析蠕虫病毒的原理 -电脑资料_斜阳君的博客-程序员秘密

如今对大家的电脑威胁最大的就属网络蠕虫病毒了！网络蠕虫病毒的危害之大简直令人吃惊，从大名鼎鼎的爱虫到欢乐时光，再到红色代码，其破坏力越来越强，因此我们有必要了解网络蠕虫病毒，蠕虫病毒与一般的计算机病毒不同，它不采用将自身拷贝附加到其他程序中的方式来复制自己，所以在病毒中它也算是一个另类。蠕虫病毒的破坏性很强，部分蠕虫病毒不仅可以在因特网上兴风作浪，局域网也成了它们施展身手的舞台？D？D蠕虫病毒可以...

[Jobdu] 题目1384：二维数组中的查找_weixin_30839881的博客-程序员秘密

题目描述：在一个二维数组中，每一行都按照从左到右递增的顺序排序，每一列都按照从上到下递增的顺序排序。请完成一个函数，输入这样的一个二维数组和一个整数，判断数组中是否含有该整数。输入：输入可能包含多个测试样例，对于每个测试案例，输入的第一行为两个整数m和n(1<=m,n<=1000)：代表将要输入的矩阵的行数和列数。输入的第二行包括一个整数t(1<=t<=...

随便推点

Android技术周报_W9_weixin_33827590的博客-程序员秘密

文章1. 开源协议了解这些就够了介绍了常用的6种开源协议 GPL,LGPLBSD,Apache,Mozilla,MIT 2. Android Transition Framework详解---超炫的动画框架早在Android 4.4，Transition 就已经引入，但在5.0才得以真正的实现。本文详细介绍了Transition的使用. ...

售前工程师、实施工程师、运维、技术支持这些岗位的具体区别是什么？他们的工作内容大致都是什么？_技术支持和运维的区别_「已注销」的博客-程序员秘密

作者：大胆草民链接：https://www.zhihu.com/question/23793594/answer/27388387来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。售前：在产品销售过程中，和客户接洽的除了销售人员，就是这个售前工程师了。销售人员，我们从一般来说，门槛都是比较低的，很少会对销售人员的技术能力有所要求。然后问题就出现了，如果客户问到技...

odoo14 开发基本操作_odoo14模块开发_淡水瑜的博客-程序员秘密

文章目录开启debug模式查看odoo版本启动和重启odoodemo数据不启动新建一个网站新建一个基本模块到浏览器新增模板在odoo存储数据新建一个模块新建一个odoo模块剖析odoo代码开启debug模式在Odoo14中debug已无法调出调试菜单，需使用完整的?debug=1或?debug=assets；比如链接地址为http://localhost:8069/,则开启debug模式的地址为：http://localhost:8069/web?debug=1查看odoo版本至少安装一个应用后再