bootstrap 框架

news2024/11/28 16:29:12

文章目录

bootstrap

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

响应式所具有的特点
1、网页的宽度自动调整
2、尽量少用绝对宽度
3、字体要使用 rem、em 做为单位
4、布局要使用浮动、弹性布局

		@规则
			@chartset	定义编码
			@import		引入css文件（css模块化）
			@font-face	自定义字体
			@keyframes	animation里的关键帧
			@media		媒体查询


		媒体查询	根据一个或多个基于设备类型、具体特点和环境来应用样式
			1、媒体类型
			2、媒体特性
			3、逻辑运算符

必须使用 HTML5 文档类型

每个页面的开始部分

<!DOCTYPE html>
<html lang="en">
  ...
</html>

在这里插入图片描述

排版和链接

移除了body的 margin
设置了 body 的背景颜色 background-color: white;
使用 @baseFontFamily、@baseFontSize 和@baseLineHeight 属性作为我们排版的基础
通过 @linkColor 设置全局链接颜色，并且，当链接处于 :hover 状态时才会带有下划线

默认栅格系统

栅格系统为12列 ，形成一个940px宽的容器，默认没有启用 响应式布局特性 。如果加入响应式布局CSS文件，栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下，列将不再固定并且会在垂直方向堆叠。

带有基本栅格的 HTML 代码

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

<!-- 偏移列 -->

<div class="row">
  <div class="span4">...</div>
  <div class="span3 offset2">...</div>
</div>

<!-- 嵌套列 -->

<div class="row">
  <div class="span9">
    Level 1 column
    <div class="row">
      <div class="span6">Level 2</div>
      <div class="span3">Level 2</div>
    </div>
  </div>
</div>

<!-- 流式栅格 -->
<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

<!-- 流式栅格的偏移 -->
<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span4 offset2">...</div>
</div>

<!-- 流式嵌套布局 -->
<div class="row-fluid">
  <div class="span12">
    Fluid 12
    <div class="row-fluid">
      <div class="span6">
        Fluid 6
        <div class="row-fluid">
          <div class="span6">Fluid 6</div>
          <div class="span6">Fluid 6</div>
        </div>
      </div>
      <div class="span6">Fluid 6</div>
    </div>
  </div>
</div>

<!-- 流式布局 -->
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

媒体类型

			all				所有设备
			print			打印机设备
			screen			彩色的电脑屏幕
			speech			听觉设备（针对有视力障碍的人士，可以把页面的内容以语音的方式呈现的设备）
			注意：tty、tv、projection、handheld、braille、embossed、aural等几种类型在媒体查询4中已经废弃

媒体类型

width 宽度
min-width 最小宽度，宽度只能比这个大
max-width 最大的宽度，宽度只能比这个小
height 高度
min-width 最小高度，高度只能比这个大
max-width 最大的高度，高度只能比这个小
orientation 方向
landscape 横屏（宽度大于高度）
portrait 竖屏（高度大于宽度）
aspect-ratio 宽度比
-webkit-device-pixel-ratio 像素比（webkit 内核的私有属性）

逻辑运算符 用来做条件判断

    and		合并多个媒体查询（并且的意思）
    ,		匹配某个媒体查询（或者的意思）
    not		对媒体查询结果取反
    only	仅在媒体查询匹配成功后应用样式（防范老旧浏览器）

            /* 屏幕尺寸大于500的时候满足 */
			@media (min-width:500px){
				div{
					background: green;
				}
			}

			/* 屏幕尺寸小于400的时候满足 */
			@media (max-width:400px){
				div{
					background: blue;
				}
			}

			/* 横屏的时候满足 */
			@media (orientation:landscape){
				div{
					width: 400px;
					height: 100px;
				}
			}

			/* 竖屏的时候满足 */
			@media (orientation:portrait){
				div{
					width: 100px;
					height: 400px;
				}
			}

			/* 宽高比为4：3的时候满足，800*600的时候是4：3 */
			@media (aspect-ratio:4/3){
				div{
					border: 10px solid #000;
				}
			}

			/* 当像素比为2的时候，满足 */
			@media (-webkit-device-pixel-ratio:2){
				div:after{
					content: '陈学辉';
					font-size: 50px;
				}

                /* 屏幕的尺寸比700大的时候以及横屏的时候满足 */
			@media all and (min-width:700px) and (orientation: landscape){
				div{
					background: green;
				}
			}

			/* 屏幕尺寸比800小，或者屏幕为横屏的时候满足 */
			@media (max-width:800px),(orientation: landscape){
				div{
					background: pink;
				}
			}

			/* 屏幕的尺寸要大于800的时候，整个才满足 */
			@media not all and (max-width:800px){
				div{
					background: blue;
				}
			}

			@media only screen and (min-width:1000px){
				div{
					background: grey;
				}
			}

页面布局： 引入 css（bootstrap.min.css） + 类名

<div class="container">
  <div class="row">
    <div class="col-xl-3">
      xl为超大屏。屏幕宽度>=1200，容器的宽度固定为1140px，一行可以设置12个列。屏幕尺寸
      <1200的时候，一行只能设置1列
    </div>
    <div class="col-xl-3"></div>
    <div class="col-xl-3"></div>
    <div class="col-xl-3"></div>
  </div>
  <div class="row mt-5">
    <div class="col-lg-4">
      lg为大屏。屏幕宽度>=992px，容器的宽度固定为960px，一行可以设置12个列。屏幕尺寸<992的时候，一行只能设置1列
    </div>
    <div class="col-lg-4"></div>
    <div class="col-lg-4"></div>
  </div>
  <div class="row mt-5">
    <div class="col-md-6">
      md为中等屏。屏幕宽度>=768px，容器的宽度固定为720px，一行可以设置12个列。屏幕尺寸<768的时候，一行只能设置1列
    </div>
    <div class="col-md-6"></div>
  </div>
  <div class="row mt-5">
    <div class="col-sm-3">
      sm为小屏。屏幕宽度>=576px，容器的宽度固定为540px，一行可以设置12个列。屏幕尺寸<576的时候，一行只能设置1列
    </div>
    <div class="col-sm-3"></div>
    <div class="col-sm-3"></div>
    <div class="col-sm-3"></div>
  </div>
  <div class="row mt-5">
    <div class="col-4">
      col为超小屏。屏幕宽度<576px，容器的宽度为auto，一行永远可以设置12列
    </div>
    <div class="col-4"></div>
    <div class="col-4"></div>
  </div>

  <!-- 设置等宽列，平分宽度，通过.col的class去设置 -->
  <div class="row mt-5">
    <div class="col">等宽列</div>
    <div class="col">等宽列</div>
    <div class="col">等宽列</div>
    <div class="col">等宽列</div>
    <div class="col">等宽列</div>
    <div class="col">等宽列</div>
    <div class="col">等宽列</div>
  </div>

  <!-- 设置多行等宽列，在希望断开的地方添加一个.w-100的class，能够让后面的列换行 -->
  <div class="row mt-5">
    <div class="col">等宽列1</div>
    <div class="col">等宽列2</div>
    <div class="w-100" style="height: auto;border: none;"></div>
    <div class="col">等宽列3</div>
    <div class="col">等宽列4</div>
  </div>
  <!-- 设置一个列宽，剩下的自动平分 -->
  <div class="row mt-5">
    <div class="col-sm-7">在小屏幕下占7列</div>
    <div class="col">自动平分剩余的宽度</div>
    <div class="col">自动平分剩余的宽度</div>
    <div class="col">自动平分剩余的宽度</div>
  </div>

  <!-- 设置根据内容调整列的宽度，使用.col-{breakpoint}-auto -->
  <div class="row mt-5">
    <div class="col-md-auto">在中等屏幕下由内容撑开宽度</div>
    <div class="col">自动平分剩余的宽度</div>
    <div class="col-lg-2">在大屏下占2列</div>
  </div>

  <!-- 设置所有尺寸下，都占同样的列数。使用.col-* -->
  <div class="row mt-5">
    <div class="col-8">所有尺寸下都占8列</div>
    <div class="col-4">所有尺寸下都占4列</div>
  </div>

  <!--
			混合排列或者组合模式
				1、超大屏幕下一行显示6个div,一个div应该占2列
				2、大屏幕下一行显示4个div,一个div应该占3列
				3、中等屏幕下一行显示3个div,一个div应该占4列
				4、小屏幕下一行显示2个div,一个div应该占6列
				5、超小屏幕下一行显示1个div,一个div应该占12列
		 -->
  <div class="row mt-5">
    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">
      超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个
    </div>
    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">
      超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个
    </div>
    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">
      超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个
    </div>
    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">
      超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个
    </div>
    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">
      超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个
    </div>
    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">
      超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个
    </div>
  </div>

  <!-- 对齐 -->
  <!--
			垂直对齐
				1、行的对齐方式
					align-items-start	顶对齐
					align-items-center	中间对齐
					align-items-end		底对齐
				2、列的单独对齐方式
					align-self-start	顶对齐
					align-self-center	中间对齐
					align-self-end		底对齐
		 -->
  <div class="row v-align align-items-start">
    <div class="col">垂直对齐-顶部对齐-行的对齐方式</div>
    <div class="col">垂直对齐-顶部对齐-行的对齐方式</div>
    <div class="col">垂直对齐-顶部对齐-行的对齐方式</div>
  </div>
  <div class="row v-align align-items-center">
    <div class="col">垂直对齐-中间对齐-行的对齐方式</div>
    <div class="col">垂直对齐-中间对齐-行的对齐方式</div>
    <div class="col">垂直对齐-中间对齐-行的对齐方式</div>
  </div>
  <div class="row v-align align-items-end">
    <div class="col">垂直对齐-底对齐-行的对齐方式</div>
    <div class="col">垂直对齐-底对齐-行的对齐方式</div>
    <div class="col">垂直对齐-底对齐-行的对齐方式</div>
  </div>
  <div class="row v-align">
    <div class="col align-self-start">垂直对齐-顶对齐-列的对齐方式</div>
    <div class="col align-self-center">垂直对齐-中间对齐-列的对齐方式</div>
    <div class="col align-self-end">垂直对齐-底对齐-列的对齐方式</div>
  </div>

  <!--
			水平对齐
				1、justify-content-start	左对齐
				2、justify-content-center	居中对齐
				3、justify-content-end		右对齐
				4、justify-content-around	分散居中对齐（每个元素两侧的间距是相等的）
				5、justify-content-between	左右两端对齐（元素之间的间距是自动平分的）
		 -->
  <div class="row v-align justify-content-start">
    <div class="col-4">水平对齐-左对齐</div>
    <div class="col-4">水平对齐-左对齐</div>
  </div>
  <div class="row v-align justify-content-center">
    <div class="col-4">水平对齐-居中对齐</div>
    <div class="col-4">水平对齐-居中对齐</div>
  </div>
  <div class="row v-align justify-content-end">
    <div class="col-4">水平对齐-右对齐</div>
    <div class="col-4">水平对齐-右对齐</div>
  </div>
  <div class="row v-align justify-content-around">
    <div class="col-4">水平对齐-分散居中对齐</div>
    <div class="col-4">水平对齐-分散居中对齐</div>
  </div>
  <div class="row v-align justify-content-between">
    <div class="col-4">水平对齐-左右两端对齐</div>
    <div class="col-4">水平对齐-左右两端对齐</div>
  </div>

  <!--
			列排序，使用.order-{breakpoint}-*
			3.x的版本使用的是.col-{breakpoint}-push-* .col-{breakpoint}-pull-*来排序
		 -->
  <div class="row mt-5">
    <div class="col">第1列</div>
    <div class="col order-5">第2列</div>
    <div class="col order-6">第3列</div>
  </div>
  <div class="row mt-5">
    <div class="col">第1列</div>
    <div class="col order-xl-5">第2列</div>
    <!-- 只有当屏幕尺寸>=1200的时候，才会进行排序 -->
    <div class="col order-xl-2">第3列</div>
  </div>
  <div class="row mt-5">
    <div class="col">第1列</div>
    <div class="col order-first">第2列</div>
    <!-- order-first代表排在第1位，order-last代表排在最后一位 -->
    <div class="col order-last">第3列</div>
    <div class="col">第4列</div>
  </div>

  <!-- 列偏移，使用offset-{breakpoint}-* -->
  <div class="row mt-5">
    <div class="col-md-4">第1列</div>
    <div class="col-md-4 offset-md-4">往右偏移4列</div>
  </div>
  <div class="row mt-5">
    <div class="col-3 offset-md-3">第1列</div>
    <div class="col-3 offset-md-3">第2列</div>
  </div>
  <div class="row mt-5">
    <div class="col-sm-5 col-md-6">小屏占5列，中屏占6列</div>
    <div class="col-sm-5 offset-sm-3 col-md-6 offset-md-5">
      小屏偏移3列，中屏偏移5列
    </div>
  </div>

  <!--
			间距	使用margin工具可以让列之间产生间距
				mr-{breakpoint}-auto	使右侧的列远离到最右边
				ml-{breakpoint}-auto	使左侧的列远离到最左边
		 -->
  <div class="row mt-5">
    <div class="col-md-4">第1列</div>
    <div class="col-md-4 ml-auto">第2列，跑到最右边</div>
  </div>
  <div class="row mt-5">
    <div class="col-md-3 ml-md-auto">在中屏下，离左边距离自动计算</div>
    <div class="col-md-3 ml-md-auto">在中屏下，离左边距离自动计算</div>
  </div>
  <div class="row mt-5">
    <div class="col-auto mr-auto">宽度由内容撑开</div>
    <div class="col-auto">宽度由内容撑开</div>
  </div>

  <!--
			嵌套	每一个列里面可以再继续放行，那嵌套里面的元素就会以父级的宽度为基准，再分12个列
		 -->
  <div class="row mt-5">
    <div class="col-sm-9" style="height: 150px;background: grey;">
      父级的第1列
      <div class="row">
        <div class="col-sm-8 col-6">
          子级的第1列，小屏下占8列，超小屏下占6列
        </div>
        <div class="col-sm-4 col-6">
          子级的第2列，小屏下占4列，超小屏下占6列
        </div>
      </div>
    </div>
    <div class="col-sm-3" style="height: 150px;background: pink;">
      父级的第2列
    </div>
  </div>
</div>


<!-- 在警告框里添加额外的内容 -->
		<div class="alert alert-success">
			<h4 class="alert-heading">这是一个标题</h4>
			<p>这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容</p>
			<hr>
			<p>下面还可以添加一个说明</p>
		</div>

		<!-- 可以关闭的警告框  -->
		<div class="alert alert-warning alert-dismissible fade show">
			这是一个可以关闭的警告框，但是需要想入jquery与bottstar.js
			<button class="close" data-dismiss='alert'>&times;</button>
		</div>

		<div class="alert alert-danger fade show myAlert">
			通过按钮关闭警告框
		</div>
		<button class="closeBtn">关闭警告框</button>
	</div>

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

	<script>
		//方法
		$('.closeBtn').click(function(){
			$('.myAlert').alert('close');
		});

		//事件
		$('.myAlert').on('close.bs.alert',function(){
			alert('close方法被调用了');
		});
		$('.myAlert').on('closed.bs.alert',function(){
			alert('警告框关闭了');
		});
	</script>

03-面包屑导航

<div class="row d-block">
  <nav>
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">首页</a></li>
      <li class="breadcrumb-item"><a href="#">关于我们</a></li>
      <li class="breadcrumb-item active">联系我们</li>
    </ol>
  </nav>
</div>

警告框、徽章、面包屑导航、按钮、按钮组

卡片

轮播图

折叠面板

折叠面板

···

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

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

相关文章

css行内块元素垂直居中

css行内块元素垂直居中

css行内块元素垂直居中 div里边有个img标签&#xff0c;要想让img垂直居中&#xff0c;需要 给父盒子设置line-heightheightimg设置vertical-align:middle <div style"background-color: red; height: 150px;line-height: 150px;"><img src"images/…
阅读更多...
Unity开发环境配置

Unity开发环境配置

Unity本体安装 1.首先下载安装unityhub,中文管网https://unity.cn/ 2.登录unityhub&#xff0c;选择你想要的版本安装 选择后按照提示选择个人免费试用的license,然后等待unity本体下载安装即可。 VSCode安装和配置 1.去官网https://code.visualstudio.com/下载vscode 2.u…
阅读更多...
微信小程序 Springboot ssm房屋租赁系统uniapp设计与实现

微信小程序 Springboot ssm房屋租赁系统uniapp设计与实现

房屋租赁系统用户和户主是基于微信端&#xff0c;管理员是基于网页端&#xff0c;系统采用java编程语言&#xff0c;mysql数据库&#xff0c; idea工具开发&#xff0c;本系统分为用户&#xff0c;户主&#xff0c;管理员三个角色&#xff0c;其中用户可以注册登陆小程序&#…
阅读更多...
C++11入门

C++11入门

目录 C11简介 统一的列表初始化 {}初始化 std::initializer_list 文档介绍 std::initializer_list的类型 使用场景 initializer_list接口函数模拟实现 auto与decltype nullptr 范围for STL的变化 新容器 新方法 新函数 C11简介 1.在2003年C标准委员会曾经提交了一…
阅读更多...
【浅学Redis】缓存 以及 缓存穿透、缓存击穿、缓存雪崩

【浅学Redis】缓存 以及 缓存穿透、缓存击穿、缓存雪崩

缓存 以及 缓存击穿、缓存穿透、缓存雪崩1. 缓存1.1 缓存的作用1.2 缓存的应用场景1.3 引入缓存后的执行流程1.4 缓存的优点2. 缓存穿透2.1 场景2.2 解决策略1. 参数校验2. 缓存空值3. 缓存击穿3.1 场景3.2 解决策略4. 缓存雪崩4.1 场景4.2 解决策略5. 上面三者的区别1. 缓存 …
阅读更多...
图像分割--入门了解

图像分割--入门了解

一. 三种分割 1. 语义分割&#xff08;semantic segmentation&#xff09; 语义分割&#xff1a;语义分割通过对图像中的每个像素进行密集的预测、推断标签来实现细粒度的推理&#xff0c;从而使每个像素都被标记为一个类别&#xff0c;但不区分属于相同类别的不同实例。 比…
阅读更多...
ChatGPT之父：世界正被他搅动

ChatGPT之父：世界正被他搅动

阿尔特曼&#xff08;左&#xff09;与马斯克Mac LC2电脑ChatGPT这款聊天应用程序最近太火了&#xff01; 美国北密歇根大学的一名学生用它生成了一篇哲学课小论文&#xff0c;“惊艳”了教授&#xff0c;还得到了全班最高分。美国一项调查显示&#xff0c;53%的学生用它写过论…
阅读更多...
Vue (2)

Vue (2)

文章目录1. 模板语法1.1 插值语法1.2 指令语法2. 数据绑定3. 穿插 el 和 data 的两种写法4. MVVM 模型1. 模板语法 root 容器中的代码称为 vue 模板 1.1 插值语法 1.2 指令语法 图一 &#xff1a; 简写 &#xff1a; v-bind: 是可以简写成 &#xff1a; 的 总结 &#xff1a; …
阅读更多...
Springboot + RabbitMq 消息队列

Springboot + RabbitMq 消息队列

前言 一、RabbitMq简介 1、RabbitMq场景应用&#xff0c;RabbitMq特点 场景应用 以订单系统为例&#xff0c;用户下单之后的业务逻辑可能包括&#xff1a;生成订单、扣减库存、使用优惠券、增加积分、通知商家用户下单、发短信通知等等。在业务发展初期这些逻辑可能放在一起…
阅读更多...
【23种设计模式】创建型模式详细介绍

【23种设计模式】创建型模式详细介绍

前言 本文为 【23种设计模式】创建型模式详细介绍 相关内容介绍&#xff0c;下边具体将对单例模式&#xff0c;工厂方法模式&#xff0c;抽象工厂模式&#xff0c;建造者模式&#xff0c;原型模式&#xff0c;具体包括它们的特点与实现等进行详尽介绍~ &#x1f4cc;博主主页&…
阅读更多...
计算机组成原理（一）

计算机组成原理（一）

1.了解计算机硬件的发展和软件的发展历程&#xff1b; 硬件&#xff1a;   电子管时代&#xff08;1946-1959&#xff09;&#xff1a;电子管、声汞延迟线、磁鼓   晶体管时代&#xff08;1959-1964&#xff09;&#xff1a;晶体管、磁芯   中、小规模集成电路时代&#…
阅读更多...
OpenStack云平台搭建(1) | 基础环境准备

OpenStack云平台搭建(1) | 基础环境准备

目录 一、环境准备 1.1、关闭selinxu 1.2、关闭防火墙 1.3、修改主机名 1.4、配置时间同步服务器 1.5、配置域名 二、安装OpenStack库 2.1、启用OpenStack仓库的包 2.2、安装python-openstackclient 2.3、controller安装数据库 2.4、安装消息队列 2.5、配置缓存 2.…
阅读更多...
Linux驱动开发基础__中断的线程化处理

Linux驱动开发基础__中断的线程化处理

目录 1 引入 2 内核机制 2.1 调用 request_threaded_irq 后内核的数据结构 2.2 request_threaded_irq 2.3 中断的执行过程 1 引入 复杂、耗时的事情&#xff0c;尽量使用内核线程来处理。工作队列用起来挺简单&#xff0c;但是它有一个缺点&#xff1a;工作队列中有多个 …
阅读更多...
【Java 面试合集】HashMap中为什么要使用红黑树

【Java 面试合集】HashMap中为什么要使用红黑树

HashMap中为什么要使用红黑树1. 概述 从源码的结构方面讲述下为什么HashMap要使用红黑树。那没有红黑树的时候&#xff0c;底层是基于什么逻辑进行存储的。 2. 底层结构 如果忽略红黑树的话&#xff0c;HashMap底层的数据存储结构如下&#xff1a; 总体而言就是数组 链表的形…
阅读更多...
Vscode使用

Vscode使用

我是四五年的webstorm忠粉&#xff0c;一直觉得它是世界上最好用、强大、方便的编辑器。 为了它深谙各种破解方法&#xff0c;突然有一天我知道的几种方法都不奏效了。破解的实在太累了&#xff0c;算了&#xff0c;尝试尝试不同的工具吧。 含泪挥别webstrom&#xff0c;捏着…
阅读更多...
JDBC编程复习

JDBC编程复习

文章目录JDBC1.概念2.原理3. 如何使用JDBC编程1. 下载mysql的jdbc驱动2. 项目中引入驱动4. JDBC使用1. 和数据库建立连接2.获取连接3. Statement对象4. 释放资源JDBC 1.概念 JDBC,即Java Database Connectivity&#xff0c;java数据库连接。是Java提供的API用来执行SQL语句&a…
阅读更多...
SWPU新生赛WriteUp

SWPU新生赛WriteUp

一个线上赛&#xff0c;这个NSSCTF最爽的就是没有靶机操作的一分钟冷却&#xff0c;10.11比赛结束&#xff0c;但是我还要看看工控&#xff0c;所以不打这个比赛了&#xff0c;先把wp写了&#xff0c;pwn入门真TM艰难 WEB 前面送分题&#xff0c;中间的也是基础题&#xff0c;…
阅读更多...
SQL概述及数据定义

SQL概述及数据定义

文章目录一、SQL概述1.简介2.特点3.组成4.SQL分类5.书写规范二、数据定义1.模式的定义与删除①定义模式②删除模式2.基本表的定义、删除与修改①定义基本表②数据类型③模式与表④修改基本表⑤删除基本表3.索引的建立与删除①建立索引②删除索引一、SQL概述 1.简介 SQL (Stru…
阅读更多...
使用IDA查看汇编代码上下文去辅助排查C++软件异常问题

使用IDA查看汇编代码上下文去辅助排查C++软件异常问题

目录 1、概述 2、汇编指令能最直接反映异常崩溃的原因 2.1、查看异常Code码及对应的异常类型 2.2、查看发生崩溃的那条汇编指令 3、阅读汇编代码上下文需要掌握一定的基础汇编知识 4、Windbg中显示的函数调用堆栈中的C代码行号&#xff0c;和最新的代码对不上了 5、Wind…
阅读更多...
openGL学习之GLFW和GLAD的下载和编译

openGL学习之GLFW和GLAD的下载和编译

背景:为什么使用GLFW和GLADOPenGL环境 目前主流的桌面平台是GLFW和GLAD之前使用的GLUT和Free GLUT已经基本淘汰了&#xff0c;所以记录一下如何下载GLFW和GLAD并且编译.GLFW下载:An OpenGL library | GLFW复制到你想存放的位置,我这里就存放到C盘Libaray文件夹下了,这里是我存放…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023