Python百日进阶-WEB开发】Day156 - 前端基础之 BootStrap(一)

最新推荐文章于 2024-07-16 09:39:03 发布

岳涛@心馨电脑

最新推荐文章于 2024-07-16 09:39:03 发布

阅读量791

点赞数

分类专栏：前端文章标签： bootstrap 前端 css

本文链接：https://blog.csdn.net/yuetaope/article/details/122995732

版权

前端专栏收录该内容

76 篇文章 45 订阅

订阅专栏

文章目录

一、BootStrap的安装和使用

一、BootStrap的安装和使用

1.1 BootStrap介绍

英文官网：https://getbootstrap.com/
在这里插入图片描述
中文官网：https://www.bootcss.com/

Bootstrap是一套现成的CSS样式集合(做得还是很友好的)。是两个推特的员工千出来的。
Bootstrap是最受欢迎的HTML、CSS和JS框架,用于开发响应式布局、移动设备优先的WEB项目。
2011年, twitter的一小撮工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集- BootStrap. Bootstrap由 MARK OTTO和 Jacob Thornton所设计和建立,在 github上开源之后,迅速成为该站上最多人 watch&fork的项目。大量工程师踊跃为该项目贡献代码,社区惊人地活跃,代码版本进化非常快速,官方文档质量极其高(可以说是优雅)同时涌现了许多基于 Bootstrap建设的网站:界面清新、简洁,要素排版利落大方。
Bootstrap特别适合那种没有设计师的团队(甚至说没有前端的团队),可以快速的出一个网页。

1.2 BootStrap特点

简洁、直观、强悍的前端开发框架, html、css、 javascript工具集,让web开发更速、简单。
基于html5、css3的 bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档。
自定义 JQuery插件,完整的类库, bootstrap3基于Less, bootstrap4基于sass的css预处理技术。
Bootstrap响应式布局设计让一个网站可以兼容不同分辨率的设备。 Bootstrap响应式布局设计,给用户提供更好的视觉使用体验。
丰富的组件。

1.3 下载使用

1.3.1 下载BootStrap:

http://v3.bootcss.com/getting-started/
在这里插入图片描述

下载完成后
拷贝 dist/css中的 bootstrap.min.css到项目css中
拷贝dist/js中的 bootstrap.min.js到项目的js中

1.3.2 下载 jquery.js

https://jquery.com/download/
在这里插入图片描述

4. 在html中模板为

<!doctype html>
<html lang="zh-CN">
  <head>
  <!-- 指定编码集 -->
    <meta charset="utf-8">
    <!-- 使用X-UA-Compatible来设置IE浏览器的兼容性，最新的渲染模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 
 		viewport：表示用户可以缩放页面；
 		width:指定可视区域的逻辑宽度；
 		initial-scale：用于设置web页面的初始缩放比例
 		initial-scale=1：将显示未经缩放的web文档
 	-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签**必须**放在最前面，任何其他内容都**必须**跟随其后！ -->
    <title>Bootstrap的HTML标准模板</title>

    <!-- 载入Bootstrap的CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 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>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

说明:

viewport标记用于指定用户是否可以缩放Web页面。
width和 height指令分别指定视区的逻辑宽度和高度。他们的值要么是以像素为单位的数字,要么是一个特殊的标记符号
width指令使用 device-width-标记可以指示视区宽度应为设备的屏幕宽度。
height指令使用 device-height标记指示视区高度为设备的屏幕高度。
initial-scale指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个Web页面,设为1.0则将显示未经缩放的Web文档。

1.4 创建项目

在这里插入图片描述

<!doctype html>
<html lang="zh-CN">
  <head>
  <!-- 指定编码集 -->
    <meta charset="utf-8">
    <!-- 使用X-UA-Compatible来设置IE浏览器的兼容性，最新的渲染模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 
 		viewport：表示用户可以缩放页面；
 		width:指定可视区域的逻辑宽度；
 		initial-scale：用于设置web页面的初始缩放比例
 		initial-scale=1：将显示未经缩放的web文档
 	-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签**必须**放在最前面，任何其他内容都**必须**跟随其后！ -->
    <title>Bootstrap的HTML标准模板</title>

    <!-- 载入Bootstrap的CSS -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" >
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.6.0.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

1.5 bootstrap和vue对比

1.5.1 Bootstrap和vue不是一个层级的东西，Vue是框架，bootstrap是基于jQuery的组建库。

Bootstrap是在jquery时代的UI组件库，而且Bootstrap大部分组件是依赖css的，依赖jQuery的组件主要是有交互的弹窗组件、下拉菜单等。
Bootstrap是基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架；
使用Bootstrap主要是感觉它的栅格系统和自适应布局做的很好，Bootstrap很适合做静态网站，比如公司官网。
Vue是轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快，VUE目前最流行的前端框架。
Vue是一套用于构建用户界面的渐进式框架，它和react，angular是一个系列的东西。Vue适合做单页应用，比如后台管理系统、手机端的具有复杂交互的H5系统。

1.5.2 Bootstrap特点

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap 是栅格系统, 使用简单, 上手容易. 专为响应式页面而生. 一套代码就可以自适应平板电脑和PC.

1.5.2.1 Bootstrap优点

提高开发效率
规范名称定义，便于维护
规范项目开发流程
css代码更清晰、简单。html代码更合理
bootstap最近发布了bootstrap4，拥有了box-flex布局等更新，紧跟最新的web技术的发展
比较成熟，在大量的项目中充分的使用和测试
拥有完善的文档，使用起来更方便
有大量的组件样式，接受定制
可以实现响应式布局，开发响应式布局网站很便捷
统一的编码风格
详细的说明文档，可快速开发
移动设备优先
性能成熟，在大量项目中使用测试过

1.5.2.1 Bootstrap缺点

缺少一套有力的成体系的组件(当时调查的时候还没有, 现在据说有了), 我在实际使用时, 发生了作用域冲突的问题, 如果没有整理好一整套组件, 开发很累。

有兼容性问题，ie6以下不支持
不支持sass
使用定制会产生大量冗余代码
点击导航页面直接切换相应位置时，效果像一个锚点，没有滚动动画

1.5.3 Vue特点

Vue 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。

1.5.3.1 Vue优点

把页面当组件加载，加载更快
共用API和资源，不再重复加载
数据的双向绑定. 数据改, 页面改. 页面改, 数据也改.
页面的呈现据说比React还快.
组件化(实际上React也有组件化). 这和BootStrap这种组件化的概念还有点不同, Vue的组件化, 已经把作用域冲突的问题给搞定了.另外, js测试也变得更专业化了(有点类似junit).
单html开发. 它的开发模式, 是一个html, 然后不停替换组件对应的js来切换显示效果. html中的共通js和css只需要download一次, 理论上比Iframe页面的呈现更快.
结合node.js提供的webpack等, 可以进行成体系的打包发布.

1.5.3.2 Vue缺点

上手难度比较高, 并且大规模开发的话, 需要有体系化开发的积累. Vue的组件化开发推荐使用Element。
页面是异步加载，不利于搜索引擎抓取
首次加载稍慢

岳涛@心馨电脑

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Python百日进阶-WEB开发】Day156 - 前端基础之 BootStrap(一)

文章目录一、BootStrap的安装和使用1.1 BootStrap介绍1.2 BootStrap特点1.3 下载使用1.3.1 下载BootStrap:1.3.2 下载 jquery.js1.4 创建项目1.5 bootstrap和vue对比1.5.1 Bootstrap和vue不是一个层级的东西，Vue是框架，bootstrap是基于jQuery的组建库。1.5.2 Bootstrap特点1.5.2.1 Bootstrap优点1.5.2.1 Bootstrap缺点1.5.3 Vue特点1.5.3.1 V
复制链接

扫一扫