Java学习（Bootstrap框架（栅格系统，全局CSS样式，组件，插件），XML（约束，解析））

最新推荐文章于 2022-09-11 20:37:29 发布

XXX-17

最新推荐文章于 2022-09-11 20:37:29 发布

阅读量256

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/XXX_17/article/details/123382211

版权

本文介绍了前端开发框架Bootstrap的快速入门，包括响应式布局、栅格系统、全局CSS样式和JS插件的使用。同时，讲解了XML的基本概念、语法、约束以及解析方式，如DOM和SAX解析器。

摘要由CSDN通过智能技术生成

2022/3/9

一、Bootstrap(Bootstrap中文文档中可查看）
1.概念：一个前端开发的框架
1）框架：半成品软件，开发人员可以在框架基础上，再进行开发，简化编码
2）好处：
1.定义了很多css样式和ks插件，我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
2.响应式布局：同一套页面可以兼容不同分辨率的设备。
2.快速入门
1）下载Bootstrap
2）在项目中将这三个文件夹复制
3）创建html页面，引入必要的资源

响应式布局：
1.同一套页面可以兼容不同分辨率的设备。
2.实现：依赖栅格系统：将一行平均分成12个各自，可以指定元素占几个格子
3.步骤：
1）定义容器，相当于之前的table
容器分类：
1.1 container：两边留白
1.2 container-fluid：每一种设备都是100%宽度
2）定义行：相当于之前的tr 样式：row
3）定义元素。指定该元素在不同的设备上，所占的格子数目。
样式：col-设备代号-格子数目
设备代号：
1.1 xs：超小屏幕手机（<768px）：col-xs-12
1.2 sm：小屏幕平板（>=768px）
1.3 md：中等屏幕桌面显示器（>=992px）
1.4 lg：大屏幕大桌面显示器（>=1200px）

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script src="js/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script src="js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
	<style>
	.inner{
		border:1px solid red;
	}
	</style>
  </head>
  <body>
    <!-- 定义容器 -->
	<div class="container-fluid">
		<!-- 定义行 -->
		<div class="row">
			<!-- 定义元素:在显示器一行12个格子，在pad上一行6个格子 -->
			<div class="col-lg-1 col-sm-2 inner">栅格</div>
			<div class="col-lg-1 col-sm-2 inner">栅格</div>
			<div class="col-lg-1 col-sm-2 inner">栅格</div>
			<div class="col-lg-1 col-sm-2 inner">栅格</div>
			<div class="col-lg-1 col-sm-2 inner">栅格</div>
			<div class="col-lg-1 col-sm-2 inner">栅格</div>
			<div class="col-lg-1 col-sm-2 inner">栅格</div>
			<div class="col-lg-1 col-sm-2 inner">栅格</div>
			<div class="col-lg-1 col-sm-2 inner">栅格</div>
			<div class="col-lg-1 col-sm-2 inner">栅格</div>
			<div class="col-lg-1 col-sm-2 inner">栅格</div>
			<div class="col-lg-1 col-sm-2 inner">栅格</div>
			<div class="col-lg-1 col-sm-2 inner">栅格</div>
			<div class="col-lg-1 col-sm-2 inner">栅格</div>
		</div