嘿嘿嘿1212
嘿嘿嘿1212

Java-Web知识点-Bootstrap

Bootstrap

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

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


	
	<script src="js/jquery-3.2.1.min.js">script>
	
	<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插件

  • 全局CSS样式:
	按钮：class="btn btn-default"
	图片：
	  class="img-responsive"：图片在任意尺寸都占100%
	  图片形状
		  "..." alt="..." class="img-rounded">：方形
		  "..." alt="..." class="img-circle"> ： 圆形
		  "..." alt="..." class="img-thumbnail"> ：相框
	表格
	 table
	 table-bordered
	 table-hover
	表单
	 给表单项添加：class="form-control"
  • 组件:
    1. 导航条
    2. 分页条
  • 插件:
    1. 轮播图

案例


<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">
	
	<title>Bootstrap HelloWorldtitle>

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


	
	<script src="js/jquery-3.2.1.min.js">script>
	
	<script src="js/bootstrap.min.js">script>
	<style>
		.paddtop{
			padding-top: 10px;
		}
		.search-btn{
			float: left;
			border:1px solid #ffc900;
			width: 90px;
			height: 35px;
			background-color:#ffc900 ;
			text-align: center;
			line-height: 35px;
			margin-top: 15px;
		}

		.search-input{
			float: left;
			border:2px solid #ffc900;
			width: 400px;
			height: 35px;
			padding-left: 5px;
			margin-top: 15px;
		}
		.jx{
			border-bottom: 2px solid #ffc900;
			padding: 5px;
		}
		.company{
			height: 40px;
			background-color: #ffc900;
			text-align: center;
			line-height:40px ;
			font-size: 8px;
		}
	style>
head>
<body>

   
   <header class="container-fluid">
	   <div class="row">
		   <img src="img/top_banner.jpg" class="img-responsive">
	   div>
	   <div class="row paddtop">
		   <div class="col-md-3">
			   <img src="img/logo.jpg" class="img-responsive">
		   div>
		   <div class="col-md-5">
			   <input class="search-input" placeholder="请输入线路名称">
			   <a class="search-btn" href="#">搜索a>
		   div>
		   <div class="col-md-4">
			   <img src="img/hotel_tel.png" class="img-responsive">
		   div>

	   div>
	   
	   <div class="row">
		   <nav class="navbar navbar-default">
			   <div class="container-fluid">
				   
				   <div class="navbar-header">
					   
					   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
						   <span class="sr-only">Toggle navigationspan>
						   <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="bs-example-navbar-collapse-1">
					   <ul class="nav navbar-nav">
						   <li class="active"><a href="#">Link <span class="sr-only">(current)span>a>li>
						   <li><a href="#">Linka>li>
						   <li><a href="#">Linka>li>
						   <li><a href="#">Linka>li>
						   <li><a href="#">Linka>li>
						   <li><a href="#">Linka>li>

					   ul>
				   div>
			   div>
		   nav>

	   div>

	   
	   <div class="row">
		   <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			   
			   <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>

			   
			   <div class="carousel-inner" role="listbox">
				   <div class="item active">
					   <img src="img/banner_1.jpg" alt="...">
				   div>
				   <div class="item">
					   <img src="img/banner_2.jpg" alt="...">
				   div>
				   <div class="item">
					   <img src="img/banner_3.jpg" alt="...">
				   div>

			   div>

			   
			   <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">Previousspan>
			   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">Nextspan>
			   a>
		   div>



	   div>

   header>
   
   <div class="container">
		<div class="row jx">
			<img src="img/icon_5.jpg">
			<span>黑马精选span>
		div>

	   <div class="row paddtop">
		   <div class="col-md-3">
				<div class="thumbnail">
					<img src="img/jiangxuan_3.jpg" alt="">
					<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)p>
					<font color="red">¥ 699font>
				div>
		   div>
		   <div class="col-md-3">
			   <div class="thumbnail">
				   <img src="img/jiangxuan_3.jpg" alt="">
				   <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)p>
				   <font color="red">¥ 699font>
			   div>

		   div>
		   <div class="col-md-3">

			   <div class="thumbnail">
				   <img src="img/jiangxuan_3.jpg" alt="">
				   <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)p>
				   <font color="red">¥ 699font>
			   div>
		   div>
		   <div class="col-md-3">

			   <div class="thumbnail">
				   <img src="img/jiangxuan_3.jpg" alt="">
				   <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)p>
				   <font color="red">¥ 699font>
			   div>
		   div>


	   div>
	   <div class="row jx">
		   <img src="img/icon_6.jpg">
		   <span>国内游span>
	   div>
	   <div class="row paddtop">
		   <div class="col-md-4">
			   <img src="img/guonei_1.jpg">
		   div>
		   <div class="col-md-8">
			   <div class="row">
				   <div class="col-md-4">
					   <div class="thumbnail">
						   <img src="img/jiangxuan_3.jpg" alt="">
						   <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)p>
						   <font color="red">¥ 699font>
					   div>
				   div>
				   <div class="col-md-4">
					   <div class="thumbnail">
						   <img src="img/jiangxuan_3.jpg" alt="">
						   <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)p>
						   <font color="red">¥ 699font>
					   div>

				   div>
				   <div class="col-md-4">

					   <div class="thumbnail">
						   <img src="img/jiangxuan_3.jpg" alt="">
						   <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)p>
						   <font color="red">¥ 699font>
					   div>
				   div>

			   div>
			   <div class="row">
				   <div class="col-md-4">
					   <div class="thumbnail">
						   <img src="img/jiangxuan_3.jpg" alt="">
						   <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)p>
						   <font color="red">¥ 699font>
					   div>
				   div>
				   <div class="col-md-4">
					   <div class="thumbnail">
						   <img src="img/jiangxuan_3.jpg" alt="">
						   <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)p>
						   <font color="red">¥ 699font>
					   div>

				   div>
				   <div class="col-md-4">

					   <div class="thumbnail">
						   <img src="img/jiangxuan_3.jpg" alt="">
						   <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)p>
						   <font color="red">¥ 699font>
					   div>
				   div>


			   div>

		   div>

	   div>
   div>
   
   <footer class="container-fluid">
	   <div class="row">
		   <img src="img/footer_service.png" class="img-responsive">
	   div>
	   <div class="row company">
		   江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882
	   div>

   footer>


body>
html>

你可能感兴趣的:(JavaWeb笔记,Bootstrap)

  • js 使用缓存判断在规定时间内显示一次弹框 洪洪呀 javascript缓存开发语言
    js使用缓存判断在规定时间内显示一次弹框功能拆分，新用户注册完成登录跳转首页，js根据注册时间判断显示一个新手指引的弹窗，只在注册当天登录且显示一次jQuery(document).ready(function($){getWinnerModalShow()});//新手指引functiongetWinnerModalShow(){varwinnerModal=newbootstrap.Modal
  • .NET 9.0 的 Blazor Web App 项目，Bootstrap Blazor 全局异常 ＜ErrorLogger＞ 使用备忘 cqths BootstrapBlazorBlazorWebAppbootstrap前端c#.net
    一、全局异常通过组件实现，可以对全局的日志、异常进行统一输出，该组件【已经包含】在中，使用了组件包裹的razor组件【不用】再额外添加组件包裹。二、全局异常默认已经开启、后台自动生效，【不用】在项目中做其他任务额外操作，项目发布后执行时，自动拦截异常，项目不会因为发生异常而崩溃、导致不可用，可能会在页面顶端显示全局异常的简要说明，如下图所示。三、如果要显示全局异常的详细说明，可以在appsetti
  • 教育定制开发中，如何通过代码实现多终端适配？ 万岳科技系统开发 外卖系统外卖系统开发小程序android开源
    随着移动设备、平板电脑和PC的普及，教育平台的用户往往使用多种终端访问系统。为了提供一致的用户体验，教育定制开发必须考虑多终端适配问题。本文将探讨在教育系统开发中，如何通过代码实现多终端适配，并提供一些核心技术和代码示例。一、多终端适配的关键技术响应式设计（ResponsiveDesign）使用CSS媒体查询，根据屏幕大小动态调整页面布局。前端框架支持借助前端框架如Bootstrap、Tailwi
  • Blazor 组件库 BootstrapBlazor 中Editor组件介绍 虚幻私塾 python计算机
    优质资源分享学习路线指引（点击解锁）知识定位人群定位Python实战微信订餐小程序进阶级本课程是pythonflask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。Python量化交易实战入门级手把手带你打造一个易扩展、更安全、效率更高的量化交易系统组件介绍Editor组件是对Summernote组件的二次封装。组件分为div模式和editor模式。默认状态下edito
  • Bootstrap Blazor 实战 Dialog 对话框组件快速入门 Densen2014 BootstrapBlazorBlazor组件Blazorhtml5bootstrap.net
    官方文档1.注入服务DialogService@injectDialogServiceDialogService或者后置代码[Inject][NotNull]privateDialogService?DialogService{get;set;}2.弹出说明awaitDialogService.Show(newDialogOption(){Title="运行结果",IsScrolling=true
  • .NET 9.0 的 Blazor Web App 项目，自定义日志 TLog V2 使用备忘 cqths BlazorWebAppEFCoreBlazorwebapp.netc#数据库
    一、TLogV1使用静态数据库上下文，优点是速度快，缺点是内存占用大，参见.NET9.0的BlazorWebApp项目、BootstrapBlazor组件库、自定义日志TLog使用备忘_navigationmanager.tobaserelativepath-CSDN博客二、TLogV2改为依赖注入方式，优点、缺点与V1相反，使用方法与V1相同。namespaceBlazorWebAppNet9S
  • Vulhub靶机 MinIO信息泄露漏洞（CVE-2023-28432）（渗透测试详解） 芜丶湖 安全性测试网络linux服务器
    一、开启vulhub环境docker-composeup-d启动dockerps查看开放的端口二、访问靶机IP9001端口1、漏洞复现这个漏洞的节点存在于这个路径：http://your-ip:9000/minio/bootstrap/v1/verify对该路径发送POST请求会返回一段JSON数据：burp抓登陆包，修改post接口返回包内json字段中，我们可以看到MINIO_ROOT_USE
  • 【ElasticSearch】Es 启动流程 初始化流程 源码分析 九师兄 源码es启动流程
    文章目录1.概述1.1核心类2.主要流程2.1主方法2.1.1关闭过程分析2.2execute方法2.3Bootstrap.init2.4INSTANCE.setup方法2.5创建节点2.5.1创建PluginsService2.5.2创建ThreadPool及ThreadContext实例2.5.3初始化ResourceWatcherService2.5.4创建NodeClient2.5.5创建
  • GitHub 上的开源项目推荐 临水逸 github开源
    GitHub上的开源项目有成千上万，涵盖了从前端框架到数据科学、机器学习、系统工具等各个领域。不同的人根据兴趣和需求，可能会有不同的排名。不过，一些开源项目因为其广泛的应用、社区支持和技术创新，通常被认为是“最好”的开源项目之一。下面是一些广受欢迎、常被认为是GitHub上最好的开源项目（按领域分类）：1.开发工具与库Bootstrap最流行的前端框架之一，用于快速开发响应式和现代化的网页。Vue
  • 深入拆解Tomcat&Jetty(七) r09er_0407
    回顾一下Tomcat的启动步骤1.安装JDK,配置环境变量2.下载Tomcat并解压3.执行tomcat/bin目录下的start.sh执行脚本后的流程image1.Tomcat本质上还是一个Java程序,因此startup.sh脚本会启动一个JVM来运行Tomcat的启动类BootStrap其实Tomcat和我们自己平时写的代码并没有本质上的区别,只是Tomcat的启动时通过脚本.我们常用的Sp
  • 用HTML+bootstrap制作个人简历 星糖曙光 html前端javascript
    用HTML+bootstrap制作个人简历index.html&l
  • java ssm mysql 开源_SSM(Spring+Spring MVC+Mybatis)开发简约漂亮的java开源博客管理系统，其中前台后台功能完整。... weixin_39750598 javassmmysql开源
    项目描述本项目通过SSM(SpringMVC+Mybatis+Spring)框架编写的一个人博客管理系统，使用hexo主题，以及MAVEN进行对项目管理，并且前端具有粒子和点击爱心效果.后端的页面框架为bootstrap.数据库为mysql.运行环境jdk8+tomcat8+mysql+eclipse+maven(idea)项目技术(必填)spring+springmvc+mybatis+boot
  • 【旅游管理与推荐系统】Python+Django网页界面平台+协同过滤推荐算法+管理系统 网站开发
    一、介绍旅游管理与推荐系统。本系统使用Python作为主要编程语言，前端采用HTML、CSS、BootStrap等技术实现界面展示平台的开发，后端使用Django框架处理用户响应请求，并使用Ajax等技术实现前后端的数据通信。本系统主要功能有：系统分为两个角色：用户和管理员对于用户角色可以进行登录、注册、查看旅游景点信息、点赞、收藏、购买景点门票、发布评论、对景点进行评分、查看个人订单、查看个人收
  • 用python制作网站 bicart python开发语言服务器人工智能计算机视觉
    本文使用创作助手。为了制作一个介绍Python的美观网站界面，我们可以使用Python的Web框架（例如Flask或Django）以及一些前端技术（例如HTML，CSS和JavaScript）。下面是一个简单的示例，展示了如何使用Flask和Bootstrap库创建一个简洁而美观的网站界面。首先，我们需要安装Flask和Bootstrap库。可以使用以下命令在终端中安装它们：$pipinstall
  • 12. k8s二进制集群之kubelet部署 smart_ljh k8s二进制搭建kuberneteskubelet
    什么是kubelet准备事项创建kubelet-bootstrap.kubeconfig文件创建kubelet配置文件创建kubelet服务配置文件（将kubelet配置成系统服务）分发CA证书及Kubelet-bootstrap.kubeconfig到所有工作节点最后启动工作节点的kubelet服务总结什么是kubeletKubelet是Kubernetes的核心组件之一，运行在每个节点（Nod
  • | ERROR: [2] bootstrap checks failed. You must address the points described in the following [2] lin 讓丄帝愛伱 环境elasticsearch大数据bigdata
    elasticsearch启动报错:|ERROR:[2]bootstrapchecksfailed.Youmustaddressthepointsdescribedinthefollowing[2]linesbeforestartingElasticsearch.jvm1|bootstrapcheckfailure[1]of[2]:maxfiledescriptors[4096]forelasti
  • python安装jupyter qq_27390023 pythonjupyter
    JupyterNotebook的本质是一个Web应用程序，便于创建和共享程序文档，支持实时代码，数学方程，可视化和markdown。用途包括：数据清理和转换，数值模拟，统计建模，机器学习等等。###安装pip##pip是一个安装和管理Python包的工具wgethttps://bootstrap.pypa.io/get-pip.pypython3get-pip.py##创建软连接ln-s/usr/
  • bootstrap.yml文件未自动加载问题解决方案 XiaoyuEr_6688 bootstrapjava前端
    在添加bootstrap.yml文件后,程序未自动扫描到,即图标是这样的:查了一些资料,是缺少bootstrap相关依赖,虽然已经添加了spring-cloud-context依赖,但是这个依赖并未引入bootstrap依赖,可能是版本问题,需要手动引入org.springframework.cloudspring-cloud-starter-bootstrap3.1.1引入这个依赖以后,boot
  • ttkbootstrap界面美化系列之简介(一) ftzchina Pythonttkbootstrap界面美化python
    一：前言相信很多同学用Python进行界面设计第一个用到的就是Tkinter，Tkinter是Python的一个标准接口，用于创建GUI（图形用户界面）应用程序。它是Tcl/Tk的封装，Tkinter的名称来源于Tk技术工具包(ToolKit)的首字母缩写。Tkinter的历史可以追溯到1989年，当时为了让程序员能更容易地创建图形用户界面，开发了Tk工具包。Tkinter是Python语言的一部
  • tk（ttkbootstrap）下拉实现简单模糊查询 liuyili610 tkinterpythonpythonbootstraplist
    大致原理：通过点击下拉框之前获取下拉文本内容，通过筛选所有选项，选出符合条件的数据，然后再渲染给弹出的下拉选项框。默认是全部选项数据。实现效果图：代码如下：importttkbootstrapastkfromttkbootstrap.constantsimport*base_server_data=['刘小二','刘备','刘邦','刘秀','张三','张三丰','张X良','张X友','德华',
  • 【项目分享】使用python的ttkbootstrap模块构建一个炫酷的计时器 命运之光 我的项目源代码集：持续更新python开发语言
    目录前言项目背景项目展示（图片）项目实现1.安装与设置2.创建主窗口3.初始化计时器功能4.实现计时功能5.实现隐藏边框与置顶功能6.运行应用完整代码结论嗨，我是命运之光！2024，每日百字，记录时光，感谢有你一路同行。携手启航，探索未知，激发潜能，每一
  • 【机器学习BDT】python代码实现(下) mcoc132 Python机器学习机器学习python人工智能
    文章目录BDT(BootstrapDecisionTree)python实现导入库分类树主体代码回归树主体代码输出函数完整代码后续可能添加的功能BDT(BootstrapDecisionTree)python实现代码仅供参考导入库importCART树_自己写importnumpy其中一个库之前写的分类树主体代码在原始数据权重基础上使用更新的数据权重以更新BDT模型.def分类树(self,BDT
  • 图书管理系统 Axios 源码 __删除图书功能 还是鼠鼠 javascriptbootstrapajaxvscode前端前端框架node.js
    目录代码实现（index.js）代码解析使用方法下面是完整的删除图书功能代码，基于HTML+Bootstrap+JavaScript+Axios开发。代码实现（index.js）//删除图书功能document.querySelector('.list').addEventListener('click',(e)=>{//判断是否点击了删除按钮if(e.target.classList.conta
  • 图书管理系统 Axios 源码__获取图书列表 还是鼠鼠 javascriptbootstrapajax前端
    目录核心功能源码介绍1.获取图书列表技术要点适用人群本项目是一个基于HTML+Bootstrap+JavaScript+Axios开发的图书管理系统，可用于添加、编辑、删除和管理图书信息，适合前端开发者学习前端交互设计、Axios数据请求以及Bootstrap样式布局。核心功能图书列表渲染通过Axios发送GET请求获取服务器上的图书数据。渲染数据到HTML表格，展示书籍的名称、作者、出版社等信息
  • 优秀CSS3开源库 天涯学馆 大前端&移动端全栈架构css3前端css
    优秀CSS3开源库Bootstrap：https://getbootstrap.com/一个强大的前端框架，提供了许多用于构建响应式网站的工具和组件。Foundation：https://get.foundation/另一个流行的前端框架，也提供了许多用于构建响应式网站的工具和组件。Bulma：https://bulma.io/一个基于Flexbox的CSS框架，提供了简洁、可靠和可自定义的样式。
  • springboot整合knife4j，从此告别手写接口文档 棋了个怪啊_Rachel Java进阶学习汇总java开发语言knife4j
    关于knife4jKnife4j的前身是swagger-bootstrap-ui,前身swagger-bootstrap-ui是一个纯swagger-ui的ui皮肤项目一开始项目初衷是为了写一个增强版本的swagger的前端ui,但是随着项目的发展,面对越来越多的个性化需求,不得不编写后端Java代码以满足新的需求,在swagger-bootstrap-ui的1.8.5~1.9.6版本之间,采用的
  • 基于SSM的大王门店管理系统设计与实现 qq1744828575 javajava
    目录摘要IAbstractII引言11相关技术31.1SSM31.1.1Spring31.1.2SpringMVC31.1.3MyBatis41.2Shiro41.3前端技术41.3.1Bootstrap41.3.2jQuery41.3.3Ajax51.3.4Layui51.3.5Thymeleaf51.4本章小结62系统分析72.1功能需求分析72.2非功能需求113系统设计133.1系统总体设
  • 基于Bootstrap 3可预览的HTML5文件上传插件 �时过境迁，物是人非 bootstraphtml5okhttp
    bootstrap-fileinput是一款基于Bootstrap3.x的HTML5文件上传插件。该文件上传插件带有预览图效果，可同时选择多个文件。该插件使用bootstrapCSS3样式来制作文件上传界面，美观大方。并且它提供了多国语言，你可以选择使用中文。在线预览下载该文件上传插件比普通的文件上传插件功能更强大，它可以对图片、文本文件、HTML文件、视频文件、音频文件、flash文件生成预览图
  • 【java】RuoYi-Vue前后端分离版本-登陆请求流程解析 橙-极纪元JJY.Cheng javaRuoYi-VueRuoYi
    【java】RuoYiBootstrap多模块版本-登陆请求流程解析这里它用到了一个安全管理框架SpringSecurity你可以通过这篇文章《SpringSecurity详解》去了解它，怎么使用登陆请求流程逻辑图CreatedwithRaphaël2.3.0
  • PHP Laravel框架架构 余味鱼尾 数据库phpmysql后端
    1.根目录结├──app/├──artisan├──bootstrap/├──config/├──database/├──public/├──resources/├──routes/├──storage/├──tests/├──.env├──.gitignore├──composer.json├──package.json├──phpunit.xml└──README.md2.重要目录和文件说明1
  • 集合框架 天子之骄 java数据结构集合框架
       集合框架 集合框架可以理解为一个容器，该容器主要指映射(map)、集合(set)、数组(array)和列表(list)等抽象数据结构。 从本质上来说，Java集合框架的主要组成是用来操作对象的接口。不同接口描述不同的数据类型。   简单介绍：   Collection接口是最基本的接口，它定义了List和Set，List又定义了LinkLi
  • Table Driven（表驱动）方法实例 bijian1013 javaenumTable Driven表驱动
    实例一： /** * 驾驶人年龄段 * 保险行业，会对驾驶人的年龄做年龄段的区分判断 * 驾驶人年龄段：01-[18,25);02-[25,30);03-[30-35);04-[35,40);05-[40,45);06-[45,50);07-[50-55);08-[55,+∞) */ public class AgePeriodTest { //if...el
  • Jquery 总结 cuishikuan javajqueryAjaxWebjquery方法
    1.$.trim方法用于移除字符串头部和尾部多余的空格。如：$.trim('   Hello   ') // Hello2.$.contains方法返回一个布尔值，表示某个DOM元素（第二个参数）是否为另一个DOM元素（第一个参数）的下级元素。如：$.contains(document.documentElement, document.body); 3.$
  • 面向对象概念的提出 麦田的设计者 java面向对象面向过程
            面向对象中，一切都是由对象展开的，组织代码，封装数据。   在台湾面向对象被翻译为了面向物件编程，这充分说明了，这种编程强调实体。       下面就结合编程语言的发展史，聊一聊面向过程和面向对象。      c语言由贝尔实
  • linux网口绑定 被触发 linux
    刚在一台IBM Xserver服务器上装了RedHat Linux Enterprise AS 4，为了提高网络的可靠性配置双网卡绑定。 一、环境描述 我的RedHat Linux Enterprise AS 4安装双口的Intel千兆网卡，通过ifconfig -a命令看到eth0和eth1两张网卡。 二、双网卡绑定步骤： 2.1 修改/etc/sysconfig/network
  • XML基础语法 肆无忌惮_ xml
    一、什么是XML？ XML全称是Extensible Markup Language，可扩展标记语言。很类似HTML。XML的目的是传输数据而非显示数据。XML的标签没有被预定义，你需要自行定义标签。XML被设计为具有自我描述性。是W3C的推荐标准。   二、为什么学习XML？ 用来解决程序间数据传输的格式问题 做配置文件 充当小型数据库   三、XML与HTM
  • 为网页添加自己喜欢的字体 知了ing 字体 秒表 css
    @font-face { font-family: miaobiao;//定义字体名字 font-style: normal; font-weight: 400; src: url('font/DS-DIGI-e.eot');//字体文件 } 使用： <label style="font-size:18px;font-famil
  • redis范围查询应用-查找IP所在城市 矮蛋蛋 redis
    原文地址： http://www.tuicool.com/articles/BrURbqV 需求 根据IP找到对应的城市 原来的解决方案 oracle表（ip_country）： 查询IP对应的城市： 1.把a.b.c.d这样格式的IP转为一个数字，例如为把210.21.224.34转为3524648994 2. select city from ip_
  • 输入两个整数， 计算百分比 alleni123 java
    public static String getPercent(int x, int total){ double result=(x*1.0)/(total*1.0); System.out.println(result); DecimalFormat df1=new DecimalFormat("0.0000%");
  • 百合——————>怎么学习计算机语言 百合不是茶 java 移动开发
        对于一个从没有接触过计算机语言的人来说，一上来就学面向对象，就算是心里上面接受的了，灵魂我觉得也应该是跟不上的，学不好是很正常的现象，计算机语言老师讲的再多，你在课堂上面跟着老师听的再多，我觉得你应该还是学不会的，最主要的原因是你根本没有想过该怎么来学习计算机编程语言，记得大一的时候金山网络公司在湖大招聘我们学校一个才来大学几天的被金山网络录取，一个刚到大学的就能够去和
  • linux下tomcat开机自启动 bijian1013 tomcat
    方法一： 修改Tomcat/bin/startup.sh 为: export JAVA_HOME=/home/java1.6.0_27 export CLASSPATH=$CLASSPATH:$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:. export PATH=$JAVA_HOME/bin:$PATH export CATALINA_H
  • spring aop实例 bijian1013 javaspringAOP
    1.AdviceMethods.java package com.bijian.study.spring.aop.schema; public class AdviceMethods { public void preGreeting() { System.out.println("--how are you!--"); } } 2.beans.x
  • [Gson八]GsonBuilder序列化和反序列化选项enableComplexMapKeySerialization bit1129 serialization
    enableComplexMapKeySerialization配置项的含义  Gson在序列化Map时，默认情况下，是调用Key的toString方法得到它的JSON字符串的Key，对于简单类型和字符串类型，这没有问题，但是对于复杂数据对象，如果对象没有覆写toString方法，那么默认的toString方法将得到这个对象的Hash地址。   GsonBuilder用于
  • 【Spark九十一】Spark Streaming整合Kafka一些值得关注的问题 bit1129 Stream
    包括Spark Streaming在内的实时计算数据可靠性指的是三种级别： 1. At most once，数据最多只能接受一次，有可能接收不到 2. At least once, 数据至少接受一次，有可能重复接收 3. Exactly once  数据保证被处理并且只被处理一次，   具体的多读几遍http://spark.apache.org/docs/lates
  • shell脚本批量检测端口是否被占用脚本 ronin47
    #!/bin/bash cat ports |while read line do#nc -z -w 10 $line nc -z -w 2 $line 58422>/dev/null2>&1if[ $?-eq 0]then echo $line:ok else echo $line:fail fi done 这里的ports 既可以是文件
  • java-2.设计包含min函数的栈 bylijinnan java
    具体思路参见：http://zhedahht.blog.163.com/blog/static/25411174200712895228171/ import java.util.ArrayList; import java.util.List; public class MinStack { //maybe we can use origin array rathe
  • Netty源码学习-ChannelHandler bylijinnan javanetty
    一般来说，“有状态”的ChannelHandler不应该是“共享”的，“无状态”的ChannelHandler则可“共享” 例如ObjectEncoder是“共享”的, 但 ObjectDecoder 不是 因为每一次调用decode方法时，可能数据未接收完全（incomplete）， 它与上一次decode时接收到的数据“累计”起来才有可能是完整的数据，是“有状态”的 p
  • java生成随机数 cngolon java
    方法一： /** * 生成随机数 * @author [email protected] * @return */ public synchronized static String getChargeSequenceNum(String pre){ StringBuffer sequenceNum = new StringBuffer(); Date dateTime = new D
  • POI读写海量数据 ctrain 海量数据
    import java.io.FileOutputStream; import java.io.OutputStream; import org.apache.poi.xssf.streaming.SXSSFRow; import org.apache.poi.xssf.streaming.SXSSFSheet; import org.apache.poi.xssf.streaming
  • mysql 日期格式化date_format详细使用 daizj mysqldate_format日期格式转换日期格式化
    日期转换函数的详细使用说明  DATE_FORMAT(date,format) Formats the date value according to the format string. The following specifiers may be used in the format string. The&n
  • 一个程序员分享8年的开发经验 dcj3sjt126com 程序员
      在中国有很多人都认为IT行为是吃青春饭的，如果过了30岁就很难有机会再发展下去!其实现实并不是这样子的，在下从事.NET及JAVA方面的开发的也有8年的时间了，在这里在下想凭借自己的亲身经历，与大家一起探讨一下。 明确入行的目的 很多人干IT这一行都冲着“收入高”这一点的，因为只要学会一点HTML, DIV+CSS，要做一个页面开发人员并不是一件难事，而且做一个页面开发人员更容
  • android欢迎界面淡入淡出效果 dcj3sjt126com android
    很多Android应用一开始都会有一个欢迎界面，淡入淡出效果也是用得非常多的，下面来实现一下。 主要代码如下： package com.myaibang.activity; import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.os.CountDown
  • linux 复习笔记之常见压缩命令 eksliang tar解压linux系统常见压缩命令linux压缩命令tar压缩
    转载请出自出处:http://eksliang.iteye.com/blog/2109693 linux中常见压缩文件的拓展名 *.gz gzip程序压缩的文件 *.bz2 bzip程序压缩的文件 *.tar tar程序打包的数据，没有经过压缩 *.tar.gz tar程序打包后，并经过gzip程序压缩 *.tar.bz2 tar程序打包后，并经过bzip程序压缩 *.zi
  • Android 应用程序发送shell命令 gqdy365 android
    项目中需要直接在APP中通过发送shell指令来控制lcd灯，其实按理说应该是方案公司在调好lcd灯驱动之后直接通过service送接口上来给APP，APP调用就可以控制了，这是正规流程，但我们项目的方案商用的mtk方案，方案公司又没人会改，只调好了驱动，让应用程序自己实现灯的控制，这不蛋疼嘛！！！！ 发就发吧！ 一、关于shell指令： 我们知道，shell指令是Linux里面带的
  • java 无损读取文本文件 hw1287789687 读取文件无损读取读取文本文件charset
    java 如何无损读取文本文件呢？ 以下是有损的 @Deprecated public static String getFullContent(File file, String charset) { BufferedReader reader = null; if (!file.exists()) { System.out.println("getFull
  • Firebase 相关文章索引 justjavac firebase
    Awesome Firebase 最近谷歌收购Firebase的新闻又将Firebase拉入了人们的视野，于是我做了这个 github 项目。 Firebase 是一个数据同步的云服务，不同于 Dropbox 的「文件」，Firebase 同步的是「数据」，服务对象是网站开发者，帮助他们开发具有「实时」（Real-Time）特性的应用。 开发者只需引用一个 API 库文件就可以使用标准 RE
  • C++学习重点 lx.asymmetric C++笔记
    1.c++面向对象的三个特性：封装性，继承性以及多态性。   2.标识符的命名规则：由字母和下划线开头，同时由字母、数字或下划线组成；不能与系统关键字重名。   3.c++语言常量包括整型常量、浮点型常量、布尔常量、字符型常量和字符串性常量。   4.运算符按其功能开以分为六类：算术运算符、位运算符、关系运算符、逻辑运算符、赋值运算符和条件运算符。 &n
  • java bean和xml相互转换 q821424508 javabeanxmlxml和bean转换java bean和xml转换
    这几天在做微信公众号 做的过程中想找个java bean转xml的工具，找了几个用着不知道是配置不好还是怎么回事，都会有一些问题， 然后脑子一热谢了一个javabean和xml的转换的工具里，自己用着还行，虽然有一些约束吧 ， 还是贴出来记录一下      顺便你提一下下，这个转换工具支持属性为集合、数组和非基本属性的对象。   packag
  • C 语言初级 位运算 1140566087 位运算c
    第十章 位运算   1、位运算对象只能是整形或字符型数据，在VC6.0中int型数据占4个字节   2、位运算符： 运算符 作用 ~ 按位求反 << 左移 >> 右移 & 按位与 ^ 按位异或 | 按位或 他们的优先级从高到低；   3、位运算符的运算功能： a、按位取反： ~01001101 = 101
  • 14点睛Spring4.1-脚本编程 wiselyman spring4
    14.1 Scripting脚本编程 脚本语言和java这类静态的语言的主要区别是:脚本语言无需编译,源码直接可运行; 如果我们经常需要修改的某些代码,每一次我们至少要进行编译,打包,重新部署的操作,步骤相当麻烦; 如果我们的应用不允许重启,这在现实的情况中也是很常见的; 在spring中使用脚本编程给上述的应用场景提供了解决方案,即动态加载bean; spring支持脚本
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他