Bootstrap 前端 UI 框架

Bootstrap官网:Bootstrap中文网 铂特优选

Bootstrap 下载

点击进入中文文档

点击下载 

生产文件是开发响应式网页应用,源码是底层逻辑代码,因为是要制作响应式网页,所以下载开发文件

引入 css 文件, bootstrap.css 和 bootstrap.main.css ,前者跟平常书写 css 的样式一样,都是选择器然后样式属性,后者则是给浏览器看的,但是轻量,所以一半就是选择 后者。

要使用哪个就将哪个放到根目录文件夹中

Bootstrap 使用

  • 引入 Bootstrap CSS 文件
  • 调用类名 :container  响应式布局版心类型

Bootstrap - 删格系统 

在栅格系统中整个网页宽度平分12等份,一行排4个,每个是3份,类名中就加上这个份数

安装插件 IntelliSense for CSS class names in HTM,能提示栅格系统相应的类 

Bootstrap - 全局样式 - 按钮

Bootstrap - 全局样式 - 表格类:

table-success加给整个 table则整个表格颜色都是绿色,也可以加给一行,该行就是绿色

Bootstrap 组件 (Components) :

js文件不是必须的,如果网页有动态效果引入即可,没有就不用

直接官网复制粘贴 导航栏 HTML 代码,然后按需进行修改

例如改变背景色,右键检查 找出背景色所在选择器,将 样式写在 link 引入的 bootstrap.main.css之后,因为后边的会覆盖前边样式,并且注意 右键检查时有没有 !import 将 css 优先级提到最高

(导航栏 - j静态 - 不带 js)

轮播图 - 动态 - 带 js 

引入 js 文件

 

Bootstrap - 字体图标:

下载安装使用

 

 

使用字体图标时,先引入字体图标文件,在其字体图标调用时类名前加上 bi -

综合案例 - 首屏

  • 新建 less文件,将其导出到 css 文件夹中
  • 在 html 中 引入 bootstrap 框架样式,字体图标,js 文件,以及自己的 css 文件,还有字体图标

导航

 

设计稿中背景色是 透明的:右键查找背景色属性就行层叠修改

 固定定位

 

版心 :去掉 fluid

 

导航内容左右对齐:flex-grow : 0;

 

左边换图,右边换字 (多加了 3 个 a)

 

轮播图

  • 使用背景图更方便而不是 img,因为 img 需要写宽高,同样其父级盒子也要写宽高,所以直接在 div 盒子中写背景图更方便

  • 增加指示器个数与背景图个数一样

图片响应式效果:

因为之前导航栏没有轮播图,字又是白色,如果设置背景颜色为透明的话就看不见了,现在将背景颜色改为透明

开源项目:

  • 加 container 类版心居中
  • 栅格系统设置响应式布局,给四个盒子加上视口宽度宽度分别大于 992 和 768 时的盒子分布情况的类
  • container类是版心居中效果
  • row是 flex 布局效果

 

  • 不管视口如何变化,高度不变始终 200,所以设置 高度
  • 因为已经给了 一行排列的四个盒子宽度设置是 25%,所以如果要加上右外边距的话,铁定得换行。选中一行排列的四个盒子发现每个盒子设置了内边距,所以在盒子中加上一个 a ,给 a 设置宽度跟父级一样,设置背景色,内边距不会填充子级的背景色,所以视觉上就相当于两个盒子之间有了 margin
  • 所以栅格中盒子之间显示的边距不是 margin 而是 padding

 

接下来就是 javascript了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/65874.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

记一次sealos部署k8s集群之delete了第一台master如何恢复

记一次sealos部署k8s集群之delete了第一台master如何恢复 一、背景描述 使用sealos部署了一套K8S集群 master信息:172.27.100.1、172.27.100.2、172.27.100.3 node信息:172.27.100.4、172.27.100.5 sealos安装在172.27.100.1节点,根目录下/root/.sealos/文件还在! [root…

error: linker `link.exe` not found

开始学习rust,安装好rust的环境,开始从hello world开始,结果用在win10环境下,使用vs code或cmd窗口编译rust报错: PS E:\study_codes\rust-demo\chart01> rustc hello.rs error: linker link.exe not found| note:…

用 HTML5 Canvas 和 JavaScript 实现雪花飘落特效

这篇文章将带您深入解析使用 HTML5 Canvas 和 JavaScript 实现动态雪花特效的代码原理。 1,效果展示 该效果模拟了雪花从天而降的动态场景,具有以下特点: 雪花数量、大小、透明度和下落速度随机。雪花会在屏幕底部重置到顶部,形成循环效果。随窗口大小动态调整,始终覆盖…

django基于Python的校园个人闲置物品换购平台

Django 基于 Python 的校园个人闲置物品换购平台 一、平台概述 Django 基于 Python 的校园个人闲置物品换购平台是专为校园师生打造的一个便捷、环保且充满活力的线上交易场所。它借助 Django 这一强大的 Python Web 开发框架,整合了校园内丰富的闲置物品资源&…

【Vim Masterclass 笔记10】S06L23:Vim 核心操作训练之 —— 文本的搜索、查找与替换操作(第二部分)

文章目录 S06L23 Search, Find, and Replace - Part Two1 文本替换命令 :s/old/new/2 指定范围的文本替换3 特例:路径的替换4 文件行号的配置5 要点总结(1)搜索当前行(Same Line Searching)(2)跨…

【计算机网络】课程 实验五 静态路由配置

实验五 静态路由配置 一、实验目的 理解静态路由的工作原理,掌握如何配置静态路由。 二、实验分析与设计 【背景描述】 假设校园网分为 2 个区域,每个区域内使用 1 台路由器连接 2 个子网, 现要在路由器上 做适当配置,实现校…

Python 继承示例:有与无 `super().__init__()` 的区别

文章目录 Python 继承示例:有与无 super().__init__() 的区别父类(Parent)子类(Child)不调用 super().__init__()子类(Child)调用 super().__init__() Python 继承示例:有与无 super…

Linux下部署Redis(本地部署超详细)

非docker 1、下载Redis 历史版本: http://download.redis.io/releases 我的: http://download.redis.io/releases/redis-7.0.5.tar.gz 2.安装教程 1.Redis是基于c语言编写的需要安装依赖,需要安装gcc yum install gcc-c 2.查看gcc版…

Spring——几个常用注解

环境配置 1.在配置文件中导入约束(context — 共三个)并添加一项配置( context:annotation-config/) 才能支持注解的使用 context 约束: xmlns:context“http://www.springframework.org/schema/context” 2.xsi:schemaLocation下的:" http://ww…

Oopsie【hack the box】

Oopsie 解题流程 文件上传 首先开启机器后,我们先使用 nmap -sC -SV来扫描一下IP地址: -sC:使用 Nmap 的默认脚本扫描(通常是 NSE 脚本,Nmap Scripting Engine)。这个选项会自动执行一系列常见的脚本&am…

单片机-定时器中断

1、相关知识 振荡周期1/12us; //振荡周期又称 S周期或时钟周期(晶振周期或外加振荡周期)。 状态周期1/6us; 机器周期1us; 指令周期1~4us; ①51单片机有两组定时器/计数器,因为既可以定时,又可以计数,故称之为定时器…

【蓝牙】win11 笔记本电脑连接 hc-06

文章目录 前言步骤 前言 使用电脑通过蓝牙添加串口 步骤 设置 -> 蓝牙和其他设备 点击 显示更多设备 更多蓝牙设置 COM 端口 -> 添加 有可能出现卡顿,等待一会 传出 -> 浏览 点击添加 hc-06,如果没有则点击 再次搜索 确定 添加成…

Android切换语言不退出App

1.需求 实现用户选择语言(未点击下一步),更新当前界面UI,点击下一步后,更新App的语言,并进行保存。 实现目标: 1.设置App的语言,本地进行保存 2.updateResources更新本地语言配置…

一键获取Linux主机配置信息shell脚本,含网卡详情,网卡绑定等

cat > /tmp/get_os_info.sh <<"EOF"#!/bin/bashexport LANG=en_US.UTF-8# 如果 cat /proc/1/cgroup | grep docker | wc -l 大于0 或 systemd-detect-virt 返回 docker,则为 docker容器,# 如果 virt-what 返回 kvm或vmware或hyperv或xen、xen-hvm、lxc 或…

2 XDMA IP中断

三种中断 1. Legacy 定义&#xff1a;Legacy 中断是传统的中断处理方式&#xff0c;使用物理中断线&#xff08;例如 IRQ&#xff09;来传递中断信号。缺点&#xff1a; 中断线数量有限&#xff0c;通常为 16 条&#xff0c;限制了可连接设备的数量。中断处理可能会导致中断风…

【算法】时间复杂度以及O(N^2)的排序

目录 1.常数时间的操作 2.时间复杂度 2.1.以选择排序为例 2.2.O(n^2)从何而来 2.3.冒泡排序 2.3.1.抑或运算 2.4.插入排序 3.二分法 3.1.局部最小 4.递归 4.1.递归行为时间复杂度的估计 1.常数时间的操作 一个操作如果和样本的数据量无关&#xff0c;每次都是固定时…

2021 年 3 月青少年软编等考 C 语言五级真题解析

目录 T1. 红与黑思路分析T2. 密室逃脱思路分析T3. 求逆序对数思路分析T4. 最小新整数思路分析T1. 红与黑 有一间长方形的房子,地上铺了红色、黑色两种颜色的正方形瓷砖。你站在其中一块黑色的瓷砖上,只能向相邻的黑色瓷砖移动。请写一个程序,计算你总共能够到达多少块黑色的…

C# 或 .NetCore 如何使用 NPOI 导出图片到 Excel 文件

今天在本文中&#xff0c;我们将尝试使用NPOI库将图像插入到 Excel 文件的特定位置。请将以下逻辑添加到您的写作方法中&#xff0c;在 Excel 文件中添加图像&#xff08;JPEG、PNG&#xff09;,我已经有一个示例 jpeg 文件 - Read-write-excel-npoi.jpg &#xff0c;我们将尝试…

【学习笔记】理解深度学习的基础:机器学习

1. 机器学习基础 1.1 机器学习的定义与重要性 定义&#xff1a;深度学习是机器学习的一种特定形式。为了深入理解深度学习&#xff0c;必须牢固掌握机器学习的基本原理。机器学习算法是一种能够从数据中学习的算法&#xff0c;通过经验E在任务T上提高性能度量P&#xff08;Mi…

Observability:将 OpenTelemetry 添加到你的 Flask 应用程序

作者&#xff1a;来自 Elastic jessgarson 待办事项列表可以帮助管理与假期计划相关的所有购物和任务。使用 Flask&#xff0c;你可以轻松创建待办事项列表应用程序&#xff0c;并使用 Elastic 作为遥测后端&#xff0c;通过 OpenTelemetry 对其进行监控。 Flask 是一个轻量级…