Bootstrap的使用

news2024/9/23 21:29:28

目录

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.coloradmin.cn/o/1483763.html

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

相关文章

【MATLAB源码-第147期】基于matlab的QPSK调制解调在AWGN信道,瑞利信道,莱斯信道理论与实际误码率对比仿真。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 四相位移键控&#xff08;QPSK&#xff0c;Quadrature Phase Shift Keying&#xff09;是一种重要的数字调制技术&#xff0c;它通过改变信号的相位来传输数据。与其他调制技术相比&#xff0c;QPSK在相同的带宽条件下能够传…

某象滑块js逆向(主要是声明拿过我代码的进来)

声明: 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;不提供完整代码&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01;wx a15018…

MySQL中json类型的字段

有些很复杂的信息&#xff0c;我们一般会用扩展字段传一个json串&#xff0c;字段一般用text类型存在数据库。mysql5.7以后支持json类型的字段&#xff0c;还可以进行sql查询与修改json内的某个字段的能力。 1.json字段定义 ip_info json DEFAULT NULL COMMENT ip信息, 2.按…

python脚本实现全景站点矩阵转欧拉角

效果 脚本 import re import numpy as np import math import csv from settings import * # 以下是一个示例代码,可以输入3*3旋转矩阵,然后输出旋转角度:# ,输入3*3旋转矩阵# 计算x,y,z旋转角def rotation_matrix_to_euler_angles(R):

缓存相关问题:雪崩、穿透、预热、更新、降级的深度解析

✨✨祝屏幕前的小伙伴们每天都有好运相伴左右✨✨ &#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; 目录 引言 1. 缓存雪崩 1.1 问题描述 1.2 解决方案 1.2.1 加锁防止并发重建缓存 2. 缓存穿透 2.1 问题描述 2.2 解决方案 2.2.1 …

nginx介绍及编译安装

nginx介绍 是一个流行的开源的高性能的HTTP和反向代理服务器&#xff0c;也可以用作邮件代理服务器。它以其高性能、稳定性、丰富的功能集和低资源消耗而闻名 nginx特点 高性能&#xff1a; Nginx以其高效的事件驱动架构而闻名&#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; } 似乎效果不太好,会误报 …

【BUUCTF web】通关 2.0

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏 …

像用Excel一样用Python:pandasGUI

文章目录 启动数据导入绘图 启动 众所周知&#xff0c;pandas是Python中著名的数据挖掘模块&#xff0c;以处理表格数据著称&#xff0c;并且具备一定的可视化能力。而pandasGUI则为pandas打造了一个友好的交互窗口&#xff0c;有了这个&#xff0c;就可以像使用Excel一样使用…

关于网络安全从硬件防火墙防御到软件防御论述

服务器的硬防和软防是指对服务器进行保护和防御的两个层次。硬防主要是通过物理手段来保护服务器的安全&#xff0c;包括服务器的物理安全和硬件设备的安全。软防则是通过软件和配置来保护服务器的安全&#xff0c;包括操作系统的安全配置、网络安全配置、防火墙、入侵检测系统…

04-Linux实用操作

各种小技巧&#xff08;快捷键&#xff09; 强制停止 Ctrlc强制停止 Linux某些程序的运行&#xff0c;如果想要强制停止它&#xff0c;可以使用快捷键ctrlc 命令输入错误&#xff0c;也可以通过快捷键ctrlc&#xff0c;退出当前输入&#xff0c;重新输入 退出、登出 Ctrld退…

运用qsort函数进行快排并使用C语言模拟qsort

qsort 函数的使用 首先qsort函数是使用快速排序算法来进行排序的&#xff0c;下面我们打开官网来查看qsort是如何使用的。 这里有四个参数&#xff0c;首先base 是至待排序的数组的首元素的地址&#xff0c;num 是值这个数组的元素个数&#xff0c;size 是指每个元素的大小&am…

MySQL进阶之(三)InnoDB数据存储结构之数据页结构

三、InnoDB数据存储结构之数据页结构 3.1 数据库的存储结构3.1.1 MySQL 数据存储目录3.1.2 页的引入3.1.3 页的概述3.1.4 页的上层结构 3.2 数据页结构3.2.1 文件头和文件尾01、File Header&#xff08;文件头部&#xff09;02、File Trailer&#xff08;文件尾部&#xff09; …

麒麟银河操作系统V10部署ffmpeg(也能用于Linux系统)

麒麟银河操作系统V10部署ffmpeg(也能用于Linux系统) 部署ffmpeg用来处理视频的各种操作 想使用ffmpeg&#xff0c;要先安装nasm&#xff0c;yasm&#xff0c;x264之后&#xff0c;否则会报错 nkvers 查看麒麟操作系统版本 cat /proc/version #查看linux版本信息 uname -a …

C++:菱形继承问题

目录 1、什么是菱形继承 2、虚拟继承 3、一些常见问题 1. 什么是菱形继承&#xff1f;菱形继承的问题是什么&#xff1f; 2. 什么是菱形虚拟继承&#xff1f;如何解决数据冗余和二义性的 3. 继承和组合的区别&#xff1f;什么时候用继承&#xff1f;什么时候用组合&#…

模拟栈(数组实现)

题目描述&#xff1a; 代码模板&#xff1a; //push插入操作 void push(int x) {//让栈顶元素从0开始stk[ tt] x; }//pop弹出操作 void pop() {//直接把这个元素跳过&#xff08;相当于弹出&#xff09;tt--; }//empty判断是否为空操作 bool empty() {if(tt > 0) return …

程序员是如何看待“祖传代码”的?

目录 ​编辑 程序员是如何看待“祖传代码”的&#xff1f; 一、什么是“祖传代码”&#xff1f; 二、“祖传代码”的利弊 1. 可以节省开发成本 2. 可能引入安全隐患 3. 可能增加系统的维护难度 三、祖传代对程序员的影响 1. 丰富程序员的技能和知识 2. 提高程序员的创…

在两台CentOS 7服务器上部署MinIO集群---准确

环境说明&#xff1a; 2台Centos7服务器 IP地址分别为172.16.1.9和172.16.1.10 1. 创建minio用户和目录 在两台服务器上执行以下命令&#xff1a; sudo useradd -m -d /app/minio minio sudo mkdir -p /app/minioData sudo mkdir -p /app/minio/logs sudo chown -R mini…

范伟:你们怎么老提1,200呢,有什么典故啊?赵本山:没有啊!

范伟&#xff1a;你们怎么老提1,200呢,有什么典故啊?赵本山&#xff1a;没有啊&#xff01; --小品《面子》&#xff08;中3&#xff09;的台词 表演者&#xff1a;赵本山 高秀敏 范伟 &#xff08;接上&#xff09; 范伟&#xff1a;哎吃啊 赵&#xff1a;哎呀这电视看的挺…

什么是端点安全以及如何保护端点

什么是端点安全 端点是指可以接收信号的任何设备&#xff0c;是员工使用的一种计算设备&#xff0c;用于保存公司数据或可以访问 Internet。端点的几个示例包括&#xff1a;服务器、工作站&#xff08;台式机和笔记本电脑&#xff09;、移动设备、虚拟机、平板电脑、物联网、可…