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的排版模块里

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

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

相关文章

2024最新算法:河马优化算法(Hippopotamus optimization algorithm,HO)求解23个基准函数,提供MATLAB代码

一、河马优化算法 河马优化算法&#xff08;Hippopotamus optimization algorithm&#xff0c;HO&#xff09;由Amiri等人于2024年提出&#xff0c;该算法模拟了河马在河流或池塘中的位置更新、针对捕食者的防御策略以及规避方法。河马优化算法的灵感来自河马生活中观察到的三…

【测试工具】Fiddler

1.Fiddler简介 Fiddler是位于客户端和服务器端的HTTP代理&#xff0c;能够记录客户端和服务器之间的所有 HTTP请求&#xff0c;是web调试的利器。既然是代理&#xff0c;也就是说&#xff1a;客户端的所有请求都要先经过Fiddler&#xff0c;然后转发到相应的服务器&#xff0c…

day02-JavaScript-Vue

文章目录 1 JavaScript1.1 介绍 1.2 引入方式1.3 基础语法1.3.1 书写语法1.3.2 变量1.3.3 数据类型和运算符 1.4 函数1.4.1 第一种定义格式1.4.2 第二种定义格式 1.5 JavaScript对象1.5.1 基本对象1.5.1.1 Array对象语法格式特点属性和方法 1.5.1.2 String对象语法格式属性和方…

17.来自Sora的夺舍妄想——享元模式详解

OpenAI 的 Sora 模型面世之后&#xff0c;可以说人类抵御AI的最后阵地也沦陷了。 在此之前&#xff0c;人们面对AI交互式对话&#xff0c;AI制图&#xff0c;AI建模之类的奇迹时&#xff0c;还可以略微放肆的说&#xff1a;“的确很神奇&#xff0c;这毕竟还是比人类世界低了一…

2024年腾讯云部署幻兽帕鲁服务器,如何选择合适的服务器配置套餐畅玩游戏?

选择合适的服务器配置套餐以畅玩《幻兽帕鲁》游戏&#xff0c;首先需要考虑的是玩家数量和对服务器性能的需求。根据腾讯云提供的配置推荐&#xff0c;对于4到8人的玩家&#xff0c;推荐配置为4核16G12M&#xff1b;而10到20人的玩家则建议选择8核32G22M配置。这是因为《幻兽帕…

小程序页面指定区域局部滚动,做上拉和触底刷新

业务需求&#xff1a;在页面某个固定区域滑动 思路&#xff1a;滑动高度 页面高度 - 自定义导航高度&#xff08;不是自己自定义的导航可以省略&#xff09;- 按钮高度 - 单词数高度 实现 &#xff1a; 1.数据展示区内使用scroll-view&#xff0c;设置y轴滚动&#xff08;…

swoole

php是单线程。php是靠多进程来处理任务&#xff0c;任何后端语言都可以采用多进程处理方式。如我们常用的php-fpm进程管理器。线程与协程,大小的关系是进程>线程>协程,而我们所说的swoole让php实现了多线程,其实在这里来说,就是好比让php创建了多个进程,每个进程执行一条…

初阶数据结构:二叉树

目录 1. 树的相关概念1.1 简述&#xff1a;树1.2 树的概念补充 2. 二叉树2.1 二叉树的概念2.2 二叉树的性质2.3 二叉树的存储结构与堆2.3.1 存储结构2.3.2 堆的概念2.3.3 堆的实现2.3.3.1 堆的向上调整法2.3.3.2 堆的向下调整算法2.3.3.3 堆的实现 1. 树的相关概念 1.1 简述&a…

【C++ AVL树】

文章目录 AVL树AVL树的概念AVL树节点的定义AVL树的插入AVL树的旋转右单旋左单旋左右双旋右左双旋 代码实现 总结 AVL树 AVL树的概念 二叉搜索树在顺序有序或接近有序的情况下&#xff0c;而插入搜索树将退化为单叉树&#xff0c;此时查找的时间复杂度为O(n)&#xff0c;效率低…

鸿蒙Harmony应用开发—ArkTS声明式开发(通用属性:颜色渐变)

设置组件的颜色渐变效果。 说明&#xff1a; 从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 linearGradient linearGradient(value: { angle?: number | string; direction?: GradientDirection; colors: Array; repea…

mamba-ssm安装building wheel卡着不动后error...避坑解决方法

文章目录 方法1、下载whl文件到本地后pip install安装成功后验证&#xff1a; 方法2、拉取Docker镜像 对于项目中用到MambaIR的小伙伴&#xff0c;需要pip安装 causal_conv1d和 mamba-ssm两个包及其依赖&#xff1a; torch packing transformersMambaIR-Github主页&#xff0…

【C++】vector的使用及其模拟实现

这里写目录标题 一、vector的介绍及使用1. vector的介绍2. 构造函数3. 遍历方式4. 容量操作及空间增长问题5. 增删查改6. vector二维数组 二、vector的模拟实现1. 构造函数2. 迭代器和基本接口3. reserve和resize4. push_back和pop_back5. insert和erase5. 迭代器失效问题5. 浅…

【Java】基础算法练习题

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ 目录 基础算法练习题&#x1f680;1. 两数之和…

Django 管网项目 三

Django 官网文档 ​​Writing your first Django app, part 2 | Django documentation | Django 本文内容涉及创建视图 View&#xff0c;路由&#xff0c;和模版。并对内容进行渲染。 创建视图 在我们的投票应用中&#xff0c;我们需要下列几个视图&#xff1a; 问题索引页—…

ChatGPT支持下的PyTorch机器学习与深度学习技术应用

近年来&#xff0c;随着AlphaGo、无人驾驶汽车、医学影像智慧辅助诊疗、ImageNet竞赛等热点事件的发生&#xff0c;人工智能迎来了新一轮的发展浪潮。尤其是深度学习技术&#xff0c;在许多行业都取得了颠覆性的成果。另外&#xff0c;近年来&#xff0c;Pytorch深度学习框架受…

相关知识1111

一、 店铺编号和相关负责人 1、天猫兄弟、锦格 京东凡越 福林哥 如萍姐 2、京东锦格 天猫凡越 林森 雷佳华 3、天猫从简 京东从简 孔哥 4、抖音锦格 拼多多凡越 鸿哥 不知道哪个店铺编号&#xff1a;0 二、天猫京东聊天界面快捷搜索商品 1、 天猫只能根据标题搜索 2、京东是…

神经网络之万能定理python-pytorch实现,可以拟合任意曲线

神经网络之万能定理python-pytorch实现&#xff0c;可以拟合任意曲线 博主&#xff0c;这几天一直在做这个曲线拟合的实验&#xff0c;讲道理&#xff0c;网上可能也有很多这方面的资料&#xff0c;但是博主其实试了很多&#xff0c;效果只能对一般的曲线还行&#xff0c;稍微…

java之抽象类

什么是抽象类&#xff1f; 抽象就是不能具体化&#xff0c;不能实例化 作为父类&#xff0c;让子类去实现 abstract修饰类就是抽象类 abstract修饰方法就是抽象方法修饰符 abstract class 类名{修饰符 abstract 返回值类型 方法名(形参列表); }public abstract class A {//不…

CTFHUB--文件包含漏洞--RCE

文件包含漏洞 文件包含漏洞也是一种注入型漏洞&#xff0c;其本质就是输入一段用户能够控制的脚本或者代码&#xff0c;并让服务端执行。有时候由于网站功能需求&#xff0c;会让前端用户选择要包含的文件&#xff0c;而开发人员又没有对要包含的文件进行安全考虑&#xff0c;…

CSS【详解】居中对齐 (水平居中 vs 垂直居中)

水平居中 内部块级元素的宽度要小于容器(父元素) 方案一&#xff1a;文本居中对齐&#xff08;内联元素&#xff09; 限制条件&#xff1a;仅用于内联元素 display:inline 和 display: inline-block; 给容器添加样式 text-align:center<!DOCTYPE html> <html lang&q…