JavaWeb—Bootstrap、XML

最新推荐文章于 2022-07-31 23:00:01 发布

Mt.getInstance()

最新推荐文章于 2022-07-31 23:00:01 发布

阅读量201

点赞数

文章标签： bootstrap xml html

本文链接：https://blog.csdn.net/weixin_47323733/article/details/124870326

版权

Bootstrap

概念∶一个前端开发的框架，Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap是基于 HTML.CsS、JavaScrip的，它简洁灵活，使得web开发更加快捷。
- 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。
- 好处:
  1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
  2. 响应式布局：同一套页面可以兼容不同分辨率的设备。
快速入门
1. 下载Bootstrap
2. 在项目中将这三个文件夹复制
3. 创建html页面，引入必要的资源文件

响应式布局

同一套页面可以兼容不同分辨率的设备。
实现:依赖于棚格系统:将一行平均分成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 :中等屏幕桌面显示器(2992px)
    4. lg:大屏幕大桌面显示器(120opx)
4. 注意︰
  1. 一行中如果格子数目超过12，则超出部分自动换行。
  2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
  3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。

CSS样式和JS插件

全局CSS样式

按钮
```
class="btn btn-default"
```

图片

class="img-responsive”:图片在任意尺寸都占10%
图片形状
<img src=".. ." alt="..." class="img-rounded"> :方形
<img src="..." alt="..." class="img-circle"> :圆形
<img src="..." alt-"..." class="img-thumbnail">∶相框

表格

class="table" 
查看文档其他例子进行自行学习
table
table-bordered
table-hover

表单

给表单项添加: class="form-control"

组件

导航条

//查看范例会用即可，这里用菜鸟教程的一个例子
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#example-navbar-collapse">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">菜鸟教程</a>
    </div>
    <div class="collapse navbar-collapse" id="example-navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

分页条

<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

插件

轮播图

<div id="myCarousel" class="carousel slide">
    <!-- 轮播（Carousel）指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>   
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
        </div>
        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
        </div>
        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="carousel-control left" href="#myCarousel" 
       data-slide="prev"> <span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>
    <a class="carousel-control right" href="#myCarousel" 
       data-slide="next">&rsaquo;</a>
</div>

XML:

概念∶Extensible Markup Language可扩展标记语言
- 可扩展:标签都是自定义的。
- 功能
  1. 存储数据
  2. 可以用于配置文件
  3. 可以在网络中传输
- xml与html的区别
  1. xml标签都是自定义的,html标签是预定义。
  2. xml的语法严格，html语法松散
  3. xml是存储数据的,html是展示数据
- w3c:万维网联盟

语法︰

基本语法:
1. xml文档的后缀名.xml
2. xml第一行必须定义为文档声明
3. xml文档中有且仅有一个根标签
4. 属性值必须使用引号(单双都可)引起来
5. 标签必须正确关闭
6. xml标签名称区分大小写

组成部分：

文档声明

格式:<?xml 属性列表 ?>
属性列表:
	version :版本号，必须的属性
	encoding:编码方式。告知解析引擎当前文档使用的字符集，默认值:ISO-8859-1
	standalone :是否独立,取值:
		yes :不依赖其他文件
		no:依赖其他文件

指合(了解)∶结合css的

 <?xml-stylesheet type="text/css" href="a.css"?>

标签∶标签名称自定义的

规则∶
名称可以包含字母、数字以及其他的字符
名称不能以数字或者标点符号开始
名称不能以字母xml(或者XML、 Xml等等)开始
名称不能包含空格

属性:
```
id属性值唯一
```

文本:

CDATA区:在该区域中的数据会被原样展示
格式:< ! [ CDATA[数据]]>

约束:规定xml文档的书写规则
- 作为框架的使用者(程序员):
  1. 能够在xml中引入约束文档
  2. 能够简单的读懂约束文档
- 分类:
  1. DTD:—种简单的约束技术
  2. Schema:—种复杂的约束技术
- DTD :
  - 引人dtd文档到xml文档中
    - 内部dtd :将约束规则定义在xml文档中
    - 外部dtd:将约束的规则定义在外部的dtd文件中
```
语法：
本地:<!DOCTYPE 根标签名 SYSTEN "dtd文件的位置">
网络:<!DOCTYPE 根标签名 PUBLIC "dtd文件名字（自己起的）" "dtd文件的位置URL">
```
- 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”
  - 例子
```
<students xm1ns :xsi="http: / / www. w3.org/2001/xALSchema-instance"
		xmlns="http : / / www.itcast.cn/xml"
		xsi :schemaLocation="http : / / www.itcast.cn/xml student.xsd">
```

解析：操作xml文档门将文档中的数据读取到内存中

操作xml文档
1. 解析(读取):将文档中的数据读取到内存中
2. 写入:将内存中的数据保存到xml文档中。持久化的存储
解析xml的方式:
1. DOM:将标记语言文档一次性加载进内存，在内存中形成一颗dom树
  - 优点:操作方便，可以对文档进行CRUD的所有操作
  - 缺点∶占内存
2. SAX:逐行读取，基于事件驱动的。
  - 优点:不占内存。
  - 缺点:只能读取，不能增删改
xml常见的解析器:
1. JAXP : sun公司提供的解析器，支持dom和sax两种思想（官方的，性能不是很好，了解一下即可）
2. DOM4:一款非常优秀的解析器
3. Jsoup : jsoup是一款Java的HTML解析器，可值接解析某个URL地址、HTNL文本内容。它提供了一套非常省力的API，可通过DOM,CSS以及类似于jQuery的操作方法来取出和操作数据。
4. PULL : Android操作系统内置的解析器，sax方式的。

Jsoup：

快速入门

步骤

1．导入jar包
2．获取Document对象
3．获取对应的标签Element对象
4. 获取数据

例子

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

对象的使用

Jsoup:工具类，可以解析html或xml文档，返回Document

*parse :解析html或xml文档，返回Document
parse(File in,string charsetName):解析xml或html文件的。
parse(string html):解析xml或html字符串
parse(URL url, int timeoutwillis):通过网络路径获取指定的html或xml的文档对象

Document :文档对象。代表内存中的dom树

*获取Element对象（任意的）
getElementById(string id):根据id属性值获取唯一的element对象
getElementsByTag(string tagwame):根据标签名称获取元素对象集合							     
getElementsByAttribute(string key):根据属性名称获取元素对象集合
getElementsByAttributevalue(String key，string value):根据对应的属性名和属性值获取元素对象集合

Elements :元素Element对象的集合。可以当做ArrayList来使用

Element :元素对象

*获取Element对象（子元素）
getElementById(string id):根据id属性值获取唯一的element对象
getElementsByTag(string tagwame):根据标签名称获取元素对象集合							     
getElementsByAttribute(string key):根据属性名称获取元素对象集合
getElementsByAttributevalue(String key，string value):根据对应的属性名和属性值获取元素对象集合
*获取属性值
String attr( String key):根据属性名称获取属性值
*获取文本内容
String text(）:获取所有字标签的纯文本内容
String html(）:获取标签体的所有内容(包括子标签的标签和文本内容)

Node :节点对象
```
是Document和Element的父类
```

快速查询方式
1. selector:选择器
  使用的方法:Elementsselect(string cssQuery)
  语法:参考selector类中定义的语法
2. XPath : XPath即为XML路释语言，它是一种用来确定XML（标准通用标记语言的子集）文档中某部分位置的语言
  使用soup的Xpath需要额外导入jar包。
  查询w3cshool参考手册，使用xpath的语法完成查询

Mt.getInstance()

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaWeb—Bootstrap、XML

Bootstrap概念∶一个前端开发的框架，Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap是基于 HTML.CsS、JavaScrip的，它简洁灵活，使得web开发更加快捷。框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。好处:定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。响应式布局：同一套页面可以兼容不同分辨率的设备。快速入门下载Bootstrap在项目中将这三个文件夹
复制链接

扫一扫