Bootstrap & xml

已于 2023-05-16 08:51:45 修改
阅读量235 收藏
点赞数
分类专栏： Java web 前端 文章标签： 前端 javascript css
于 2022-11-18 10:59:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/clover_oreo/article/details/127876925
版权

Bootstrap

1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
    * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。
    * 好处：
        1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。(开发简洁)
        2. 响应式布局。
            * 同一套页面可以兼容不同分辨率的设备。（例如同一个网页在手机、平板、电脑时都能自适应屏幕大小）

2. 快速入门
    1. 下载Bootstrap
    2. 在项目中将这三个文件夹复制
    3. 创建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 (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>


</body>
</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：中等屏幕 桌面显示器 (≥992px)
            4. lg：大屏幕 大桌面显示器 (≥1200px)

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

CSS样式和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" 
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 101 Template</title>

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

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="../../img/JavaScript/banner_1.jpg" alt="...">
            <div class="carousel-caption">兵马俑</div>  <!--小字注解-->
        </div>
        <div class="item">
            <img src="../../img/JavaScript/banner_2.jpg" alt="...">
            <div class="carousel-caption">北京一日游</div>  <!--小字注解-->
        </div>
        <div class="item">
            <img src="../../img/JavaScript/banner_3.jpg" alt="...">
            <div class="carousel-caption">玉龙雪山</div>  <!--小字注解-->
        </div>

    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>



</body>
</html>

XML

1. 概念：Extensible Markup Language 可扩展标记语言
    * 可扩展：标签都是自定义的。 <user>  <student>

    * 功能
        * 存储数据
            1. 配置文件
            2. 在网络中传输
    * xml与html的区别
        1. xml标签都是自定义的，html标签是预定义。
        2. xml的语法严格，html语法松散
        3. xml是存储数据的，html是展示数据

    * w3c:万维网联盟

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

* 快速入门： 
        <?xml version='1.0' ?>
        <users>
            <user id='1'>
                <name>zhangsan</name>
                <age>23</age>
                <gender>male</gender>
                <br/>
            </user>
            
            <user id='2'>
                <name>lisi</name>
                <age>24</age>
                <gender>female</gender>
            </user>
        </users>
        
    * 组成部分：
        1. 文档声明
            1. 格式：<?xml 属性列表 ?>
            2. 属性列表：
                * version：版本号，必须的属性
                * encoding：编码方式。告知解析引擎当前文档使用的字符集，默认值：ISO-8859-1
                * standalone：是否独立
                    * 取值：
                        * yes：不依赖其他文件
                        * no：依赖其他文件
        2. 指令(了解)：结合css的
            * <?xml-stylesheet type="text/css" href="a.css" ?>
        3. 标签：标签名称自定义的
            * 规则：
                * 名称可以包含字母、数字以及其他的字符 
                * 名称不能以数字或者标点符号开始 
                * 名称不能以字母 xml（或者 XML、Xml 等等）开始 
                * 名称不能包含空格 

        4. 属性：
            id属性值唯一
        5. 文本：
            * CDATA区：在该区域中的数据会被原样展示
                * 格式：  <![CDATA[ 数据 ]]>

a.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="a.css" ?>

<users>
    <user id="1">
        <name>张三</name>
        <age>23</age>
        <gender>male</gender>
        <br/>
    </user>

    <user id="2">
        <name>lisi</name>
        <age>24</age>
        <gender>female</gender>
        <code>
            <!-- if(a &lt; b &amp;&amp; a &gt; c){}-->
<!--特殊字符需要单独拼写，CDATA可以保持原样-->
            <![CDATA[
                if(a < b && a > c) {}
            ]]]>
        </code>
    </user>

</users>



a.css
name{
    color:red;
}

* 约束：规定xml文档的书写规则
        * 作为框架的使用者(程序员)：
            1. 能够在xml中引入约束文档
            2. 能够简单的读懂约束文档
        
        * 分类：
            1. DTD:一种简单的约束技术
            2. Schema:一种复杂的约束技术

 * DTD：
            * 引入dtd文档到xml文档中
                * 内部dtd：将约束规则定义在xml文档中
                * 外部dtd：将约束的规则定义在外部的dtd文件中
                    * 本地：<!DOCTYPE 根标签名 SYSTEM "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   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                xmlns="http://www.itcast.cn/xml"
                xsi:schemaLocation="http://www.itcast.cn/xml  student.xsd">

3. 解析：操作xml文档，将文档中的数据读取到内存中
    * 操作xml文档
        1. 解析(读取)：将文档中的数据读取到内存中
        2. 写入：将内存中的数据保存到xml文档中。持久化的存储

    * 解析xml的方式：
        1. DOM：将标记语言文档一次性加载进内存，在内存中形成一颗dom树
            * 优点：操作方便，可以对文档进行CRUD的所有操作
            * 缺点：占内存
        2. SAX：逐行读取，基于事件驱动的。
            * 优点：不占内存。
            * 缺点：只能读取，不能增删改

* xml常见的解析器：
        1. JAXP：sun公司提供的解析器，支持dom和sax两种思想
        2. DOM4J：一款非常优秀的解析器
        3. Jsoup：jsoup 是一款Java 的HTML解析器，可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API，可通过DOM，CSS以及类似于jQuery的操作方法来取出和操作数据。
        4. PULL：Android操作系统内置的解析器，sax方式的。

    * Jsoup：jsoup 是一款Java 的HTML解析器，可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API，可通过DOM，CSS以及类似于jQuery的操作方法来取出和操作数据。
        * 快速入门：
            * 步骤：
                1. 导入jar包
                2. 获取Document对象
                3. 获取对应的标签Element对象
                4. 获取数据

 

        * 代码：
             //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);

 

 Idea 报Error:java:无效的源发行版13

 解决方法：

首先打开自己的项目,点击File–>Settings进入界面找到如图位置 并将相信应位置设置成自己的安装版本号

 查看项目结构

 jdk版本查看

 结果调试可以展示结果，但是运行不行

 重启后又可以了，似乎是bug

    * 对象的使用：
        1. Jsoup：工具类，可以解析html或xml文档，返回Document
            * parse：解析html或xml文档，返回Document
                * parse​(File in, String charsetName)：解析xml或html文件的。
                * parse​(String html)：解析xml或html字符串
                * parse​(URL url, int timeoutMillis)：通过网络路径获取指定的html或xml的文档对象

 2同理

3
        2. Document：文档对象。代表内存中的dom树
            * 获取Element对象
                * getElementById​(String id)：根据id属性值获取唯一的element对象
                * getElementsByTag​(String tagName)：根据标签名称获取元素对象集合
                * getElementsByAttribute​(String key)：根据属性名称获取元素对象集合
                * getElementsByAttributeValue​(String key, String value)：根据对应的属性名和属性值获取元素对象集合

package wxx.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;
import java.net.URL;

/**
 * Document/Element对象功能
 */
public class JsoupDemo3 {
    public static void main(String[] args) throws IOException {
        //1.获取student.xml的path
        String path = JsoupDemo3.class.getClassLoader().getResource("student.xml").getPath();
        //2.获取Document对象
        Document document = Jsoup.parse(new File(path), "utf-8");

        //3.获取元素对象了。
        //3.1获取所有student对象
        Elements elements = document.getElementsByTag("student");
        System.out.println(elements);
        System.out.println("-----------");


        //3.2 获取属性名为id的元素对象们
        Elements elements1 = document.getElementsByAttribute("id");
        System.out.println(elements1);
        System.out.println("-----------");

        //3.2获取 number属性值为heima_0001的元素对象
        Elements elements2 = document.getElementsByAttributeValue("number", "heima_0001");
        System.out.println(elements2);
        System.out.println("-----------");

        //3.3获取id属性值的元素对象
        Element itcast = document.getElementById("itcast");
        System.out.println(itcast);
    }

}


        3. Elements：元素Element对象的集合。可以当做 ArrayList<Element>来使用
        4. Element：元素对象
            1. 获取子元素对象
                * getElementById​(String id)：根据id属性值获取唯一的element对象
                * getElementsByTag​(String tagName)：根据标签名称获取元素对象集合
                * getElementsByAttribute​(String key)：根据属性名称获取元素对象集合
                * getElementsByAttributeValue​(String key, String value)：根据对应的属性名和属性值获取元素对象集合

            2. 获取属性值
                * String attr(String key)：根据属性名称获取属性值
            3. 获取文本内容
                * String text():获取文本内容
                * String html():获取标签体的所有内容(包括子标签的字符串内容)
        5. Node：节点对象
            * 是Document和Element的父类

* 快捷查询方式：
        1. selector:选择器
            * 使用的方法：Elements    select​(String cssQuery)
                * 语法：参考Selector类中定义的语法

package wxx.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;

/**
 *选择器查询
 */
public class JsoupDemo5 {
    public static void main(String[] args) throws IOException {
        //1.获取student.xml的path
        String path = JsoupDemo5.class.getClassLoader().getResource("student.xml").getPath();
        //2.获取Document对象
        Document document = Jsoup.parse(new File(path), "utf-8");

        //3.查询name标签
        Elements elements = document.select("name");
        System.out.println(elements);
        System.out.println("=----------------");
        //4.查询id值为itcast的元素
        Elements elements1 = document.select("#itcast");
        System.out.println(elements1);
        System.out.println("----------------");
        //5.获取student标签并且number属性值为heima_0001的age子标签
        //5.1.获取student标签并且number属性值为heima_0001
        Elements elements2 = document.select("student[number=\"heima_0001\"]");
        System.out.println(elements2);
        System.out.println("----------------");

        //5.2获取student标签并且number属性值为heima_0001的age子标签
        Elements elements3 = document.select("student[number=\"heima_0001\"] > age");
        System.out.println(elements3);

    }

}


        2. XPath：XPath即为XML路径语言，它是一种用来确定XML（标准通用标记语言的子集）文档中某部分位置的语言
            * 使用Jsoup的Xpath需要额外导入jar包。
            * 查询w3cshool参考手册，使用xpath的语法完成查询
            * 代码：
                //1.获取student.xml的path
                String path = JsoupDemo6.class.getClassLoader().getResource("student.xml").getPath();
                //2.获取Document对象
                Document document = Jsoup.parse(new File(path), "utf-8");
        
                //3.根据document对象，创建JXDocument对象
                JXDocument jxDocument = new JXDocument(document);
        
                //4.结合xpath语法查询
                //4.1查询所有student标签
                List<JXNode> jxNodes = jxDocument.selN("//student");
                for (JXNode jxNode : jxNodes) {
                    System.out.println(jxNode);
                }
        
                System.out.println("--------------------");
        
                //4.2查询所有student标签下的name标签
                List<JXNode> jxNodes2 = jxDocument.selN("//student/name");
                for (JXNode jxNode : jxNodes2) {
                    System.out.println(jxNode);
                }
        
                System.out.println("--------------------");
        
                //4.3查询student标签下带有id属性的name标签
                List<JXNode> jxNodes3 = jxDocument.selN("//student/name[@id]");
                for (JXNode jxNode : jxNodes3) {
                    System.out.println(jxNode);
                }
                System.out.println("--------------------");
                //4.4查询student标签下带有id属性的name标签 并且id属性值为itcast
        
                List<JXNode> jxNodes4 = jxDocument.selN("//student/name[@id='itcast']");
                for (JXNode jxNode : jxNodes4) {
                    System.out.println(jxNode);
                }

王小小鸭
关注
专栏目录
Bootstrap和xml基础知识
qingmenghan的博客
12-06 610
目录 1Bootstrap 1.1 概念 1.2 快速入门 1.2.1 下载Bootstrap 1.2.2 在项目中将这三个文件夹复制 1.2.3 创建html页面，引入必要的资源文件 1.3 响应式布局 1.4CSS样式和JS插件 1.4.1 全局样式 1.4.2 组件 1.4.3 插件 2 XML 2.1 概念 2.2 语法 2.2.1 基本语法 2.2.2 组成部分 2.2.3 约束 2.3 解析 2.3.1操作xml文档 2.3.2解析xml的方式 ...
bootstrap&jquery;的jar包
03-20
对于Maven项目，可以在pom.xml文件中添加对应的依赖。对于非Maven项目，可以将jar包放入WEB-INF/lib目录下。然后，在你的JSP或HTML页面中引用Bootstrap的CSS和jQuery库，通常是通过以下方式： ```html <!DOCTYPE ...
XML笔记
11-08 159
XML：可扩展标记语言1.概念 功能： （1）配置文件 properties yml （2）网络上传输数据 json 和html的区别: （1）xml标签是自定义的 （2）xml语法严格 （3）xml是存储数据的，html是展示数据的。 2.语法 （1）xml第一行必须定义为文档声明 （2）xml中有且仅有一个根标签 （3）xml标签名严格区分大小写 3.组成...
bootstrap java框架_Java单体应用 - 常用框架 - 01.Bootstrap
weixin_32039589的博客
02-27 176
Bootstrap请参照如上章节导航进行阅读1.概述Bootstrap 来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它是一个 CSS/HTML 框架。Bootstrap 提供了优雅的 HTML 和 CSS 规范。Bootstrap 一经推出后颇受欢迎，一直是 GitHub 上的热门开...
Bootstrap01
qq_64200256的博客
03-31 622
目录 Bootstrap 适用于 优势 安装环境 Bootstrap ①.诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架 ②.是一个用于快速开发Web应用程序和网站的前端框架 ③.Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷 概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架 适用于 企业网站、博客、网站后台之类的网站 优势 ①.响应式设计（Bootstr
JAVA bootstrap
simplezhao的博客
07-29 1401
简介 Bootstrap，基于HTML、cSS、JAVASCRIPT的前端框架。 该框架已经预定义了一套CSS样式和与样式对应的JS代码。(对应的样式有对应的特效）。 开发人员只需要编写HTML结构,添加 bootstrap固定的class样式,就可以轻松完成指房效果的实现。 作用: Bootstrap使得Web开发更加快捷，高效。 BootStrap,支持响应式开发，解决了移动互联网前端开发问题 响应式布局 响应式布局:一个网站的展示能够兼容多个终端(手机、iPad、PC等)，而不需要为每个终端单独
ASP.NET MVC + Bootstrap + XML 封装短信验证服务
10-10
介绍了如何利用第三方短信平台完成短信验证的功能，短信验证服务算是比较基础的功能，各个系统注册都需要用到，而我们总不能把这个把这段接口代码copy到每个地方一份，那样没有复用也不好维护。...
Bootstrap导出json, xml, csv, txt, sql, excel类型demo
06-26
Bootstrap表格导出插件是一种广泛使用的工具，它允许用户方便地将网页中的表格数据导出为不同的文件格式，如JSON、XML、CSV、TXT、SQL和Excel。在本示例中，"Bootstrap导出json, xml, csv, txt, sql, excel类型demo...
bootstrap table to excel word txt xml csv
12-25
Bootstrap Table插件允许用户将表格中的数据导出到不同的文件格式，例如Excel、Word、TXT、XML和CSV。这些格式各有特点： - Excel（.xlsx）：Microsoft Office的电子表格格式，适合数据分析、公式计算和复杂的表格...
JavaWeb学习篇2_Bootstrap、XML简单学习
xiaosi的博客
10-26 420
目录 Bootstrap 概念 快速入门 响应式布局 XML 概念 功能 XML和HTML的区别 基本语法 快速入门 组成部分 文档声明 指令（了解，结合CSS设置页面） 标签 属性 文本 约束 作为框架的使用者要求 分类：DTD一种简单的约束技术、Schema一种复杂的约束技术 XML解析 操作XML文档 解析XML的方式（思想）：DOM、SAX 常见的解析器 JAXP：sun公司提供的解析器，支持dom和sax两种思想 DOM4J：一款非常优秀的解析器 Jsoup：一款Java的
java_bootstrap_spring小系统
10-11
java_bootstrap_spring小系统，数据库 mysql。导进eclispe部署到tomcat下就可以使用。
二、JavaWeb基础(BootStrap前端框架)
kejizhentan的博客
09-19 1288
一 、BootStrap概念概述 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它是响应式布局，同一套页面可以兼容不同分辨率的设备。 二、快速入门 下载Bootstrap 点击下载BootStrap框架 在项目中将这三个文件夹复制 创建html页面，引入必要的资源文件 <!DOCTYPE html> <html lang="
Java学习之Bootstrap
白狼有梦的博客
11-11 1020
Java学习之Bootstrap 前端时间刚看完前端的基础，本以为我可以用HTML和CSS再附上JavaScript就可以走天下了，谁知, Bootstrap给我打开了新世界的大门，那么我们接下来看看Bootstrap到底有那些神奇的地方。 Bootstrap是什么？ 一个前端开发框架，Bootstrap,来自Twitter,是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript的，它简单灵活，使得Web开发更加快捷。
Bootstrap框架
daimenglaoshi的博客
09-11 240
如上图所示，可以看到已编译的 CSS 和 JS（bootstrap.*），以及已编译压缩的 CSS 和 JS（bootstrap.min.*）。同时也包含了 Glyphicons 的字体，这是一个可选的 Bootstrap 主题。Bootstrap框架。
Java web：Bootstrap与XML
Powerstot的博客
11-18 173
Bootstrap 一个前端开发的框架 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 定义了很多的css样式和js插件。开发人员直接可以使用。 响应式布局。（同一套页面可以兼容不同分辨率的设备。） 使用： 下载Bootstrap资源文件（js，css，fonts）放入idea项目中 创建项目页面，引入必要的资源文件（拷贝Bootstrap网站上基本模板） 然后根据Bootstrap中文文档添加需要的css样式和js插件 响应式布局 同一个页面可以兼容不同分辨率的设备 实
JavaWeb---BootStrap
weixin_65440201的博客
07-31 1041
1.Bootstrap： 1.1概念： 1.2快速入门 1.2响应式布局 1.2.1实现： 1.2.2步骤： 1.3CSS样式和JS插件 1.3.1全局CSS样式： 1.3.2组件： 1.3.3插件： 1.Bootstrap： 1.1概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 框架的定义:一个半成品软件，开发人员可以在框
BootStrap基础入门
hongcaixia的博客
04-21 2074
BootStrap基础入门一、BootStrap概述1.1什么是BootStrap BootStrap，基于HTML、CSS、JavaScript的前端框架（半成品）。其预定义一套CSS样式和与样式对应的jQuery代码，我们只需要提供固定HTML结构，添加固定的class样式，就可以完成指定效果的实现 BootStrap在jQuery的基础工作，可以理解BootStrap就是jQuery的一个插件
【java初学】BootStrap
九离的博客
04-06 223
今日内容 1. Bootstrap Bootstrap： 1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 2. 响应式布局。 * 同一套
JavaWeb——【Bootstrap】——一篇文章入门Bootstrap，值得你一看！
奔跑的狮子
01-06 1761
Bootstrap 文章目录Bootstrap1.Bootstrap1.1.概述1.2.Bootstrap 包含的内容1.3.官网&下载1.4.文件结构1.4.1.源码目录1.4.2.预编译版1.5.环境配置1.5.1.CDN 方式引入2.Bootstrap使用2.1.Bootstrap中的排版2.1.1.标题2.1.2.文本2.2.Bootstrap中的表格2.2.1.基本实例2.2.2...
入门指南：掌握前端神器Bootstrap
CSS (Cascading Style Sheets) 是一种样式表语言，用于描述HTML或XML（包括Bootstrap构建的网页）的呈现方式，它控制了元素的布局、颜色、字体等视觉效果。Bootstrap是一个开源的前端框架，由Twitter团队开发，提供...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值