Bootstrap的使用

目录

js的引入:

1.行内式

2.嵌入式

3.外链式

Bootstrap:的引入

注意事项:

条件注释语句:

栅格系统:

列嵌套:

列偏移:

列排序:

响应式工具:

Bootstrap的字体图标的使用:

Bootstrap的标题格式:


js的引入:

1.行内式

行内式是将JavaScript代码作为HTML标签的属性值使用。例如,在单击超链接“test”时,弹出一个警告框提示“Hello”,示例代码如下:

<a href="javascript:alert('Hello');">test</a>

需要说明的是,行内式只有在临时测试或者特殊情况下使用,一般情况下不推荐使用行内式,因为行内式有如下缺点。

(1)行内式可读性较差,尤其是在HTML文件中编写大量JavaScript代码时,不方便阅读。

(2)行内式在遇到多层引号嵌套的情况时,引号非常容易混淆,导致代码出错。

2.嵌入式

嵌入式(或称内嵌式)使用<scrip>标签包裹JavaScript代码,直接编写到HTML文件中,通常将其放到<head>标签<body>或标签中。<scrip>标签的type属性用于告知浏览器脚本类型,HTML.5中该属性的默认值为“text/javascript”,因此在使用HTML5时可以省略ype属性。嵌入式的示例代码如下:

<script>
    JavaScript代码
</script>

3.外链式

外链式(或称外部式)是将JavaScript 代码写在一个单独的文件中,一般使用“js”作为文件的扩展名,在HTML页面中使用<script>标签的src属性引人“js”文件。外链式适合javascript代码量较多的情况。在html页面中引入“js”文件,示例代码如下:

<script src="test.js"></script>

上述代码表示引入当前目录下的test.js文件。需要注意的是,外链式的标签内不可以编写JavaScript 代码。

为了帮助初学者更好地理解外链式,下面利用外链式实现浏览网页时在页面中自动弹出警告框。创建Example02.html文件,引入Example02.js文件,具体代码如例1-2所示。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script src="Example02.js"></script>
</body>
</html>

标签的src属性设置了要引入的文件为Example02.js。

Bootstrap:的引入

创建是为了区分,方便使用。

但需注意在这之后,需要引入bootsrap的格式文档(css)

导入之后:

bootsrap是通过使用类名,之后css来进行固定类型的变化的。所以只需要知道类对应的就可以随意使用。但也可以直接复制文档。

也可以修改bootsrap文档来实现自我需要的修改。

或者新加一个标签自己进行设置:但这种使用的条件有限。


注意事项:

需要注意的是Bootstrap的CSS样式已经定义了该容器的类名。

他是按照一类一类的有多种格式,也就是说container有类似的类名,不同的格式。

条件注释语句:

栅格系统:

注意·他是将内容盒子划分为几等份的

- 后面是需要写占多少份

如果有的盒子需要不同则后缀的数字之和要等于12

如果份数大于12 则会继续向下一行显示。


注意栅格系统在不同屏幕大小下是直接为我们提供了一份用不同类名下的不同效果,所以说,我们可以直接使用不同的类名份数即可。


列嵌套:

主要是用于下列间距的实现。原因:在使用框架给的标签时,是通过浮动使得小盒子在一行中进行显示的,所以为了避免不能一行显示,一般会嵌套小盒子分配份数实现间距。

由于盒子有边框,为了实现内容小盒子能够顶着左边显示。先放一个div row清除边框。


列偏移:

偏移后,会给右边的盒子增加了一个外边距。

当只有一个盒子时。会给左边加一个外边距

也可以实现盒子的居中:

如:

一共12份,之后按照剩余份数处理。


列排序:

push向右 pull向左


响应式工具:

Bootstrap的字体图标的使用:

只要使用在所需要的地方加一个所需图标的类名(手册中)即可

Bootstrap的标题格式:

在CSS的排版模块里

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

探讨苹果 Vision Pro 的 AI 数字人形象问题

Personas 的设计模糊性&#xff1a; 部分人认为这种模糊设计可能是出于安全考虑&#x1f6e1;️。安全角度&#xff1a;Personas 代表着你的 AI 数字形象&#xff0c;在创建时&#xff0c;它相当于你的 AVP&#xff08;生物识别扫描器的存在增加了冒充的难度&#xff09;。如果…

mysql服务治理

一、性能监控指标和解决方案 1.QPS 一台 MySQL 数据库&#xff0c;大致处理能力的极限是&#xff0c;每秒一万条左右的简单 SQL&#xff0c;这里的“简单 SQL”&#xff0c;指的是类似于主键查询这种不需要遍历很多条记录的 SQL。 根据服务器的配置高低&#xff0c;可能低端…

Java ZooKeeper-RocketMQ 面试题

Java ZooKeeper-RocketMQ 面试题 前言1、谈谈你对ZooKeeper的理解 &#xff1f;2、Zookeeper的工作原理&#xff08;Zab协议&#xff09;3、谈谈你对分布式锁的理解&#xff0c;以及分布式锁的实现&#xff1f;4、 zookeeper 是如何保证事务的顺序一致性的&#xff1f;5、 zook…

使用lnmp环境部署laravel框架需要注意的点

1&#xff0c;上传项目文件后&#xff0c;需要chmod -R 777 storage授予文件权限&#xff0c;不然会报错file_put_contents(/): failed to open stream: Permission denied。 如果后面还是报错没有权限的话&#xff0c;就执行ps -ef |grep php查询php运行用户。然后执行chown …

STM32-ADC一步到位学习手册

1.按部就班陈述概念 ADC 是 Analog-to-Digital Converter 的缩写&#xff0c;指的是模拟/数字转换器。它将连续变量的模拟信号转换为离散的数字信号。在 STM32 中&#xff0c;ADC 具有高达 12 位的转换精度&#xff0c;有多达 18 个测量通道&#xff0c;其中 16 个为外部通道&…

小朋友来自多少小区 - 华为OD统一考试(C卷)

OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 100分 题解&#xff1a; Java / Python / C 题目描述 幼儿园组织活动&#xff0c;老师布置了一个任务&#xff1a; 每个小朋友去了解与自己同一个小区的小朋友还有几个。 我们将这些数量汇总到数组 garden 中。 请…

gofly框架接口入参验证使用介绍

接口传入的参数做相关性质验证是开发中较为常用&#xff0c;gofly框架内置校验工具&#xff0c;提供开发效率&#xff0c;开发接口简单调用即可实现验证&#xff0c;下面介绍gofly框架数据验证设计思路及使用方法。 gofly框架提供了功能强大、使用便捷、灵活易扩展的数据/表单…

jupyter调用envs环境——jupyter内核配置虚拟环境

1.jupyter无法使用envs环境 pycharm的终端打开jupyter notebook&#xff1a; 在kernel下找不到上面的Pytorch_GPU环境&#xff1a; 2.解决方法 在对应的envs环境中安装ipykernel&#xff1a; 将该环境写入jupyter&#xff1a; python -m ipykernel install --user --name Py…

蓝桥杯前端Web赛道-自适应页面

蓝桥杯前端Web赛道-自适应页面 题目链接&#xff1a;1.自适应页面 - 蓝桥云课 (lanqiao.cn) 先看题目要求&#xff1a; 简单的来说就是需要完成上面规定的布局和要求当800px及以下的时候要显示移动端布局来完成下面gif的效果&#xff0c;那么我们先一步一步来 首先想到的就…

逻辑漏洞(pikachu)

#水平&#xff0c;垂直越权&#xff0c;未授权访问 通过个更换某个id之类的身份标识&#xff0c;从而使A账号获取&#xff08;修改、删除&#xff09;B账号数据 使用低权限身份的账号&#xff0c;发送高权限账号才能有的请求&#xff0c;获得其高权限操作 通过删除请求中的认…

SpringCloud微服务技术栈-什么是Docker?怎么安装Docker?

初识Docker以及常见技术及其概念概述 1、项目部署存在的问题 大型项目组件较多&#xff0c;运行环境也较为复杂&#xff0c;部署时会碰到一些问题: 依赖关系复杂&#xff0c;容易出现兼容性问题 开发、测试、生产环境有差异 Docker如何解决大型项目依赖关系复杂&#xff0…

面试高频率问答题目

索引&#xff1a; 主键索引&#xff1a;表的id &#xff08;唯一 且 不能为空&#xff09; 唯一索引&#xff1a;表User 假设有account 字段 &#xff0c;用户名不重复 &#xff08;唯一 可以为空&#xff09; 复合索引&#xff1a;where() 的条件 用户名&#xff0c;密码 …

判断点是否在多边形内

std::vector<cv::Point2d> vanCorner_;bool inArea(const Pose &pos) {cv::Point2d point cv::Point2d(pos.position.x(), pos.position.y());double distance cv::pointPolygonTest(vanCorner_, point, false);return distance > 0; } 似乎效果不太好,会误报 …

springboot236基于springboot在线课程管理系统的设计与实现

基于SpringBoot在线课程管理系统的设计与实现 摘要 本文首先介绍了在线课程管理系统的现状及开发背景&#xff0c;然后论述了系统的设计目标、系统需求、总体设计方案以及系统的详细设计和实现&#xff0c;最后对在线课程管理系统进行了系统检测并提出了还需要改进的问题。本系…

STM32 | 零基础 STM32 第一天

零基础 STM32 第一天 一、认知STM32 1、STM32概念 STM32:意法半导体基于ARM公司的Cortex-M内核开发的32位的高性能、低功耗单片机。 ST:意法半导体 M:基于ARM公司的Cortex-M内核的高性能、低功耗单片机 32&#xff1a;32位单片机 2、STM32开发的产品 STM32开发的产品&a…

李宏毅机器学习入门笔记——第八节

Auto-Encoder 输入图片经过两个网络后&#xff0c;计算他们两个越接近越好。 类似于Cycle GAN。 encoder将高纬度数据降维&#xff0c;作为低纬度向量 假如噪声进行训练&#xff0c;encoder将图片中的噪声去除。 其实BERT而言&#xff0c;就是以后个auto-encoder。 Feature d…

linux之进程理解(1)

目录 1. 冯诺依曼体系结构 2. 操作系统(OS) 2.1 概念 2.2 设计OS的目的 2.3 定位 2.4 理解管理 3. 系统调用和库函数概念 4. 补充 1. 冯诺依曼体系结构 我们常见的计算机&#xff0c;如笔记本。我们不常见的计算机&#xff0c;如服务器&#xff0c;大部分都遵守冯诺依曼体…

电子电气架构——AUTOSAR架构下EcuM唤醒源事件详解

电子电气架构——AUTOSAR架构下EcuM唤醒源事件详解 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 没有人关注你。也无需有人关注你。你必须承认自己的价值,你不能站在他人的角度来反对自己。人…

CDC作业历史记录无法删除问题

背景 数据库开启CDC功能后&#xff0c;每天会生成大量的历史记录&#xff0c;即使达到参数“每个作业的最大历史记录“的阈值后也不会被删除&#xff0c;导致其它作业的历史记录被删除&#xff0c;无法查看以前的执行情况&#xff0c;非常不方便。 现象 数据库开启CDC后会创建…

JavaScript入门学(Web APIs)

1.变量声明 2 DOM介绍 2.1 什么是DOM 2.2 DOM树 2.3 DOM对象&#xff08;重要&#xff09; 3.DOM&#xff08;文档对象模型&#xff09;-获取元素 3.1 获取匹配的第一个元素 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8&…