Web前端快速开发 Bootstrap 响应式UI框架

简介: Web前端快速开发 Bootstrap 响应式UI框架

前言

本文讲解了Bootstrap 响应式UI框架 的基本使用与规则,如果本文对你所帮助,请三连支持博主,先赞后看养成习惯。


以下是本篇文章正文内容,下面案例可供参考

Bootstrap介绍

顾名思义 就是一套架构,它有一套完整的网页功能解决方案,而且控制权在框架本身,有预定的样式库、组件库和插件。使用者必须按照框架所规定的规则来开发。

Bootstrap 是基于HTML CSS Javascript 的框架,用于开发响应式布局,移动设备有限的web项目,它简单灵活,使得web 开发更加快捷。

因为它本身已经提供了一套页面样式和功能,所以适合没有设计师的团队。

它框架里包含了自定义的jQuery插件,所以功能上是依赖jquery 插件的,且它整个框架的底层原理是利用Less和Sass。其中bootstrap3是基于Less,bootstrap4是基于Sass。

bootstrap一般用于后台管理界面。如果想在互联网层面用作用户交互,样式还是有点保守的。所以前台一般需要ui设计师来设计,前端工程师来实现。但后台管理界面对样式的需求就没有这么高了,使用bootstrap可以很快的完成页面布局,关键是不难看!所以bootstrap简直就是后台程序员都福音,至于3和4没必要纠结,毕竟这个场景是够用就行

中文官网:

https://www.bootcss.com/

Bootstrap3

Bootstrap 响应式UI框架

想要去快速开发页面,最好的解决办法是使用UI框架即提供了一套UI设计好的样式且带有很多功能的各种插件。

自己装修 就是使用媒体查询media 即原生响应式。

请装修公司 Bootstrap框架

使用

生产环境:指上线的项目,上线项目为了提高网站访问速度,尽量使用压缩文件。

源码:当时去封装框架的时候使用的底层代码,可以帮助开发者更好的理解,一般本地开发下载该源码

Sass:针对于Sass 项目

创建HTML骨架结构(一般在编辑器里创建html模板)

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <!-- 要求当前网页使用IE浏览器最高版本的内核来渲染,版本不同兼容性不同 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口的设置:视口的宽度和设备的宽度一致,默认的缩放比例和PC端一致,用户不能自行缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签必须放在最前面,任何其他内容都必须跟随其后! -->
    <title>Bootstrap模板</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
    <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 以下是条件注释,会自己判断 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script src="js/jquery-1.11.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.js"></script>
  </body>
</html>

Hbulider 创建html模板

1 新建html文件,选择自定义模板

2 跳转到编辑器设置模板的位置

3 在该html 文件夹里新建一个html文件,命名为bootstrap.html,打开该文件把上述HTML骨架结构复制进去,注意css 文件和 js 文件的路径,保存。

4 验证模板是否创建好

回到HbuliderX编辑器,新建html文件,发现选择模板里多出刚刚创建的bootstrap模板,选择该模板即可。

布局容器

bootstrap 需要为页面内容和栅格系统包裹一个容器,它已经预先定义好了这个类,叫.container

container类

响应式布局的容器 固定宽度

大屏(>=1200px) 宽度定位1170px

中屏(>=992px) 宽度定位970px

小屏(>=768px) 宽度定位750px

超小屏(<768px) 宽度100%

container-fulid类

流式布局容器 百分百宽度

占据全部视口(viewport)的容器

适合单独做移动端开发

栅格系统

”grid systems “ 又叫 网格系统 ,意为将页面布局划分成等宽的列,通过列数的定义来模块化页面布局。

随着屏幕或视口尺寸的增加,系统自动分为最多12列

container 宽度是固定的,但是不同的屏幕下,container宽度不同,但我们仍然container等分成12等份

栅格参数:

栅格系统用法

(1) 行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)

(2) 通过“行(row)”在水平方向创建一组“列(column)”,且内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素

(3) 列是通过指定1到12的值来表示其跨越的范围,即列数之和不能超过总份数12份。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。

(4) 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列,如果一“行(row)”中包含了的“列(column)”小于等于 12,则依次从左向右排列。

(5) 可同时指定多个设备的类名,如:class=”col-lg-2 col-md-6”

(6) 移动设备优先,xs 默认 占12份,没有指定设备类前缀,继承方式为 xs>sm>md>lg

响应式工具类

针对不同屏幕尺寸隐藏或显示页面内容

visible-* : 只对* 可见

hidden-* : 只对* 隐藏

显示系列

visible-xs/sm/md/lg

隐藏系列

hidden-xs/sm/md/lg

指定元素类型系列

visible-xs/sm/md/lg-block/inline/inline-block

bootstrap4

特点:

新增网格层适配了移动端;

全面引入ES6新特性(重写所有JavaScript插件);

css文件减少了至少40%;

所有文档都用Markdown编辑器重写;

Bootstrap4 放弃了对 IE8 以及 iOS 6 的支持,现在仅仅支持 IE9 以上 以及 iOS 7 以上版本的浏览器。如果对于其中需要用到以前的浏览器,那么请使用 Bootstrap3。

bootstrap5

Bootstrap 5(当前的主要版本,于 2021 年 5 月发布)带来了大量的变化和改进,包括添加新组件、新类、旧组件的新样式、更新的浏览器支持、删除一些旧组件,以及更多。

变化的内容

jQuery不再是一个依赖项

浏览器支持更改

在 v4 之前,Bootstrap 曾经支持 Internet Explorer (IE) 10 和 11。从 Bootstrap 5 开始,对 IE 的支持已完全取消。因此,如果您的网站需要支持 IE,则在迁移到 v5 时可能应该小心。

浏览器支持的其他变化包括:

Firefox和Chrome现在从60版开始支持

Safari和iOS支持现在从版本12开始

Android浏览器和WebView支持现在从版本6开始

数据属性的更改

组件的数据属性现在以 data-bs 开头,以方便命名Bootstrap属性

Bootstrap 5 为库带来了一些新组件

(1)Accordion 手风琴

(2)Offcanvas 重叠侧边栏

(3)Floating Label 浮动标签

目录
相关文章
|
4天前
|
移动开发 前端开发 JavaScript
前端高效开发JavaScript库!
前端高效开发JavaScript库!
|
6天前
|
设计模式 开发框架 数据库
Python Web开发主要常用的框架
【5月更文挑战第12天】Python Web开发框架包括Django、Flask、Tornado和Pyramid。Django适用于复杂应用,提供ORM、模板引擎等全套功能;Flask轻量级,易于扩展,适合小型至中型项目;Tornado擅长处理高并发,支持异步和WebSockets;Pyramid灵活强大,可适配多种数据库和模板引擎,适用于各种规模项目。选择框架需依据项目需求和技术栈。
123 2
|
3天前
|
缓存 监控 安全
Django框架在大型Web应用中的架构设计与实战
【5月更文挑战第18天】Django框架在构建大型Web应用中扮演重要角色,采用分层架构(数据、业务逻辑、表示层)和多应用组织模式,结合缓存策略(如Memcached、Redis)提升性能。通过异步处理、分布式部署提高响应速度和扩展性。关注数据分区、安全设计及监控日志,确保系统高效、稳定。Django为复杂业务提供坚实基础,助力打造卓越Web系统。
19 7
|
3天前
|
开发框架 中间件 数据库
Django 框架入门全攻略:轻松构建 Web 应用
【5月更文挑战第18天】本文是 Django 入门教程,介绍了如何使用 Django 构建 Web 应用。内容包括安装、项目与应用创建、模型定义、数据库迁移、视图编写、路由配置、模板系统、表单处理和中间件的使用。通过实例展示了 Django 基本流程,帮助初学者快速上手。Django 提供高效工具,便于开发者聚焦业务逻辑,轻松构建功能丰富的 Web 应用。
21 5
|
3天前
|
存储 缓存 API
Flask 框架在大型 Web 应用中的使用与挑战
【5月更文挑战第18天】Flask框架适用于快速开发轻量级Web应用,但用于大型应用时需应对性能、代码管理和团队协作的挑战。通过集成扩展处理复杂需求,使用蓝图组织代码,以及引入缓存优化性能,结合明确的代码规范和开发流程,可有效应对挑战,构建高效稳定的应用。
19 5
|
3天前
|
数据库连接 Python
Flask 框架入门与实践:构建你的第一个 Web 应用
【5月更文挑战第18天】本文介绍了使用 Flask 框架构建第一个 Web 应用的步骤。首先通过 `pip install Flask` 安装框架,然后编写基本的 Python 代码创建应用,包括定义路由和响应。示例展示如何显示 &quot;Hello, World!&quot;,并扩展到显示用户信息的功能。利用模板(如 `index.html`)可使页面更丰富。随着学习深入,可以利用 Flask 的更多特性,如表单处理和数据库连接,来构建更复杂的 Web 应用。本文旨在激发读者对 Flask 和 Web 开发的兴趣,鼓励不断探索和实践。
18 7
|
4天前
|
设计模式 存储 前端开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
|
6天前
|
JavaScript 前端开发 数据可视化
Svelte Web 框架介绍
Svelte Web 框架介绍
8 0
|
6天前
|
Web App开发 前端开发 JavaScript
什么是 Web 应用开发领域的 Frontend Fragmentation(前端碎片化)现象
什么是 Web 应用开发领域的 Frontend Fragmentation(前端碎片化)现象
10 0
|
6天前
|
前端开发 Java Spring
Java Web ——MVC基础框架讲解及代码演示(下)
Java Web ——MVC基础框架讲解及代码演示
13 1