黑马笔记之Bootstrap和xml

最新推荐文章于 2022-03-20 18:48:40 发布

东北马里奥

最新推荐文章于 2022-03-20 18:48:40 发布

阅读量158

点赞数

分类专栏：前端文章标签： java 开发语言后端

本文链接：https://blog.csdn.net/qq_48247261/article/details/121425776

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Bootstrap

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

注意：
1. 一行中如果格子数目超过12，则超出部分自动换行。
2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。

<!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 HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
 <!-- 以上为固定写法 -->
    <style>
        .inner{
            border:1px solid red;
        }

    </style>
</head>
<body>
    <!--1.定义容器-->
    <div class="container">	1. container：两边留白；2. container-fluid：每一种设备都是100%宽度-->
        <!--2.定义行-->
        <div class="row">
            <!--3.定义元素
                在大显示器一行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-md-4 inner">栅格</div>
            <div class="col-md-4 inner">栅格</div>
            <div class="col-md-4 inner">栅格</div>
<!--栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。所谓向上兼容是指在小设备代号中设置的格子尺寸可以大的设备代号中保持住。-->
        </div>

    </div>

</body>
</html>

SS样式和JS插件

		  1. 全局CSS样式：
			* 按钮：class="btn btn-default"
			* 图片：
			*  class="img-responsive"：图片在任意尺寸都占100%
				  <img src="..." alt="..." class="img-rounded">：方形
				  <img src="..." alt="..." class="img-circle"> ： 圆形
		   		 <img src="..." alt="..." class="img-thumbnail"> ：相框
			* 表格
				* table
				* table-bordered
				* table-hover
			* 表单
				* 给表单项添加：class="form-control"

<!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 HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <style>

    </style>
</head>
<body>

<a class="btn btn-default" href="#" >Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default"  type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

<br>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>


<hr>

<img src="img/banner_1.jpg" class="img-responsive"/>
<img src="img/banner_1.jpg" class="img-responsive img-rounded" />
<img src="img/banner_1.jpg" class="img-responsive img-circle"/>
<img src="img/banner_1.jpg" class="img-responsive img-thumbnail"/>


</body>
</html>

<!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 HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <style>

    </style>
</head>
<body>

    <table class="table table-bordered table-hover">

        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>

        </tr>
        <tr>
            <td>001</td>
            <td>张三</td>
            <td>23</td>
        </tr>
        <tr>
            <td>002</td>
            <td>张三</td>
            <td>23</td>
        </tr>
        <tr>
            <td>003</td>
            <td>张三</td>
            <td>23</td>
        </tr>

    </table>

<hr><hr><hr>


    <form class="form-horizontal">
        <div class="form-group">
            <label for="exampleInputEmail1" class="col-sm-2 control-label">Email address</label>

           <div class="col-sm-10">
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
           </div>
        </div>
        <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> Remember me
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">Sign in</button>
            </div>
        </div>
    </form>
</body>
</html>

XML：

概念：Extensible Markup Language 可扩展标记语言

文档声明
1. 格式：<?xml 属性列表 ?>
2. 属性列表：
* version：版本号，必须的属性
* encoding：编码方式。告知解析引擎当前文档使用的字符集，默认值：ISO-8859-1
* standalone：是否独立
* 取值：
* yes：不依赖其他文件
* no：依赖其他文件
文本：
* CDATA区：在该区域中的数据会被原样展示
* 格式： <![CDATA[ 数据 ]]>
约束：规定xml文档的书写规则
* 作为框架的使用者(程序员)：
1. 能够在xml中引入约束文档
2. 能够简单的读懂约束文档
分类：
1. DTD:一种简单的约束技术
2. Schema:一种复杂的约束技术

DTD：
* 引入dtd文档到xml文档中
* 内部dtd：将约束规则定义在xml文档中
* 外部dtd：将约束的规则定义在外部的dtd文件中

  	DTD引入方式
  	网络：<!DOCTYPE 根标签名 PUBLIC "dtd文件名字" "dtd文件的位置URL">
  	本地：<!DOCTYPE 根标签名 SYSTEM "dtd文件的位置">

Schema:
* 引入：
1.填写xml文档的根元素
2.引入xsi前缀. xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance”
3.引入xsd文件命名空间. xsi:schemaLocation=“http://www.itcast.cn/xml student.xsd”
4.为每一个xsd约束声明一个前缀,作为标识 xmlns=“http://www.itcast.cn/xml”

dtd引入

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE students SYSTEM "student.dtd">
 本地dtd约束引入
<!--dtd内容
<!DOCTYPE students [

		<!ELEMENT students (student+) >
		<!ELEMENT student (name,age,sex)>
		<!ELEMENT name (#PCDATA)>
		<!ELEMENT age (#PCDATA)>
		<!ELEMENT sex (#PCDATA)>
		<!ATTLIST student number ID #REQUIRED>


		]>-->
<students>
	
	<student number="s001">
		<name>zhangsan</name>
		<age>abc</age>
		<sex>hehe</sex>
	</student>

	<student number="s002">
		<name>lisi</name>
		<age>24</age>
		<sex>female</sex>
	</student>
	
</students>

xsd约束引入

xsd内容
<?xml version="1.0"?>
<xsd:schema xmlns="http://www.itcast.cn/xml"
        xmlns:xsd="http://www.w3.org/2001/XMLSchema"
        targetNamespace="http://www.itcast.cn/xml" elementFormDefault="qualified">
    <xsd:element name="students" type="studentsType"/>
    <xsd:complexType name="studentsType">
        <xsd:sequence>
            <xsd:element name="student" type="studentType" minOccurs="0" maxOccurs="unbounded"/>
        </xsd:sequence>
    </xsd:complexType>
    <xsd:complexType name="studentType">
        <xsd:sequence>
            <xsd:element name="name" type="xsd:string"/>
            <xsd:element name="age" type="ageType" />
            <xsd:element name="sex" type="sexType" />
        </xsd:sequence>
        <xsd:attribute name="number" type="numberType" use="required"/>
    </xsd:complexType>
    <xsd:simpleType name="sexType">
        <xsd:restriction base="xsd:string">
            <xsd:enumeration value="male"/>
            <xsd:enumeration value="female"/>
        </xsd:restriction>
    </xsd:simpleType>
    <xsd:simpleType name="ageType">
        <xsd:restriction base="xsd:integer">
            <xsd:minInclusive value="0"/>
            <xsd:maxInclusive value="256"/>
        </xsd:restriction>
    </xsd:simpleType>
    <xsd:simpleType name="numberType">
        <xsd:restriction base="xsd:string">
            <xsd:pattern value="heima_\d{4}"/>
        </xsd:restriction>
    </xsd:simpleType>
</xsd:schema>

xml内容
<?xml version="1.0" encoding="UTF-8" ?>
<!-- 
	1.填写xml文档的根元素
	2.引入xsi前缀.  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	3.引入xsd文件命名空间.  xsi:schemaLocation="http://www.itcast.cn/xml  student.xsd"
	4.为每一个xsd约束声明一个前缀,作为标识  xmlns="http://www.itcast.cn/xml" 
	
	
 -->
<students   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
			xmlns="http://www.itcast.cn/xml"
			xsi:schemaLocation="http://www.itcast.cn/xml  student.xsd"
>
	<student number="heima_0001">
		<name>tom</name>
		<age>18</age>
		<sex>male</sex>
	</student>

</students>

Jsoup

		* 代码：
			 //2.1获取student.xml的path
	        String path = JsoupDemo1.class.getClassLoader().getResource("student.xml").getPath();
	        //2.2解析xml文档，加载文档进内存，获取dom树--->Document
	        Document document = Jsoup.parse(new File(path), "utf-8");
	        //3.获取元素对象 Element
	        Elements elements = document.getElementsByTag("name");
	
	        System.out.println(elements.size());
	        //3.1获取第一个name的Element对象
	        Element element = elements.get(0);
	        //3.2获取数据
	        String name = element.text();
	        System.out.println(name);

package cn.itcast.xml.jsoup;


import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

import java.io.File;
import java.io.IOException;

/**
 * Jsoup快速入门
 */
public class JsoupDemo1 {
    public static void main(String[] args) throws IOException {
        //2.获取Document对象，根据xml文档获取
        //2.1获取student.xml的path
        String path = JsoupDemo1.class.getClassLoader().getResource("student.xml").getPath();
        //2.2解析xml文档，加载文档进内存，获取dom树--->Document
        Document document = Jsoup.parse(new File(path), "utf-8");
        //3.获取元素对象 Element
        Elements elements = document.getElementsByTag("name");

        System.out.println(elements.size());
        //3.1获取第一个name的Element对象
        Element element = elements.get(0);
        //3.2获取数据
        String name = element.text();
        System.out.println(name);
    }

}

东北马里奥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
黑马笔记之Bootstrap和xml

响应式布局* 同一套页面可以兼容不同分辨率的设备。* 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子* 步骤：1. 定义容器。相当于之前的table、* 容器分类：1. container：两边留白2. container-fluid：每一种设备都是100%宽度2. 定义行。相当于之前的tr 样式：row3. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目* 设备代号：1. xs：超小屏幕手机 (<768px)：
复制链接

扫一扫