励志敲烂键盘
励志敲烂键盘

01_前端框架之Bootstrap的应用

day01_前端框架之Bootstrap的应用

本课目标

  • 能够完成 Bootstrap 环境搭建
  • 能够理解 Bootstrap 的栅格布局
  • 能够根据 Bootstrap 相关文档使用Bootstrap组件
  • 能够根据 Bootstrap 重构主页和表单页

第1章 bootstrap简介

1.1 什么是bootstrap

  • Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。

    • Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。

  • Bootstrap，基于 HTML、CSS、JAVASCRIPT 的前端框架。 该框架已经预定义了一套CSS样式和与样式对应的JS代码。（对应的样式有对应的特效） 开发人员只需要编写HTML结构，添加bootstrap固定的class样式，就可以轻松完成指定效果的实现。

  • 作用：

    • Bootstrap 使得 Web 开发更加快捷，高效。

    • BootStrap支持响应式开发，解决了移动互联网前端开发问题。

    • Bootstrap英文官网: Bootstrap · The most popular HTML, CSS, and JS library in the world.

    • Bootstrap4 中文文档参考: 简介 · Bootstrap

1.2 什么是响应式布局

  • 响应式布局：一个网站的展示能够兼容多个终端(手机、iPad、PC等)，而不需要为每个终端单独做一个 展示版本。此概念专为解决移动互联网浏览而诞生的。

  • 响应式布局，使得网站仅适用一套样式，就可以在不同分辨率下展示出不同的舒适效果，大大降低了网站开 发维护成本，并且能带给用户更好的体验性。

  • 响应式布局会增加程序员负担以及代码量

  • 未使用响应式开发：

    • 百度: 百度一下，你就知道 无论如何缩小窗口在屏幕下都是不变的

    • 百度针对不同的设备有不同的网页匹配: 手机端: 百度一下

第2章 bootstrap环境搭建

2.1 下载bootstrap

  • 地址：https://code.z01.com/v4/bootstrap-4.4.1-dist.zip

  • 目录结构：目录结构 · Bootstrap

第3章 bootstrap页面布局

3.1 基础入门

  • Container容器是窗口布局的最基本元素，我们推荐所有样式都定义在.container或.container-fluid容器之中-- 这是启用整个栅格系统必不可少的前置条件，它们分别对应选择一个响应式的、固定宽度的容器，或者选择一个流式自适应浏览器或容器最大合法宽度的窗口（意味着任何时候它的宽度总是100%）。

  • Bootstrap原生带三种container宽度规范：

    • .container, 居中，适配不同的断的 max-width 尺寸。

    • .container-fluid, 全屏，适配屏幕的 width: 100% 尺寸。

超小屏幕 <576px 小屏幕 ≥576px 中等屏幕 ≥768px 大屏幕 ≥992px 超大屏幕 ≥1200px
.container 100% 540px 720px 960px 1140px
.container-sm 100% 540px 720px 960px 1140px
.container-md 100% 100% 720px 960px 1140px
.container-lg 100% 100% 100% 960px 1140px
.container-xl 100% 100% 100% 100% 1140px
.container-fluid 100% 100% 100% 100% 100%

  • 课堂案例：01.Bootstrap远程样式引入.html

  • 


    
    
    
    Bootstrap入门
    
     
     
     
     


    hello Bootstrap入门

  • 课堂案例：02.Boostrap本地样式引入.html

  • 


    
    
    
    Bootstrap通过本地样式引入
    
     
     
     
     


    
     hello Bootstrap
    
    
     hello Bootstrap

  • 课堂案例：03.container页面布局规范.html

  • 


    
    
    
    Contain 容器

    
    
    
    

    
    


    
    
    
        
    hello 酷狗
    
    
    

    
    
        
    哈哈哈哈

3.1 栅格系统

  • 为了方便在布局容器中进行网页的布局操作。BootStrap提供了一套专门用于响应式开发布局的栅格系统。 栅格系统将一行分为12列，通过设定元素占用的列数来布局元素在页面上的展示位置。

  • 栅格特点 “行（row）”包含在 .container或 container-fluid（100% 宽度）中行使用的样式

  • 课堂案例：04.Bootstrap栅格系统1.html

  • 



    
    
    
    Document

    
    
    
    

    




    
    
        
    
            
    1
    
            
    2
    
            
    3
    
            
    4
    
            
    5
    
            
    6
    
            
    7
    
            
    8
    
            
    9
    
            
    10
    
            
    11
    
            
    12
    
        
    

        
    
            
    5
    
            
    5
    
            
    2
    

        
    
        
        
    
            
    4
    
            
    8
    
            
    6
    
        
    
    
    
    -----------
    
    
          
         
    
             
    4
    
             
    
                 
                 
    
                     
    3
    
                     
    9
    
                 
    
             
    
         
    
    
    

    
    
        
    
            
    4
    
            
    
                
    
                        
    1
    
                        
    2
    
                        
    3
    
                        
    4
    
                        
    5
    
                        
    6
    
                        
    7
    
                        
    8
    
                        
    9
    
                        
    10
    
                        
    11
    
                        
    12

  • 课堂案例：05.Bootstrap栅格系统2.html

  • 



    
    
    
    Document

    
    
    
    

    



    
    
        
    
            
    1
    
            
    2
    
            
    3
    
            
    4
    
            
    5
    
            
    6
    
            
    7
    
            
    8
    
            
    9
    
            
    10
    
            
    11
    
            
    12
    
        
    
    
    

    
    
            
    
                
    6
    
                
    4
    
                
    2
    
            
    
        
    

        
        
    
                
    
                    
    1
    
                    
    11

  • 课堂案例：06.Bootstrap栅格系统3.html

  • 



    
    
    
    等宽布局

    
    
    
    

    



    
    
        
    
            
    col
    
            
    col
    
            
    col
    
            
    col
    
        
    
        
    
                
    8
    
                
    4
    
        
    
        

         
    
                
    col
    
                
    col
    
                
    
                
    col
    
                
    col
    
                
    col

第4章 bootstrap公共样式&内容

  • 课堂案例：07.Bootstrap的内容.html

  • 



    
    
    
    内容

    
    
    
    

    



    
    
    h1. Bootstrap heading
    
    
    h2. Bootstrap heading
    
    
    h3. Bootstrap heading
    
    
    h4. Bootstrap heading
    
    
    h5. Bootstrap heading
    
    
    h6. Bootstrap heading
    

    
    Display 1
    
    
    Display 2
    
    
    Display 3
    
    
    Display 4
    

    
      
        
    • 列表之一
      • 
        
    • 列表之二
      • 
        
    • 列表之三
      • 
    
    

    Responsive image

    
    

    
    
            
              
    
                #
                First Name
                Last Name
                Username
              
    
                
            
              
    
                1
                Mark
                Otto
                @mdo
              
    
              
    
                2
                Jacob
                Thornton
                @fat
              
    
              
    
                3
                Larry
                the Bird
                @twitter

  • 课堂案例：08.Bootstrap的公共样式.html

  • 



    
    
    
    公共样式

    
    
    
    




    1111
    2222
    3333
    44444
    55555

    111111
    1111111
    1111111
    11111111
    11111111
    11111111
    1111111
    1111111111
    1111111111

    
    .text-primary
    
    
    .text-secondary
    
    
    .text-success
    
    
    .text-danger
    
    
    .text-warning
    
    
    .text-info
    
    
    .text-light
    
    
    .text-dark
    
    
    .text-body
    
    
    .text-muted
    
    
    .text-white
    
    
    .text-black-50
    
    
    .text-white-50
    

    
    

    
    Primary link
    
    
    Secondary link
    
    
    Success link
    
    
    Danger link
    
    
    Warning link
    
    
    Info link
    
    
    Light link
    
    
    Dark link
    
    
    Muted link
    
    
    White link
    

    
    

    
    .bg-primary
    
    
    .bg-secondary
    
    
    .bg-success
    
    
    .bg-danger
    
    
    .bg-warning
    
    
    .bg-info
    
    
    .bg-light
    
    
    .bg-dark
    
    
    .bg-white
    
    
    .bg-transparent

第5章 bootstrap常用组件

5.1 按钮的样式

  • 课堂案例：09.按钮组件.html

  • 



    
    
    
    Document

    
    
    
    




    
    
    
    
    
    
    
    

    

    
    

    
    
    
    
    
    
    
    

    
    

    

    Primary link
    Link

5.2 轮播图
5.3 导航条
5.4 表单样式（最重要的）

  • 课堂案例：12.表单组件1.html

  • 



    
    
    
    12.表单组件1.html

  • 课堂案例：13.表单组件2.html

  • 



    
    
    
    表单校验

    
    
    
    




    

    
    
        
    
            
    
                
                
                
    
                    满足要求
                
    
            
    
            
    
                
                
                
    
                    密码输入不符合要求
                
    
            
    
            
    
                
                
    
                    
    
                        @
                    
    
                    
                    
    
                        Please choose a username.
                    
    
                
    
            
    
        
    
        
    
            
    
                
                
                
    
                    Please provide a valid city.
                
    
            
    
            
    
                
                
                
    
                    Please provide a valid state.
                
    
            
    
            
    
                
                
                
    
                    Please provide a valid zip.
                
    
            
    
        
    
        
    
            
    
                
                
                
    
                    You must agree before submitting.

第6章 bootstrap综合案例

  • 课堂案例：14.注册页面开发.html

  • 



    
    
    
    Document

    
    
    
    

    

    



    
    
            
    


        
        
    新用户注册
    

        
    
            
            
    
                
                
                    手机号必须是未注册过的.
                
            
    
        
    

        
    
            
            
    
                
                
                    密码必须是6-16位
                
            
    
        
    

        
    
            
            
    
                
                
    
                    两次密码不一致
                
    
            
    
        
    

        
    
            
            
    
                
                
    
                    邮箱不符合格式

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

  • 基于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系统总体设
  • 前端网页开发学习（HTML+CSS+JS）有这一篇就够！ 软件技术NINI html/css笔记前端学习html
    前端网页开发是一个不断发展的领域，涉及到构建和设计网站以及Web应用程序的用户界面。以下是一份全面的学习指南，涵盖HTML、CSS和JavaScript的基础知识，帮助你入门前端开发。HTML（超文本标记语言）1.基础结构文档类型和标签：定义了文档类型和根元素。htmlDocument标签：包含元数据，如字符集、标题和链接到CSS文件。标签：包含网页的可见内容。2.常用标签文本内容：<h
  • JavaScript中的隐式类型转换 阿珊和她的猫 javascript开发语言ecmascript
    前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。文章
  • 分布式服务接口的幂等性如何设计（比如不能重复扣款）？ 码农小旋风 后端
    面试题分布式服务接口的幂等性如何设计（比如不能重复扣款）？面试官心理分析从这个问题开始，面试官就已经进入了实际的生产问题的面试了。一个分布式系统中的某个接口，该如何保证幂等性？这个事儿其实是你做分布式系统的时候必须要考虑的一个生产环境的技术问题。啥意思呢？你看，假如你有个服务提供一些接口供外部调用，这个服务部署在了5台机器上，接着有个接口就是付款接口。然后人家用户在前端上操作的时候，不知道为啥，总
  • SpringBoot(2) —— 什么是微服务架构 原来是小别扇 SpringBootspringboot分布式java
    微服务1.什么是微服务？微服务是一种架构风格(前面学习的RestFul风格也就是一种风格，但是它是接口风格，而微服务是一种架构风格，我们学习过的架构风格有后端开发的MVC3层架构和MVVM前端架构)，它要求我们在开发一个应用的时候，这个应用必须构建成一系列小服务的组合；可以通过http的方式进行互通。要说微服务架构，先得说说过去我们的单体应用架构。2.单体应用架构所谓单体应用架构（allinone
  • 基于Bootstrap 3可预览的HTML5文件上传插件 �时过境迁，物是人非 bootstraphtml5okhttp
    bootstrap-fileinput是一款基于Bootstrap3.x的HTML5文件上传插件。该文件上传插件带有预览图效果，可同时选择多个文件。该插件使用bootstrapCSS3样式来制作文件上传界面，美观大方。并且它提供了多国语言，你可以选择使用中文。在线预览下载该文件上传插件比普通的文件上传插件功能更强大，它可以对图片、文本文件、HTML文件、视频文件、音频文件、flash文件生成预览图
  • web api 与html 部署,详解.net core webapi 前后端开发分离后的配置和部署 万小柯要努力学习 webapi与html部署
    背景：现在越来越多的企业都采用了在开发上前后端分离，前后端开发上的分离有很多种，那么今天，我来分享一下项目中得的前后端分离。B/SSaas项目：(这个项目可以理解成个人中心，当然不止这么点功能)前端：node.js+vue后端：.netcorewebapi前端安装node.js跟创建vue项目这些不是这篇文章的重点，重点在于项目完成后的部署。.netcorewebapi创建后，默认就创建了一个ww
  • 【java】RuoYi-Vue前后端分离版本-登陆请求流程解析 橙-极纪元JJY.Cheng javaRuoYi-VueRuoYi
    【java】RuoYiBootstrap多模块版本-登陆请求流程解析这里它用到了一个安全管理框架SpringSecurity你可以通过这篇文章《SpringSecurity详解》去了解它，怎么使用登陆请求流程逻辑图CreatedwithRaphaël2.3.0
  • Vue3配置vite.config.js代理解决跨域问题 码喽的自我修养 vue2/3从基础到起飞前端工程搭建javascript开发语言ecmascriptvue.js前端nginx
    前言：当浏览器发出一个请求时，只要请求URL的协议、域名、端口三者之间任意一个与当前页面URL不同，就称为跨域。跨域一般出现在开发阶段,由于线上环境前端代码被打包成了静态资源,因而不会出现跨域问题,这篇文章主要给大家介绍了关于Vue3配置vite.config.js解决跨域问题的相关资料,创作不易，如果能帮助到带大家，欢迎收藏+关注哦问题再现后台报错：AccesstoXMLHttpRequesta
  • 前端使用 Element Plus架构vue3.0实现图片拖拉拽，后等比压缩，上传到Spring Boot后端 慧香一格 java微服务web前端架构springboot
    图片拖拉拽等比压缩上传为了在前端对图片文件进行等比压缩后再上传到后端，可以使用canvas元素来实现图片的压缩。以下是一个详细的实现步骤：前端实现图片等比压缩：使用canvas元素对图片进行压缩。前端上传压缩后的图片：使用el-upload组件上传压缩后的图片。后端接收并保存图片：在SpringBoot中接收上传的图片并保存。下面是一个详细的实现示例。1.前端实现图片等比压缩首先，确保你已经安装了
  • Web前端最全Koa 基础篇（二）—— 路由与中间件(1)，前端组件化架构实践 2401_84447112 程序员前端中间件架构
    最后如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】基本使用router.get(“/”,asyncctx=>{ctx.body=“h
  • 软件架构原理与实战：深入理解BFF模式及其在微服务中的应用 AI天才研究院 AI实战AI大模型企业级应用开发实战大数据人工智能语言模型AILLMJavaPython架构设计AgentRPA
    1.背景介绍随着互联网的不断发展，软件架构也不断演进，微服务架构成为了当前最流行的软件架构之一。微服务架构将软件应用程序划分为一系列小的服务，每个服务都独立部署和扩展。这种架构的优点在于它的灵活性、可扩展性和容错性。在微服务架构中，服务之间通过网络进行通信，因此需要一种适合网络通信的架构模式。这就是BFF模式的诞生。BFF（BackingFrontend）模式是一种软件架构模式，它将前端应用程序与
  • JavaScript网页设计案例：响应式动态购物车 学不完了是吧 jsjavascript
    在现代网页开发中，购物车是电子商务网站的重要功能之一。通过JavaScript，我们可以实现一个响应式动态购物车，提供用户友好的体验，并展示前端开发的核心能力。案例需求我们的购物车需要实现以下功能：动态添加商品：用户可以从商品列表中选择并添加商品到购物车。实时更新：购物车的商品数量、价格和总金额自动更新。修改商品数量：用户可以调整购物车中商品的数量。移除商品：用户可以从购物车中移除商品。结算功能：
  • 2025年React前端路线图：从初级到高级 倔强青铜3 React成神之路前端react.js前端框架javascript
    2025年React前端路线图：从初级到高级原文链接：2025ReactFrontendRoadmap:BeginnertoSeniorLevel作者：tak089译者：倔强青铜三前言大家好，我是倔强青铜三。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！1.初级（入门级）目标：
  • workman服务端开发模式-应用开发-总架构逻辑说明 龙哥·三年风水 PHP长链接分布式分布式phpgateway
    一、后台管理端(操作页面端)管理员用浏览器打开页面管理端后，页面管理端会自动检测，如果本地cookie不存在的情况下，跳转到登录页面，如果本地cookie存在的情况下，跳转到首页。登录的情况下，就不说，后面在业务架构里面会说明的。在登录页面输入邮箱账号、密码、验证码，点击提交。提交之前会在前端进行类型及相应的格式验证，如果验证结果都是OK的情况下，将参数提交到api接口中，等待返回结果。如果api
  • AIGC时代的Vue或React前端开发 GISer_Jinger JavascriptReactVueAIGCvue.jsreact.js
    在AIGC（人工智能生成内容）时代，Vue开发正经历着深刻的变革。以下是对AIGC时代Vue开发的详细分析：一、AIGC技术对Vue开发的影响代码生成与自动化AIGC技术使得开发者能够借助智能工具快速生成和优化Vue代码。例如，通过自然语言处理模型（如ChatGPT），开发者可以描述组件的功能和样式需求，然后自动生成包含模板、脚本和样式的完整组件代码。这不仅大大提高了开发效率，还减少了人为错误的可
  • WSL开发环境配置（linux + python + nodejs + docker） Lilixxs 环境搭建基础设施linux运维服务器
    配置要求及目标总体目标：完整的Linux开发环境可开发基于node.js的前端程序可开发基于python的后端程序（仅日常程序，不包含机器学习程序）可运行docker容器，用于快速搭建测试环境Linux环境要求支持centos发行版类似的操作方式和指令（如使用rpm、dnf进行软件包管理）登录用户具有root权限（执行高权限命令，输入sudo即可执行）可从国内源更新软件基本优化：内核指令优化、禁用
  • 「前端工具」postman接口测试工具详解 吴维炜 前端就那么回事postman前端工具API开发工具RESTfulAPIpostman自动化测试
    Postman是一款流行的API开发工具，用于构建和测试RESTfulAPI。以下是Postman的一些关键特性和使用方法的详解：1.界面和基本操作工作区：Postman的主界面，用于显示集合、环境和全局变量。请求构建器：用于输入请求的URL、HTTP方法、请求头、请求体等。响应区：显示服务器的响应，包括状态码、响应头和响应体。2.创建请求GET请求：获取资源。POST请求：提交新资源。PUT请求
  • 【Numpy核心编程攻略：Python数据处理、分析详解与科学计算】1.25 视觉风暴：NumPy驱动数据可视化 精通代码大仙 numpypythonnumpypython信息可视化
    1.25视觉风暴：NumPy驱动数据可视化目录视觉风暴：NumPy驱动数据可视化百万级点云实时渲染优化CT医学影像三维重建实战交互式数据分析看板开发地理空间数据可视化进阶WebAssembly前端渲染融合1.25.1百万级点云实时渲染优化1.25.2CT医学影像三维重建实战1.25.3交互式数据分析看板开发1.25.4地理空间数据可视化进阶1.25.5WebAssembly前端渲染融合视觉风暴：N
  • 【自学笔记】JavaWeb的重点知识点-持续更新 Long_poem 笔记javaweb
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录JavaWeb知识点一、基础概念二、项目结构三、Tomcat服务器四、数据库连接（JDBC）五、前端技术六、高级技术总结以下是JavaWeb知识点的MD格式罗列：JavaWeb知识点一、基础概念静态Web与动态Web静态Web：页面内容固定不变，每次访问都返回相同的内容。动态Web：页面内容可以根据请求或用户输入而变化。网站访
  • 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
  • 基于HarmonyOS 5.0 Next的应用开发设计模式与前端框架的架构整合与实践【附代码实例】 一键难忘 精通AI实战千例专栏合集harmonyos设计模式前端框架
    文章目录HarmonyOS5.0Next应用开发：架构设计中的设计模式与前端框架设计HarmonyOS5.0Next概览设计模式在HarmonyOS应用开发中的应用单例模式工厂模式观察者模式设计模式的使用分层架构设计1.公共能力层（CommonLayer）2.基础特性层（FeatureLayer）3.产品定制层（ProductLayer）模块化设计1.模块化结构2.模块化代码示例前端框架的设计Ar
  • 《亿级流量下的架构实战：HTTP全链路解析与智能监控系统搭建》 我的青春不太冷 架构http网络协议科技经验分享学习网络
    文章目录全链路解析：HTTP请求响应与数据可视化监控一、HTTP请求响应全流程解析1.全链路交互流程图2.关键技术实现2.1前端请求构造（ES6+语法示例）2.2服务端处理架构（Node.js/Express）二、数据可视化监控方案1.数据存储架构设计2.数据库操作层实现3.管理界面实现方案3.1可视化看板路由//routes/admin.js3.2数据可视化模板（EJS示例）4.最佳实践建议4.
  • Vue - route路由（router-link、useRoute、useRouter） 来一碗刘肉面 Vuevue.jsjavascript前端
    为了避免反复在app.vue中去修改引入的路径，当用了新的页面，想切换回老页面的时候，都需要去手动改变路径，那么有没有一种可能，可以在一个地方，把这些组件配置好，然后通过不同的路径，就去访问不同的组件呢？vuerouter就提供了这个功能，翻译一下，router：路由，vuerouter，vue的路由。单页面应用：SPASPA的核心思想是将应用划分为多个组件，通过前端路由来控制不同组件的显示，实现
  • 优化冗余代码：提升前端项目开发效率的实用方法 三掌柜666 web前端知识汇总前端
    目录前言代码复用与组件化模块化开发与代码分割工具辅助与自动化结束语前言在前端开发中，我们常常会遇到代码冗余的问题，这不仅增加了代码量，还影响了项目的可维护性和开发效率。还有就是有时候会接到紧急业务需求，要求立马完成上线，这时候多人协作开发，代码质量不会很高，很多都是复制粘贴;亦或是接手的代码比较老旧，公共组件里面写了大量冗余代码，这种情况下时间越久，开发起来就越难受。那么本文将结合实际项目案例，分
  • 前端学习-事件解绑，mouseover和mouseenter的区别(二十九) marshalVS 前端学习
    目录前言解绑事件语法鼠标经过事件的区别鼠标经过事件示例代码两种注册事件的区别总结前言人道洛阳花似锦，偏我来时不逢春解绑事件on事件方式，直接使用null覆盖就可以实现事件的解绑语法btn.onclick=function(){alert('点击了')}btn.onclick=null;constben=document.querySelector('button');ben.addEventLis
  • 毕设开源 python大数据旅游数据分析可视化系统(源码分享) bee_dc 毕业设计毕设大数据
    文章目录0前言1课题背景2数据处理3数据可视化工具3.1django框架介绍3.2ECharts4Django使用echarts进行可视化展示（mysql数据库）4.1修改setting.py连接mysql数据库4.2导入数据4.3使用echarts可视化展示5实现效果5.1前端展示5.2后端展示6最后0前言这两年开始毕业设计和毕业答辩的要求和难度不断提升，传统的毕设题目缺少创新和亮点，往往达不到
  • java 字符串日期字段格式化前端显示 qq_36608622 java开发语言
    在Java应用程序中，如果你有一个字符串类型的日期字段，并希望将其格式化后显示在前端，可以通过多种方式实现。这通常涉及到在后端将字符串转换为Date或LocalDateTime等对象，然后使用适当的注解或配置来确保它们以正确的格式序列化为JSON发送到前端。以下是几种常见方法：方法一：使用@JsonFormat注解(Jackson)如果你使用的是Jackson来处理JSON序列化和反序列化，可以在
  • 前端知识速记—JS篇：箭头函数 无限大. 前端知识速记javascript前端开发语言
    前端知识速记—JS篇：箭头函数什么是箭头函数？箭头函数是ES6引入的一种新的函数书写方式，其语法更为简洁，常用于替代传统的函数表达式。箭头函数的基本语法如下：constfunctionName=(parameters)=>{//函数体};通过这种方式，开发者可以以更简练的形式定义函数，提高代码的可读性。箭头函数的基本特性1.简化语法箭头函数最直接的优势就是语法简单，特别是在定义短小的函数时，能显著
  • ambari-server页面错位问题解决 王木头 ambarihadoop大数据
    背景：项目新安装的ambari集群页面错位如下解决办法（临时）：修改ambari-server的前端文件：/usr/lib/ambari-server/web/javascripts/app.js原代码：initNavigationBar:function(){if(App.get('router.mainController.isClusterDataLoaded')){$('body').on
  • linux系统服务器下jsp传参数乱码 3213213333332132 javajsplinuxwindowsxml
    在一次解决乱码问题中， 发现jsp在windows下用js原生的方法进行编码没有问题，但是到了linux下就有问题， escape,encodeURI,encodeURIComponent等都解决不了问题 但是我想了下既然原生的方法不行，我用el标签的方式对中文参数进行加密解密总该可以吧。于是用了java的java.net.URLDecoder,结果还是乱码，最后在绝望之际，用了下面的方法解决了
  • Spring 注解区别以及应用 BlueSkator spring
    1. @Autowired @Autowired是根据类型进行自动装配的。如果当Spring上下文中存在不止一个UserDao类型的bean，或者不存在UserDao类型的bean，会抛出 BeanCreationException异常，这时可以通过在该属性上再加一个@Qualifier注解来声明唯一的id解决问题。   2. @Qualifier 当spring中存在至少一个匹
  • printf和sprintf的应用 dcj3sjt126com PHPsprintfprintf
    <?php printf('b: %b <br>c: %c <br>d: %d <bf>f: %f', 80,80, 80, 80); echo '<br />'; printf('%0.2f <br>%+d <br>%0.2f <br>', 8, 8, 1235.456); printf('th
  • config.getInitParameter 171815164 parameter
    web.xml <servlet> <servlet-name>servlet1</servlet-name> <jsp-file>/index.jsp</jsp-file> <init-param> <param-name>str</param-name>
  • Ant标签详解--基础操作 g21121 ant
            Ant的一些核心概念：         build.xml：构建文件是以XML 文件来描述的，默认构建文件名为build.xml。        project：每个构建文
  • [简单]代码片段_数据合并 53873039oycg 代码
            合并规则:删除家长phone为空的记录,若一个家长对应多个孩子,保留一条家长记录,家长id修改为phone,对应关系也要修改。         代码如下:        
  • java 通信技术 云端月影 Java 远程通信技术
    在分布式服务框架中，一个最基础的问题就是远程服务是怎么通讯的，在Java领域中有很多可实现远程通讯的技术，例如：RMI、MINA、ESB、Burlap、Hessian、SOAP、EJB和JMS等，这些名词之间到底是些什么关系呢，它们背后到底是基于什么原理实现的呢，了解这些是实现分布式服务框架的基础知识，而如果在性能上有高的要求的话，那深入了解这些技术背后的机制就是必须的了，在这篇blog中我们将来
  • string与StringBuilder 性能差距到底有多大 aijuans
              之前也看过一些对string与StringBuilder的性能分析，总感觉这个应该对整体性能不会产生多大的影响，所以就一直没有关注这块！         由于学程序初期最先接触的string拼接，所以就一直没改变过自己的习惯！        
  • 今天碰到 java.util.ConcurrentModificationException 异常 antonyup_2006 java多线程工作IBM
    今天改bug，其中有个实现是要对map进行循环，然后有删除操作，代码如下： Iterator<ListItem> iter = ItemMap.keySet.iterator(); while(iter.hasNext()){ ListItem it = iter.next(); //...一些逻辑操作 ItemMap.remove(it); } 结果运行报Con
  • PL/SQL的类型和JDBC操作数据库 百合不是茶 PL/SQL表标量类型游标PL/SQL记录
    PL/SQL的标量类型:    字符,数字,时间,布尔,%type五中类型的 --标量：数据库中预定义类型的变量 --定义一个变长字符串 v_ename varchar2(10); --定义一个小数,范围 -9999.99~9999.99 v_sal number(6,2); --定义一个小数并给一个初始值为5.4 :=是pl/sql的赋值号
  • Mockito：一个强大的用于 Java 开发的模拟测试框架实例 bijian1013 mockito单元测试
    Mockito框架：         Mockito是一个基于MIT协议的开源java测试框架。         Mockito区别于其他模拟框架的地方主要是允许开发者在没有建立“预期”时验证被测系统的行为。对于mock对象的一个评价是测试系统的测
  • 精通Oracle10编程SQL(10)处理例外 bijian1013 oracle数据库plsql
    /* *处理例外 */ --例外简介 --处理例外-传递例外 declare v_ename emp.ename%TYPE; begin SELECT ename INTO v_ename FROM emp where empno=&no; dbms_output.put_line('雇员名：'||v_ename); exceptio
  • 【Java】Java执行远程机器上Linux命令 bit1129 linux命令
    Java使用ethz通过ssh2执行远程机器Linux上命令，   封装定义Linux机器的环境信息   package com.tom; import java.io.File; public class Env { private String hostaddr; //Linux机器的IP地址 private Integer po
  • java通信之Socket通信基础 白糖_ javasocket网络协议
    正处于网络环境下的两个程序，它们之间通过一个交互的连接来实现数据通信。每一个连接的通信端叫做一个Socket。一个完整的Socket通信程序应该包含以下几个步骤： ①创建Socket； ②打开连接到Socket的输入输出流； ④按照一定的协议对Socket进行读写操作； ④关闭Socket。   Socket通信分两部分：服务器端和客户端。服务器端必须优先启动，然后等待soc
  • angular.bind boyitech AngularJSangular.bindAngularJS APIbind
    angular.bind 描述：         上下文，函数以及参数动态绑定，返回值为绑定之后的函数. 其中args是可选的动态参数，self在fn中使用this调用。 使用方法：          angular.bind(se
  • java-13个坏人和13个好人站成一圈，数到7就从圈里面踢出一个来，要求把所有坏人都给踢出来，所有好人都留在圈里。请找出初始时坏人站的位置。 bylijinnan java
    import java.util.ArrayList; import java.util.List; public class KickOutBadGuys { /** * 题目：13个坏人和13个好人站成一圈，数到7就从圈里面踢出一个来，要求把所有坏人都给踢出来，所有好人都留在圈里。请找出初始时坏人站的位置。 * Maybe you can find out
  • Redis.conf配置文件及相关项说明（自查备用） Kai_Ge redis
       Redis.conf配置文件及相关项说明 # Redis configuration file example # Note on units: when memory size is needed, it is possible to specifiy # it in the usual form of 1k 5GB 4M and so forth: #
  • [强人工智能]实现大规模拓扑分析是实现强人工智能的前奏 comsci 人工智能
         真不好意思,各位朋友...博客再次更新...      节点数量太少,网络的分析和处理能力肯定不足,在面对机器人控制的需求方面,显得力不从心....      但是,节点数太多,对拓扑数据处理的要求又很高,设计目标也很高,实现起来难度颇大...
  • 记录一些常用的函数 dai_lm java
    public static String convertInputStreamToString(InputStream is) { StringBuilder result = new StringBuilder(); if (is != null) try { InputStreamReader inputReader = new InputStreamRead
  • Hadoop中小规模集群的并行计算缺陷 datamachine mapreducehadoop并行计算
    注：写这篇文章的初衷是因为Hadoop炒得有点太热，很多用户现有数据规模并不适用于Hadoop，但迫于扩容压力和去IOE（Hadoop的廉价扩展的确非常有吸引力）而尝试。尝试永远是件正确的事儿，但有时候不用太突进，可以调优或调需求，发挥现有系统的最大效用为上策。 -----------------------------------------------------------------
  • 小学4年级英语单词背诵第二课 dcj3sjt126com englishword
    egg  蛋 twenty 二十 any 任何 well 健康的，好   twelve 十二 farm 农场 every 每一个 back 向后，回   fast 快速的 whose 谁的 much 许多 flower 花   watch 手表 very 非常，很 sport 运动 Chinese 中国的  
  • 自己实践了github的webhooks, linux上面的权限需要注意 dcj3sjt126com githubwebhook
    环境, 阿里云服务器   1. 本地创建项目, push到github服务器上面   2. 生成www用户的密钥 sudo -u www ssh-keygen -t rsa -C "[email protected]"     3. 将密钥添加到github帐号的SSH_KEYS里面   3. 用www用户执行克隆, 源使
  • Java冒泡排序 蕃薯耀 冒泡排序Java冒泡排序Java排序
    冒泡排序 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月23日 10:40:14 星期二 http://fanshuyao.iteye.com/
  • Excle读取数据转换为实体List【基于apache-poi】 hanqunfeng apache
    1.依赖apache-poi   2.支持xls和xlsx   3.支持按属性名称绑定数据值   4.支持从指定行、列开始读取   5.支持同时读取多个sheet   6.具体使用方式参见org.cpframework.utils.excelreader.CP_ExcelReaderUtilTest.java 比如： Str
  • 3个处于草稿阶段的Javascript API介绍 jackyrong JavaScript
    原文： http://www.sitepoint.com/3-new-javascript-apis-may-want-follow/?utm_source=html5weekly&utm_medium=email   本文中，介绍3个仍然处于草稿阶段，但应该值得关注的Javascript API. 1) Web Alarm API   &
  • 6个创建Web应用程序的高效PHP框架 lampcy Web框架PHP
    以下是创建Web应用程序的PHP框架，有coder bay网站整理推荐： 1. CakePHP CakePHP是一个PHP快速开发框架，它提供了一个用于开发、维护和部署应用程序的可扩展体系。CakePHP使用了众所周知的设计模式，如MVC和ORM，降低了开发成本，并减少了开发人员写代码的工作量。 2. CodeIgniter CodeIgniter是一个非常小且功能强大的PHP框架，适合需
  • 评"救市后中国股市新乱象泛起"谣言 nannan408
    首先来看百度百家一位易姓作者的新闻： 三个多星期来股市持续暴跌，跌得投资者及上市公司都处于极度的恐慌和焦虑中，都要寻找自保及规避风险的方式。面对股市之危机，政府突然进入市场救市，希望以此来重建市场信心，以此来扭转股市持续暴跌的预期。而政府进入市场后，由于市场运作方式发生了巨大变化，投资者及上市公司为了自保及为了应对这种变化，中国股市新的乱象也自然产生。 首先，中国股市这两天
  • 页面全屏遮罩的实现 方式 Rainbow702 htmlcss遮罩mask
    之前做了一个页面，在点击了某个按钮之后，要求页面出现一个全屏遮罩，一开始使用了position:absolute来实现的。当时因为画面大小是固定的，不可以resize的，所以，没有发现问题。 最近用了同样的做法做了一个遮罩，但是画面是可以进行resize的，所以就发现了一个问题，当画面被reisze到浏览器出现了滚动条的时候，就发现，用absolute 的做法是有问题的。后来改成fixed定位就
  • 关于angularjs的点滴 tntxia AngularJS
      angular是一个新兴的JS框架，和以往的框架不同的事，Angularjs更注重于js的建模，管理，同时也提供大量的组件帮助用户组建商业化程序，是一种值得研究的JS框架。   Angularjs使我们可以使用MVC的模式来写JS。Angularjs现在由谷歌来维护。   这里我们来简单的探讨一下它的应用。   首先使用Angularjs我
  • Nutz--->>反复新建ioc容器的后果 xiaoxiao1992428 DAOmvcIOCnutz
    问题： public class DaoZ {     public static Dao dao() { // 每当需要使用dao的时候就取一次     Ioc ioc = new NutIoc(new JsonLoader("dao.js"));     return ioc.get(
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他