Web前端框架学习—Bootstrap（web前端框架基础）
ccwgpt 2024-09-15 14:57 35 浏览 0 评论
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
相关推荐
- Spring框架基础知识-第四节内容(Spring基础配置)
-
Spring基础配置Spring框架本身有四大原则：（1）使用POJO进行轻量级和最小侵入式开发。（2）通过依赖注入和基于接口编程实现松耦合。（3）通过AOP和默认习惯进行声明式编程。（4）使...
- SpringBoot项目开发实战销售管理系统——项目框架搭建!
-
项目框架搭建在完成项目的分析和数据库设计后，一般由架构师完成项目框架的搭建，包括项目依赖的添加、项目的配置和项目日志的配置，完成后再开始业务代码的编写。技术栈的搭建新建一个SpringBoot项目，...
- 从零到一:独立运行若依框架系统并进行本地二次开发
-
####一、环境准备1.**基础环境**：-JDK1.8+（推荐JDK17）-Maven3.6+-MySQL5.7+（推荐8.0）-Redis5.0+-Node.js16...
- 单片机时间片轮询程序架构（单片机如何实现精准的时间周期）
-
时间片轮询法有很多时候都是与操作系统一起被提到，也就是说很多时候是操作系统中使用了这一方法:STM32单片机开发中的RTOS。下文将参考别人的代码，演示建立的一个时间片轮询架构程序的...
- Netty主要组件和服务器启动源码分析
-
1.Netty服务端启动代码publicclassNettyServer{publicstaticvoidmain(String[]args)throwsInterrup...
- 前端定时任务的神库!快把它加到你的项目中去!
-
我们常会遇到定时刷新数据、轮询接口、发送提醒等场景，我们常会遇到定时刷新数据、轮询接口、发送提醒等场景。为什么选择cron库？定时任务开发痛点原生setInterval的时间误差累积难以实现复杂的...
- 如何正确实现一个后台(定时)任务（后台定时任务怎么实现）
-
相信大家都知道如何在.NET中执行后台（定时）任务。首先我们会选择实现IHostedService接口或者继承BackgroundService来实现后台任务。然后注册到容器内，然后注册到容...
- 秒杀传统的Linux Crontab，这款开源的定时任务管理系统绝了!
-
Gocron是一款开源的定时任务管理系统，基于Go语言开发，旨在替代传统的LinuxCrontab。它通过Web界面提供直观的任务管理功能，支持精确到秒的Crontab时间表达式，并具备任务重试、超...
- Python 定时任务:schedule 自动执行脚本太方便。
-
2025年了，还在为Python定时任务头疼？轻量级需求搞什么Celery，schedule三行代码就搞定。这库把定时任务简化到像说人话，但新手直接抄文档容易踩坑。文档只会告诉你怎么设置每10分钟执行...
- SpringBoot扩展——定时任务!（基于springboot的校园宿舍管理系统的设计与实现）
-
定时任务项目开发中会涉及很多需要定时执行的代码，如每日凌晨对前一日的数据进行汇总，或者系统缓存的清理、对每日的数据进行分析和总结等需求，这些都是定时任务。单体系统和分布式系统的分布式任务有很大的区别，...
- 适合普通开发者和产品经理的PHP应用模板开发AI的SaaS应用框架
-
简单到傻！Liang_SaaS适合普通开发者和产品经理的PHP应用模板开发AI的SaaS应用框架，利用Php开发AI的SaaS应用框架，是一个强大的内容管理仪表板模板，基于Bootstrap和...
- 非常实用的15款开源PHP类库（php开源管理系统）
-
PHP库给开发者提供了一个标准接口，它帮助开发者在PHP里充分利用面向对象编程。这些库为特定类型的内置功能提供了一个标准的API，允许类可以与PHP引擎进行无缝的交互。此外，开发者使用这些类库还可以简...
- 蜂神榜苹果商店也凑热闹:“520”我爱玩家!
-
各位看官，今天被朋友圈各类“520”刷屏呢？有没有给你亲爱的家人一份“520”模式的红包呢？苹果商店也给了玩家一个“520”模式的惊喜---再一次提供了多款“1元”价格的游戏！并且此次降价的游戏品质都...
- 变成气球的猫咪《气球》十一正式推出
-
墨西哥游戏公司NoodlecakeGames曾开发过《致命框架》、《阿尔托冒险》等优秀佳作，而它旗下的最新游戏《气球》(TheBalloons)在十一的时候就要和大家见面了。游戏中，玩家要操控娃娃...
- 星座超游爱:狮子遇挑战，处女手抓牢~
-
teemo跟大家讲了三期太阳星座，也许有很多不热心的小伙伴并不知道是什么东西，今天就小科普一番~在出生的那一天，太阳所落的那个星座，就是每个人的太阳星座，而这恰好就是大家的性格中心，是权势驱力、人格的...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- Spring框架基础知识-第四节内容(Spring基础配置)
- SpringBoot项目开发实战销售管理系统——项目框架搭建!
- 从零到一:独立运行若依框架系统并进行本地二次开发
- 单片机时间片轮询程序架构（单片机如何实现精准的时间周期）
- Netty主要组件和服务器启动源码分析
- 前端定时任务的神库!快把它加到你的项目中去!
- 如何正确实现一个后台(定时)任务（后台定时任务怎么实现）
- 秒杀传统的Linux Crontab，这款开源的定时任务管理系统绝了!
- Python 定时任务:schedule 自动执行脚本太方便。
- SpringBoot扩展——定时任务!（基于springboot的校园宿舍管理系统的设计与实现）
- 标签列表
-
- 框架图 (58)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (56)
- shiro框架 (61)
- 定时任务框架 (56)
- java日志框架 (61)
- JAVA集合框架 (47)
- mfc框架 (52)
- abb框架断路器 (48)
- beego框架 (52)
- java框架spring (58)
- grpc框架 (65)
- tornado框架 (48)
- 前端框架bootstrap (54)
- orm框架有哪些 (51)
- ppt框架 (48)
- 内联框架 (52)
- cad怎么画框架 (58)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)