菇毒
菇毒

Web 前端框架 Bootstrap

Web 前端框架 Bootstrap

  • 1. 概述
  • 2. Bootstrap 使用基础
  • 3. CSS 组件
    • 3.1. 表格样式
    • 3.2. 表单样式
    • 3.3. 面包屑导航
  • 4. 响应式设计

1. 概述

Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包，是一个关于 HTML、CSS 和 JS 的框架，用于开发响应式布局、移动设备优先的 Web 项目，是最受欢迎的 Web 前端框架之一；
访问官网 点击这里，获取 Bootstrap 的文件和源码；
Bootstrap 中文网 点击这里，能下载 Bootstrap 软件，还能获取使用说明的中文文档；
注意：

  1. Bootstrap 框架提供的 JS 和 CSS 文件，分别有压缩和非压缩两个版本；压缩版本的文件名里使用 min
    标识，非压缩版本是源码形式，易于分析和研究；
  2. Bootstrap 中的许多组件都要依赖 JavaScript 才能运行；

Bootstrap 包含了丰富的 Web 组件，用这些组件可快速地搭建一个功能齐全且漂亮的网址；
Bootstrap 提供了基本 CSS 样式（表格和按钮等）和常用组件（下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条等）
Bootstrap 是基于 HTML 5 和 CSS 3 开发的，在 jQuery 基础上进行了更为个性化和人性化的完善，形成了一套自己独有的网站风格，兼容大部分 jQuery 插件；

2. Bootstrap 使用基础

在 Web 项目中使用 Bootstrap 的方法为：将 Bootstrap 的两个文件（一个是样式文件，另一个是 JS 文件）和 jQuery 文件复制到相应的文件夹中，再页面头部引入它们；
默认没有启用响应式布局特性；
若加入响应式布局 CSS 文件，栅格系统会自动根据可视窗口的宽度从 724px 到 1170px 进行动态调整；
通过在文档中的 标签里添加合适的 meta 标签并引入一个额外的样式可启用响应式 CSS；

<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

流式栅格系统对每一列的宽度使用百分比，不是像素数量，它和固定栅格系统一样有响应式布局的能力，保证了它能对不同的分辨率和设备做出适当的调整；
无需对

添加任何类或变标签结构，每个单独的表单控件都已被赋予了样式；

3. CSS 组件

3.1. 表格样式

Bootstrap 提供了用于表格美化及特效的 CSS 组件，表现为以下样式：

  • table：为任意 添加基本样式（只有横向分隔线）；
  • table-striped：添加斑马线形式的条纹（隔行变色）；
  • table-borderd：为单元格添加边框；
  • table-hover：启用鼠标悬停状态，会出现浅灰色背景；
  • table-condensed：让表格更加紧凑；

    • 例子：在制作一个具有各行变色、鼠标悬停功能的条纹状的紧凑表格；

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	<script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js">script>
	    <script src="http://cdn.bootcss.com/twitter-bootstrap/2.2.2/bootstrap.min.js">script>
	    <link href="http://cdn.bootcss.com/twitter-bootstrap/2.2.2/css/bootstrap.min.css" rel="stylesheet">
	    <title>使用Bootstrap美化表格、增加特效title>
	    <style>
	        th{
	            text-align: center!important;/*水平居中表格标题栏文本必须提升样式优先级*/
	        }
	    style>
	head>
	<body>
	    <table class="table table-bordered table-striped table-hover table-condensed">
	        <caption>通讯录caption>
	        <tr><th>用户名th><th>工作单位th><th>手机th>tr>
	        <tr><td>王某td><td>农学院td><td>177****8777td>tr>
	        <tr><td>李某td><td>管理学院td><td>188****0063td>tr>
	        <tr><td>谢某td><td>信息学院td><td>135****9898td>tr>
	        <tr><td>张某td><td>商业学院td><td>164****1382td>tr>
	    table>
	body>
html>

    Web 前端框架 Bootstrap_第1张图片

    3.2. 表单样式

    引入 Botsrap ，需要掌握以下要点：

    • 单独的表单控件自动赋予一些全局样式；
    • 对 form 标签应用样式 class="form-horzontal"；可让表单元素有较好的排列；
    • label 标签可对其表单控件，并通过 input 标签的 Id 属性值与其建立关联；
    • 类样式 span1 到 span12（从小到大），可调整表单元素的宽度；
    • 会改变
    等标签默认的样式；如原来表格内 的内容不再是居中，居中 的办法是在重新定义 th 样式时 加上
    "!important"，其他样式冲突问题的解决方法类似；

    例子：表单效果

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js">script>
		<script src="http://cdn.bootcss.com/twitter-bootstrap/2.2.2/bootstrap.min.js">script>
		<link href="http://cdn.bootcss.com/twitter-bootstrap/2.2.2/bootstrap.min.css" rel="stylesheet" />
		<title>Bootstrap 美化表单title>
	head>
	<body>
		<form class="form-horizontal" style="margin-top: 10px">
			<div class="control-group">
				<label class="control-group" for="inputEmail">电子邮件地址label>
				<div class="controls">
					
					<input type="text" id="inputEmail" placeholder="请输入 Emali 地址" class="span3" />
				div>
			div>
			<div class="control-group">
				<label class="control-label" for="inputPassword">密码label>
				<div class="controls">
					<input type="password" id="inputPassword" placeholder="Password" />
				div>
			div>
			<div class="control-group">
				<label class="control-label" for="inputWorkWhere">工作单位label>
				<div class="controls">
					<input type="text" id="inputWorkWhere" placeholder="某某大学某某学院某某系" class="span5" />
				div>
			div>
			<div class="control-group">
				<div class="controls">
					<label class="checkbox"><input type="checkbox" />Remember melabel>
					<button type="button" class="btn" id="tj">提交button>
				div>
			div>
		form>
	body>
html>

    Web 前端框架 Bootstrap_第2张图片

    3.3. 面包屑导航

    面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式，表示当前页面在导航层次结构内的位置；
    Bootstrap 的面包屑导航是一个应用了类样式 breadcrumb 的无序列表；
    例子：面包屑导航设计
    面包屑导航有利于用户知道当前所处位置，制作要点如下所示：
    对列表应用名为 breadcrumb 的类样式和取值为 inline 的 CSS 样式 display；
    定义当前的父页面的超链接和分隔符，放入列表里；
    对分隔符应用类样式 divider；
    最后一个列表表示当前页，对 li 应用类样式 active;

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>制作面包屑导航title>
		<script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js">script>
		<script src="http://cdn.bootcss.com/twitter-bootstrap/2.2.2/bootstrap.min.js">script>
		<link href="http://cdn.bootcss.com/twitter-bootstrap/2.2.2/css/bootstrap.min.css" rel="stylesheet" />
	head>
	<body>
		<ul class="breadcrumb" style="display: inline;line-height: 40px;">
			<li><a href="#">首页a><span class="divider">>span>li>
			<li><a href="#">Librarya><span class="divider">>span>li>
			<li class="active">Dateli>
		ul>
		<div style="background-color: rgb(228,216,108);" align="center">
			制作要点：<br />
			1.对列表应用名为 breadcrumb 的类样式和取值为 inline 的 CSS 样式 display；<br />
			2.定义当前的父页面的超链接和分隔符，放入列表里；<br />
			3.对分隔符应用类样式 divider；<br />
			4.最后一个列表表示当前页，对 li 应用类样式 active;
		div>
	body>
html>

    Web 前端框架 Bootstrap_第3张图片

    4. 响应式设计

    data 属性是 HTML 5 的新属性，开发者可自由地为其标签添加属性，用来实现 HTML 标签能隐式地附带一些数据；自定义属性一般用 “data-” 开头；
    特定的事件中，JavaScript 能对这些属性数据进行读或写操作；
    用 Bootstrap 设计响应式菜单，不用写任何媒体查询代码和 JS 脚本代码，只要应用 Bootstrap 的特定 CSS 样式；
    控制响应是菜单中的汉堡按钮，要建立折叠菜单所在 div 的 id 值与自定义属性 data-trget 之间的关联，而 data-toggle=“collapse” 表示在菜单折叠时触发；
    例子：用 Bootstrap 实现响应式菜单设计
    窗口较宽时，菜单项全部展示且是水平样式；缩小窗口宽度到一定程度时，菜单项被隐藏，出现汉堡按钮；单击汉堡按钮，纵向呈现菜单项；

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Bootstrap 响应式导航菜单title>
		<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js">script>
		<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js">script>
	head>
	<body>
		<nav class="navbar navbar-default" role="navigation">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
				<span class="icon-bar">span>
				<span class="icon-bar">span>
				<span class="icon-bar">span>
			button>
			<div class="navbar-header">
				<a class="navbar-brand" href="#">网站首页a>
			div>
			<div class="collapsed navbar-collapse" id="menu">
				<ul class="nav navbar-nav">
					<li class="active"><a href="##">系列教程a>li>
					<li><a href="##">名师介绍a>li>
					<li><a href="##">成功案例a>li>
					<li><a href="##">关于我们a>li>
				ul>
			div>
		nav>
	body>
html>

    Web 前端框架 Bootstrap_第4张图片

    注意：

    • HTML 5 允许开发者自由为其添加属性，这些自定义属性用 “data-” 开头；
    • data-toggle 设置以什么事件触发，data-target 设置事件的目标；
    • Bootstrap 框架实现的响应式水平菜单设计，本质上是媒体查询，只是 CSS 样式由框架提供；

    你可能感兴趣的:(web,前端学习,前端,bootstrap,前端框架)

    • 理解Gunicorn：Python WSGI服务器的基石 范范0825 ipythonlinux运维
      理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
    • Long类型前后端数据不一致 igotyback 前端
      响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
    • Google earth studio 简介 陟彼高冈yu 旅游
      GoogleEarthStudio是一个基于Web的动画工具，专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库，使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具，专为创作使用G
    • PHP环境搭建详细教程 好看资源平台 前端php
      PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这
    • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
      ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
    • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
      加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
    • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
      ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
    • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
      Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
    • git - Webhook让部署自动化 大猪大猪
      我们现在有一个需求，将项目打包上传到gitlab或者github后，程序能自动部署，不用手动地去服务器中进行项目更新并运行，如何做到？这里我们可以使用gitlab与github的挂钩，挂钩的原理就是，每当我们有请求到gitlab与github服务器时，这时他俩会根据我们配置的挂钩地扯进行访问，webhook挂钩程序会一直监听着某个端口请求，一但收到他们发过来的请求，这时就知道用户有请求提交了，这时
    • webpack图片等资源的处理 dmengmeng
      需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
    • 「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验 张风捷特烈 iderust开发语言后端
      theme:cyanosis我正在参加「豆包MarsCode初体验」征文活动MarsCode可以看作一个运行在服务端的远程VSCode开发环境。对于我这种想要学习体验某些语言，但不想在电脑里装环境的人来说非常友好。本文就来介绍一下在MarsCode里，我的体验rust开发体验。一、MarsCode是什么它的本质是:提供代码助手和云端IDE服务的web网站，可通过下面的链接访问https://www
    • Python神器！WEB自动化测试集成工具 DrissionPage 亚丁号 python开发语言
      一、前言用requests做数据采集面对要登录的网站时，要分析数据包、JS源码，构造复杂的请求，往往还要应付验证码、JS混淆、签名参数等反爬手段，门槛较高。若数据是由JS计算生成的，还须重现计算过程，体验不好，开发效率不高。使用浏览器，可以很大程度上绕过这些坑，但浏览器运行效率不高。因此，这个库设计初衷，是将它们合而为一，能够在不同须要时切换相应模式，并提供一种人性化的使用方法，提高开发和运行效率
    • Java爬虫框架（一）--架构设计 狼图腾-狼之传说 java框架java任务html解析器存储电子商务
      一、架构图那里搜网络爬虫框架主要针对电子商务网站进行数据爬取，分析，存储，索引。爬虫：爬虫负责爬取，解析，处理电子商务网站的网页的内容数据库：存储商品信息索引：商品的全文搜索索引Task队列：需要爬取的网页列表Visited表：已经爬取过的网页列表爬虫监控平台：web平台可以启动，停止爬虫，管理爬虫，task队列，visited表。二、爬虫1.流程1)Scheduler启动爬虫器，TaskMast
    • Java：爬虫框架 dingcho Javajava爬虫
      一、ApacheNutch2【参考地址】Nutch是一个开源Java实现的搜索引擎。它提供了我们运行自己的搜索引擎所需的全部工具。包括全文搜索和Web爬虫。Nutch致力于让每个人能很容易,同时花费很少就可以配置世界一流的Web搜索引擎.为了完成这一宏伟的目标,Nutch必须能够做到:每个月取几十亿网页为这些网页维护一个索引对索引文件进行每秒上千次的搜索提供高质量的搜索结果简单来说Nutch支持分
    • MongoDB知识概括 GeorgeLin98 持久层mongodb
      MongoDB知识概括MongoDB相关概念单机部署基本常用命令索引-IndexSpirngDataMongoDB集成副本集分片集群安全认证MongoDB相关概念业务应用场景：传统的关系型数据库（如MySQL），在数据操作的“三高”需求以及应对Web2.0的网站需求面前，显得力不从心。解释：“三高”需求：①Highperformance-对数据库高并发读写的需求。②HugeStorage-对海量数
    • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
      这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
    • Python实现下载当前年份的谷歌影像 sand&wich python开发语言
      在GIS项目和地图应用中，获取最新的地理影像数据是非常重要的。本文将介绍如何使用Python代码从Google地图自动下载当前年份的影像数据，并将其保存为高分辨率的TIFF格式文件。这个过程涉及地理坐标转换、多线程下载和图像处理。关键功能该脚本的核心功能包括：坐标转换：支持WGS-84与WebMercator投影之间转换，以及处理中国GCJ-02偏移。自动化下载：多线程下载地图瓦片，提高效率。图像
    • Spring MVC 全面指南：从入门到精通的详细解析 一杯梅子酱 技术栈学习springmvcjava
      引言：SpringMVC，作为Spring框架的一个重要模块，为构建Web应用提供了强大的功能和灵活性。无论是初学者还是有一定经验的开发者，掌握SpringMVC都将显著提升你的Web开发技能。本文旨在为初学者提供一个全面且易于理解的学习路径，通过详细的知识点分析和实际案例，帮助你快速上手SpringMVC，让学习过程既深刻又高效。一、SpringMVC简介1.1什么是SpringMVC？Spri
    • Spring Boot中实现跨域请求 BABA8891 springboot后端java
      在SpringBoot中实现跨域请求（CORS，Cross-OriginResourceSharing）可以通过多种方式，以下是几种常见的方法：1.使用@CrossOrigin注解在SpringBoot中，你可以在控制器或者具体的请求处理方法上使用@CrossOrigin注解来允许跨域请求。在控制器上应用：importorg.springframework.web.bind.annotation.
    • WebMagic：强大的Java爬虫框架解析与实战 Aaron_945 Javajava爬虫开发语言
      文章目录引言官网链接WebMagic原理概述基础使用1.添加依赖2.编写PageProcessor高级使用1.自定义Pipeline2.分布式抓取优点结论引言在大数据时代，网络爬虫作为数据收集的重要工具，扮演着不可或缺的角色。Java作为一门广泛使用的编程语言，在爬虫开发领域也有其独特的优势。WebMagic是一个开源的Java爬虫框架，它提供了简单灵活的API，支持多线程、分布式抓取，以及丰富的
    • 博客网站制作教程 2401_85194651 javamaven
      首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
    • 00. 这里整理了最全的爬虫框架（Java + Python） 有一只柴犬 爬虫系列爬虫javapython
      目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
    • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
      最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
    • 补充元象二面 Redstone Monstrosity 前端面试
      1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
    • 微信小程序开发注意事项 jun778895 微信小程序小程序
      微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
    • 字节二面 Redstone Monstrosity 前端面试
      1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
    • uniapp使用内置地图选择插件，实现地址选择并在地图上标点 神夜大侠 Uniappvue.jsuniapp
      uniapp使用内置地图选择插件，实现地址选择并在地图上标点代码如下：page{background:#F4F5F6;}::-webkit-scrollbar{width:0;height:0;color:transparent;}page{height:100%;width:100%;font-size:24rpx;}image,view,input,textarea,label,text,na
    • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
      点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
    • 【Golang】实现 Excel 文件下载功能 RumIV Golanggolangexcel开发语言
      在当今的网络应用开发中，提供数据导出功能是一项常见的需求。Excel作为一种广泛使用的电子表格格式，通常是数据导出的首选格式之一。在本教程中，我们将学习如何使用Go语言和GinWeb框架来创建一个Excel文件，并允许用户通过HTTP请求下载该文件。准备工作在开始之前，请确保您的开发环境中已经安装了Go语言和相关的开发工具。此外，您还需要安装GinWeb框架和excelize包，这两个包都将用于我
    • VUE3 + xterm + nestjs实现web远程终端 或 连接开启SSH登录的路由器和交换机。 焚木灵 node.jsvue
      可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，
    • java线程的无限循环和退出 3213213333332132 java
      最近想写一个游戏，然后碰到有关线程的问题，网上查了好多资料都没满足。 突然想起了前段时间看的有关线程的视频，于是信手拈来写了一个线程的代码片段。 希望帮助刚学java线程的童鞋 package thread; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date
    • tomcat 容器 BlueSkator tomcatWebservlet
      Tomcat的组成部分 1、server A Server element represents the entire Catalina servlet container. (Singleton) 2、service service包括多个connector以及一个engine，其职责为处理由connector获得的客户请求。   3、connector 一个connector
    • php递归,静态变量,匿名函数使用 dcj3sjt126com PHP递归函数匿名函数静态变量引用传参
        <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Current To-Do List</title> </head> <body>
    • 属性颜色字体变化 周华华 JavaScript
      function changSize(className){ var diva=byId("fot") diva.className=className; } </script> <style type="text/css"> .max{ background: #900; color:#039;
    • 将properties内容放置到map中 g21121 properties
      代码比较简单： private static Map<Object, Object> map; private static Properties p; static { //读取properties文件 InputStream is = XXX.class.getClassLoader().getResourceAsStream("xxx.properti
    • [简单]拼接字符串 53873039oycg 字符串
               工作中遇到需要从Map里面取值拼接字符串的情况，自己写了个，不是很好，欢迎提出更优雅的写法，代码如下：           import java.util.HashMap; import java.uti
    • Struts2学习 云端月影
      最近开始关注struts2的新特性，从这个版本开始，Struts开始使用convention-plugin代替codebehind-plugin来实现struts的零配置。 配置文件精简了，的确是简便了开发过程，但是，我们熟悉的配置突然disappear了，真是一下很不适应。跟着潮流走吧，看看该怎样来搞定convention-plugin。 使用Convention插件，你需要将其JAR文件放
    • Java新手入门的30个基本概念二 aijuans java新手java 入门
      基本概念:　　1.OOP中唯一关系的是对象的接口是什么,就像计算机的销售商她不管电源内部结构是怎样的,他只关系能否给你提供电就行了,也就是只要知道can or not而不是how and why.所有的程序是由一定的属性和行为对象组成的,不同的对象的访问通过函数调用来完成,对象间所有的交流都是通过方法调用,通过对封装对象数据,很大限度上提高复用率。　　2.OOP中最重要的思想是类,类是模板是蓝图,
    • jedis 简单使用 antlove javarediscachecommandjedis
      jedis.RedisOperationCollection.java package jedis; import org.apache.log4j.Logger; import redis.clients.jedis.Jedis; import java.util.List; import java.util.Map; import java.util.Set; pub
    • PL/SQL的函数和包体的基础 百合不是茶 PL/SQL编程函数包体显示包的具体数据包
      由于明天举要上课,所以刚刚将代码敲了一遍PL/SQL的函数和包体的实现(单例模式过几天好好的总结下再发出来);以便明天能更好的学习PL/SQL的循环,今天太累了,所以早点睡觉,明天继续PL/SQL总有一天我会将你永远的记载在心里,,,   函数; 函数:PL/SQL中的函数相当于java中的方法;函数有返回值 定义函数的 --输入姓名找到该姓名的年薪 create or re
    • Mockito(二)--实例篇 bijian1013 持续集成mockito单元测试
              学习了基本知识后，就可以实战了，Mockito的实际使用还是比较麻烦的。因为在实际使用中，最常遇到的就是需要模拟第三方类库的行为。         比如现在有一个类FTPFileTransfer，实现了向FTP传输文件的功能。这个类中使用了a
    • 精通Oracle10编程SQL(7)编写控制结构 bijian1013 oracle数据库plsql
      /* *编写控制结构 */ --条件分支语句 --简单条件判断 DECLARE v_sal NUMBER(6,2); BEGIN select sal into v_sal from emp where lower(ename)=lower('&name'); if v_sal<2000 then update emp set
    • 【Log4j二】Log4j属性文件配置详解 bit1129 log4j
      如下是一个log4j.properties的配置   log4j.rootCategory=INFO, stdout , R log4j.appender.stdout=org.apache.log4j.ConsoleAppender log4j.appender.stdout.layout=org.apache.log4j.PatternLayout log4j.appe
    • java集合排序笔记 白糖_ java
      public class CollectionDemo implements Serializable,Comparable<CollectionDemo>{ private static final long serialVersionUID = -2958090810811192128L; private int id; private String nam
    • java导致linux负载过高的定位方法 ronin47
      定位java进程ID 可以使用top或ps -ef |grep java ![图片描述][1] 根据进程ID找到最消耗资源的java pid 比如第一步找到的进程ID为5431 执行 top -p 5431 -H ![图片描述][2] 打印java栈信息 $ jstack -l 5431 > 5431.log 在栈信息中定位具体问题 将消耗资源的Java PID转
    • 给定能随机生成整数1到5的函数，写出能随机生成整数1到7的函数 bylijinnan 函数
      import java.util.ArrayList; import java.util.List; import java.util.Random; public class RandNFromRand5 { /** 题目：给定能随机生成整数1到5的函数，写出能随机生成整数1到7的函数。 解法1： f(k) = (x0-1)*5^0+(x1-
    • PL/SQL Developer保存布局 Kai_Ge
            近日由于项目需要，数据库从DB2迁移到ORCAL，因此数据库连接客户端选择了PL/SQL Developer。由于软件运用不熟悉，造成了很多麻烦，最主要的就是进入后，左边列表有很多选项，自己删除了一些选项卡，布局很满意了，下次进入后又恢复了以前的布局，很是苦恼。在众多PL/SQL Developer使用技巧中找到如下这段：   &n
    • [未来战士计划]超能查派[剧透,慎入] comsci 计划
             非常好看,超能查派,这部电影......为我们这些热爱人工智能的工程技术人员提供一些参考意见和思想........        虽然电影里面的人物形象不是非常的可爱....但是非常的贴近现实生活....    &nbs
    • Google Map API V2 dai_lm google map
      以后如果要开发包含google map的程序就更麻烦咯 http://www.cnblogs.com/mengdd/archive/2013/01/01/2841390.html 找到篇不错的文章，大家可以参考一下 http://blog.sina.com.cn/s/blog_c2839d410101jahv.html 1. 创建Android工程 由于v2的key需要G
    • java数据计算层的几种解决方法2 datamachine javasql集算器
      2、SQL     SQL/SP/JDBC在这里属于一类，这是老牌的数据计算层，性能和灵活性是它的优势。但随着新情况的不断出现，单纯用SQL已经难以满足需求，比如： JAVA开发规模的扩大，数据量的剧增，复杂计算问题的涌现。虽然SQL得高分的指标不多，但都是权重最高的。     成熟度：5星。最成熟的。   
    • Linux下Telnet的安装与运行 dcj3sjt126com linuxtelnet
      Linux下Telnet的安装与运行   linux默认是使用SSH服务的 而不安装telnet服务  如果要使用telnet 就必须先安装相应的软件包  即使安装了软件包 默认的设置telnet 服务也是不运行的 需要手工进行设置 如果是redhat9，则在第三张光盘中找到 telnet-server-0.17-25.i386.rpm
    • PHP中钩子函数的实现与认识 dcj3sjt126com PHP
      假如有这么一段程序： function fun(){ fun1(); fun2(); }   首先程序执行完fun1()之后执行fun2()然后fun()结束。   但是，假如我们想对函数做一些变化。比如说，fun是一个解析函数，我们希望后期可以提供丰富的解析函数，而究竟用哪个函数解析，我们希望在配置文件中配置。这个时候就可以发挥钩子的力量了。   我们可以在fu
    • EOS中的WorkSpace密码修改 蕃薯耀 修改WorkSpace密码
      EOS中BPS的WorkSpace密码修改 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 201
    • SpringMVC4零配置--SpringSecurity相关配置【SpringSecurityConfig】 hanqunfeng SpringSecurity
       SpringSecurity的配置相对来说有些复杂，如果是完整的bean配置，则需要配置大量的bean，所以xml配置时使用了命名空间来简化配置，同样，spring为我们提供了一个抽象类WebSecurityConfigurerAdapter和一个注解@EnableWebMvcSecurity，达到同样减少bean配置的目的，如下：   applicationContex
    • ie 9 kendo ui中ajax跨域的问题 jackyrong AJAX跨域
      这两天遇到个问题，kendo ui的datagrid，根据json去读取数据，然后前端通过kendo ui的datagrid去渲染，但很奇怪的是，在ie 10,ie 11,chrome,firefox等浏览器中，同样的程序， 浏览起来是没问题的，但把应用放到公网上的一台服务器， 却发现如下情况： 1） ie 9下，不能出现任何数据，但用IE 9浏览器浏览本机的应用，却没任何问题
    • 不要让别人笑你不能成为程序员 lampcy 编程程序员
      在经历六个月的编程集训之后，我刚刚完成了我的第一次一对一的编码评估。但是事情并没有如我所想的那般顺利。 说实话，我感觉我的脑细胞像被轰炸过一样。 手慢慢地离开键盘，心里很压抑。不禁默默祈祷：一切都会进展顺利的，对吧？至少有些地方我的回答应该是没有遗漏的，是不是？ 难道我选择编程真的是一个巨大的错误吗——我真的永远也成不了程序员吗？ 我需要一点点安慰。在自我怀疑，不安全感和脆弱等等像龙卷风一
    • 马皇后的贤德 nannan408
         马皇后不怕朱元璋的坏脾气，并敢理直气壮地吹耳边风。众所周知，朱元璋不喜欢女人干政，他认为“后妃虽母仪天下，然不可使干政事”，因为“宠之太过，则骄恣犯分，上下失序”，因此还特地命人纂述《女诫》，以示警诫。但马皇后是个例外。 　　有一次，马皇后问朱元璋道：“如今天下老百姓安居乐业了吗？”朱元璋不高兴地回答：“这不是你应该问的。”马皇后振振有词地回敬道：“陛下是天下之父，
    • 选择某个属性值最大的那条记录（不仅仅包含指定属性，而是想要什么属性都可以） Rainbow702 sqlgroup by最大值max最大的那条记录
      好久好久不写SQL了，技能退化严重啊！！！   直入主题： 比如我有一张表，file_info， 它有两个属性（但实际不只，我这里只是作说明用）： file_code, file_version 同一个code可能对应多个version 现在，我想针对每一个code，取得它相关的记录中，version 值 最大的那条记录， SQL如下： select *
    • VBScript脚本语言 tntxia VBScript
        VBScript 是基于VB的脚本语言。主要用于Asp和Excel的编程。   VB家族语言简介   Visual Basic 6.0           源于BASIC语言。           由微软公司开发的包含协助开发环境的事
    • java中枚举类型的使用 xiao1zhao2 javaenum枚举1.5新特性
      枚举类型是j2se在1.5引入的新的类型,通过关键字enum来定义,常用来存储一些常量.   1.定义一个简单的枚举类型 public enum Sex { MAN, WOMAN }   枚举类型本质是类,编译此段代码会生成.class文件.通过Sex.MAN来访问Sex中的成员,其返回值是Sex类型.   2.常用方法 静态的values()方