GENIUSROAD
GENIUSROAD

Bootstrap3学习笔记

目录

  • 1.环境的搭建
  • 2.布局容器
  • 3. 样式(1)
      • 1.标题
      • 2.文本对齐方式
      • 3.英文大小写
      • 4.列表
      • 5.*表格
      • 6.图片
      • 7.标签与徽章
  • 4.*栅格系统
  • 5.辅助类
      • 1.情景文本颜色
      • 2.背景文本颜色
      • 3.下拉三角
      • 4.快速浮动
      • 5.
        样式
  • 6. 样式(2)
      • 1.*表单
      • 2.*响应式表单
      • 3.按钮
      • 4.下拉菜单(列表)
      • 5.标签页
      • 6.导航栏
      • 7.分页
      • 8.面包屑导航

1.环境的搭建

将jquery.js放入bootstrap/js文件夹下，将bootstrap文件夹放入前端项目的根目录。
Bootstrap3学习笔记_第1张图片
在标签里引入如下路径，完成环境搭建。


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

<script src="bootstrap/js/jquery.min.js">script>

<script src="bootstrap/js/bootstrap.min.js">script>

如果以移动设备为优先，在标签下方写入如下代码。


<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

2.布局容器

因为使用bootstrap一般都会用栅格系统，栅格系统必须放在布局容器中，所以自觉加上布局容器。容器不建议嵌套。


<div class="container">

div>

或


<div class="container-fluid">

div>

3. 样式(1)

1.标题

36px

30px

24px

18px
14px
12px

36px

30px

24px

18px

14px
12px

推荐使用以下样式：

标签 说明 效果
小一号 小一号 小一号
大一号 大一号 大一号
强调（加粗） 强调（加粗） 强调（加粗）
删除线 删除线 删除线

2.文本对齐方式

左对齐：class="text-left"
右对齐：class="text-right"
居中对齐：class="text-center"

3.英文大小写

字母大写：class="text-uppercase"
字母小写：class="text-lowercase"
首字母大写：class="text-capitalize"

4.列表

<ul>
	<li>孙悟空li><li>猪八戒li><li>沙悟净li>
ul>
  • 孙悟空
  • 猪八戒
  • 沙悟净

.list-unstyled

    去掉前面的符号和原有的样式
    .list-inline
      横向排列

      自定义列表：

      <dl>
	<dt>标题dt>
	<dd>标题解释dd>
dl>

      .dl-horizontal

      横向排列

      5.*表格

      .table是表格样式的基类，如果加其他样式，都在此基础上再加。如：class="table table-bordered"
      特效类

      标签 说明
      .table-bordered 给表格加边框
      .table-hover 鼠标悬停，行变色效果
      .table-striped 隔行换色效果
      .table-condensed 行间距变小或单元格
      ..table-responsive #变成响应式表格，用于移动设备。

      状态颜色类
      以下样式为行

      设置

      标签 说明
      .active 默认灰
      .success 成功绿
      .info 提示蓝
      .warning 警告橙
      .danger 危险红

      6.图片

      标签 说明
      .img-responsive 响应式图片（与栅格系统搭配使用）
      .img-circle 图片变圆形
      .img-rounded 圆角矩形
      .img-thumbnail 加圆角边框

      7.标签与徽章

      标签

      <span class="label label-primary">
	DOTA2
span>

      徽章

      <span class="badge">DOTA2span>

      4.*栅格系统

      1.基本内容
              Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（col）的组合来创建页面布局，内容就可以放入这些创建好的布局中。
              栅格系统一定要放到容器

      或
      中。

      <head>
	<style> /*div中class包含col-的*/ div[class*="col-"]{border: 1px solid red;} /*div中class以col-开头的*/ div[class^="col-"]{border: 1px solid red;} style>
head>
<body>
	
	<div class="container">
		
		<div class="row">
			
			<div class="col-md-3">3div>
			<div class="col-md-4">4div>
			<div class="col-md-5">5div>
		div>
	div>
body>

      2.栅格参数
      Bootstrap3学习笔记_第2张图片

      • 栅格偏移(offset)
        只能向右偏移。
        语法：col-xs/sm/md/lg-offset-数值
      <div class="container">
	<div class="row">
		<div class="col-md-3">3div>
		
		<div class="col-md-4 col-md-offset-5">4div>
	div>
div>
      • 栅格排列(偏移可以实现，只做了解)
        语法：
        向左偏移 col-xs/sm/md/lg-pull
        向右偏移 col-xs/sm/md/lg-push
      <div class="row">
	
	<div class="col-md-3 col-md-push-9">3div>
	
	<div class="col-md-9 col-md-pull-3">9div>
div>

      5.辅助类

      1.情景文本颜色

      - 说明
      .text-muted 柔和
      .text-primary 初始蓝
      .text-success 成功绿
      .text-info 提示棕
      .text-warning 警告黄
      .text-danger 危险红

      2.背景文本颜色

      - 说明
      .bg-primary 初始蓝
      .bg-success 成功绿
      .bg-info 提示棕
      .bg-warning 警告黄
      .bg-danger 危险红

      3.下拉三角

      // ！！！标签之间没有内容
<span class="caret">span>

      4.快速浮动

      <div class="top">
	<div class="pull-left">我在左边div>
	<div class="pull-right">我在右边div>
div>

      清除浮动(给父元素加)..clearfix

      5.
      样式

      - 说明
      .thumbnail
      加边框
      .jumbotron
      版块样式

      6. 样式(2)

      1.*表单

      - 说明
      .form-group
      让label与input组队(其实就是让整体下方有一定的间距)
      .disabled
      .form-inline 表单行内显示，给
      加(因为不好看，所以不推荐使用)

      文本框
      .form-control一种(多行)文本框/输入框特效(常用)

      <div class="form-group">
	<label for="user">用户名：label>
	<input type="text" id="user" class="form-control"/>
div>
<div class="form-group">
	<label for="pwd">密码：label>
	<input type="password" id="pwd" class="form-control"/>
div>

      效果图：
      Bootstrap3学习笔记_第3张图片
      单选框
      .radio-inline

      <div class="form-group">
	<label class="radio-inline"><input type="radio" name="sex"/>男label>
	<label class="radio-inline"><input type="radio" name="sex"/>女label>
div>

      效果图：
      在这里插入图片描述
      复选框
      .checkbox-inline

      <div class="form-group">
	<label class="checkbox-inline"><input type="checkbox"/>下棋label>
	<label class="checkbox-inline"><input type="checkbox"/>书法label>
	<label class="checkbox-inline disabled"><input type="checkbox" disabled/>绘画label>
div>

      效果图：
      在这里插入图片描述
      输入框组
      .input-group

      把文字与输入框组合到一起
      .input-group-addon加给文字的标签，加上就行，有改变但是不好说(QAQ)

      <div class="form-group">
	<div class="input-group">
		<span class="input-group-addon">搜索span>
		<input type="search" class="form-control"/>
	div>
	<div class="input-group">
		<span class="input-group-addon">
			<span class="glyphicon glyphicon-user">span>
		span>
		<input type="search" class="form-control" />
	div>
div>

      效果图：
      在这里插入图片描述

      2.*响应式表单

      .form-horizontal变成响应式表单，与栅格系统一起使用。
      响应式表单加入栅格系统，
      1.表单可以不加行(row)，只需加列(col)即可。
      2. 可以给

      <form class="form-horizontal">
	<div class="form-group">
		<label class="col-md-2" for="username">用户名：label>
		<div class="col-md-10">
			<input type="text" id="username" class="form-control"/>
		div>
	div>
form>

      3.按钮

      以下标签都可以加按钮样式

      <input type="button" value="按钮"/>
<input type="submit" value="提交"/>
<button>按钮button>
<a href="#">内容a>

      .btn是按钮样式的基类，如果加其他样式，都在此基础上再加。如：class="btn btn-primary">
      .btn-group

      按钮组(给父元素加)
      颜色类

      - 说明
      .btn-default 默认白
      .btn-primary 初始蓝
      .btn-success 成功绿
      .btn-warning 警告橙
      .btn-danger 危险红

      状态类

      - 说明
      .active 激活状态
      .disabled 禁用状态

      大小类

      - 说明
      .btn-lg 特大
      .默认 中等
      .btn-sm 小
      .btn-xs 超小

      .btn-block 块级按钮，横跨父元素的全部宽度
      在这里插入图片描述

      4.下拉菜单(列表)

      .dropdown 给容器加
      data-toggle="dropdown" 触发器，给按钮加(点谁给谁加)
      class="dropdown-menu"


        class="divider"
      • 列表分隔线，
          和
        之间没有内容

        <div class="dropdown">
	<button class="btn btn-primary" data-toggle="dropdown">
		英雄<span class="caret">span>
	button>
	<ul class="dropdown-menu">
		<li><a href="#">灰烬之灵a>li>
		<li><a href="#">大地之灵a>li>
		<li class="divider">li>
		<li><a href="#">风暴之灵a>li>
		<li><a href="#">齐天大圣a>li>
	ul>
div>

        5.标签页

        .nav-stacked

          垂直排列
          普通型
          在这里插入图片描述

          <ul class="nav nav-tabs">
	<li class="active"><a href="#">首页a>li>
	<li><a href="#">分类a>li>
	<li><a href="#">账户a>li>
ul>

          胶囊型
          在这里插入图片描述

          <ul class="nav nav-pills">
	<li class="active"><a href="#">首页a>li>
	<li><a href="#">分类a>li>
	<li><a href="#">账户a>li>
ul>

          6.导航栏

          - 说明
          .navbar
          .navbar-default
          .navbar-fixed-top
          .navbar-fixed-bottem
          .navbar-inverse
          .container 
          <nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
		<h1><big>人人网big>h1>
	div>
nav>

          7.分页

          .pagination

            分页样式，简单粗暴~
            在这里插入图片描述

            <ul class="pagination">
	<li><a href="#">«a>li>
	<li class="active"><a href="#">1a>li>
	<li><a href="#">2a>li>
	<li><a href="#">3a>li>
	<li><a href="#">»a>li>
ul>

            8.面包屑导航

            <ol class="breadcrumb">
	<li><a href="#">首页a>li>
	<li><a href="#">拉拉a>li>
	<li><a href="#">拉什么a>li>
ol>

      你可能感兴趣的:(前端)

      • Go分布式爬虫笔记(八)_golang分布式爬虫 2401_87299701 golang分布式爬虫
        +爬虫引擎为基础的推送系统+提供-快速的热点事件-事件预警用户需求快速了解自己感兴趣的最新新闻事件预警机制帮助快速决策功能需求用户填写或选择自己感兴趣的话题、感兴趣的网站还有消息接受频率用户接收最新热点事件的推送用户通过点击获取与该事件关联的事件，并得到相关的事件预测、预警，甚至可能在网站中进行快速的交易用户可以查看历史记录，可视化呈现某一个事件的来龙去脉，并进行复盘产品需求前端页面设计用户交互设
      • web速览 qzhqbb web前端web
        web速览1.前端开发概述：前端开发是构建网站用户界面的过程，主要关注网站的视觉效果和用户体验。又称为客户端技术栈：HTML（超文本标记语言）：用于创建网页的结构和内容。CSS（层叠样式表）：用于样式和布局设计，包括颜色、字体、边距等。JavaScript：用于实现网页的交互性和动态效果。前端框架：React：一个用于构建用户界面的JavaScript库，采用组件化设计。Vue.js：一个渐进式的
      • Spring MVC 中的 DispatcherServlet：工作流程与应用场景解析 码农小灰 SpringMVC面试题SpringBootspringmvcjava
        目录一、初始化阶段二、请求处理阶段三、异常处理四、使用场景说明在SpringMVC框架中，DispatcherServlet扮演着至关重要的角色，它作为前端控制器（FrontController），负责接收客户端的HTTP请求，并根据配置将其分发给相应的处理器进行处理。以下是对其工作流程的详细解析，并结合使用场景进行说明。一、初始化阶段加载配置文件：DispatcherServlet在启动时会读取
      • 使用 AI 助手提升前端代码质量：自动代码审查实战 技术出海录 远洋录·技术篇人工智能前端
        最近在带团队的时候，发现代码审查（CodeReview）总是成为项目进度的一个瓶颈。一方面，高级工程师的时间很宝贵，不可能审查每一行代码；另一方面，初级工程师又急需及时的反馈来提升。于是我就在想：能不能用AI来解决这个问题？经过一番研究和实践，我搭建了一个AI代码审查助手，效果出乎意料的好！今天就来分享下这个小工具是怎么做的。为什么需要AI代码审查？说实话，最开始团队里有不少质疑的声音：“AI能审
      • 用Python写前端 eternity_ld 前端python开发语言
        分享一个让开发交互式Webapp超级简单的工具。不会HTML，CSS，JAVASCRIPT也没事。交互式Webapp非常实用，比如说做一个问卷调查页面、一个投票系统、一个信息收集表单，上传文件等等，因为网页是可视化的，因此还可以作为一个没有服务端的图片界面应用程序而使用。如果你有这样的开发需求，那用Python真的是太简单了。借助于PyWebIO（pipinstallpywebio），你可以分分钟
      • 【全栈】SprintBoot+vue3迷你商城-扩展：vue的基本用法 杰九 vue.js前端springboot
        【全栈】SprintBoot+vue3迷你商城-扩展：vue的基本用法在进行前端开发之前，需要熟悉vue的一些基本用法，这里举例了一些常见的基本用法1.v-if,v-else,v-else-if用于条件渲染元素。当条件为真时，元素会被渲染；否则不会渲染。示例TypeATypeBNotA/B2.v-show也用于条件渲染，但它总是会渲染并保留，只是通过CSS的display属性控制可见性。示例显示/
      • SpringBoot3+Vue3+NaiveUI博客后台管理系统源码 | 小蚂蚁云 小蚂蚁开源 后端vue架构低代码
        项目介绍基于SpringBoot3、SpringSecurity、MybatisPlus、Vue3、TypeScript、Vite、NaiveUI、MySQL等技术栈实现的单体前后端分离后台管理系统；后端基于Java语言采用SpringBoot3、SpringSecurity、MybatisPlus、MySQL等主流技术栈，前端基于Vue3、TypeScript、Vite等技术栈实现，采用Naiv
      • 小蚂蚁云后台管理系统|XiaoMaYi 小蚂蚁开源 后端vue
        项目介绍基于SpringBoot3、SpringSecurity、MybatisPlus、Vue3、TypeScript、Vite、ElementPlus、MySQL等技术栈实现的单体前后端分离后台管理系统；后端基于Java语言采用SpringBoot3、SpringSecurity、MybatisPlus、MySQL等主流技术栈，前端基于Vue3、TypeScript、Vite等技术栈实现，采用
      • 【前端高频面试题--ES6篇】 码上有前 前端es6学习javascript
        作者：“码上有前”文章简介：前端高频面试题欢迎小伙伴们点赞、收藏⭐、留言前端高频面试题--ES6篇往期精彩内容ES6ES6概念let和constletConst解构赋值模板字符串对象简化箭头函数形参赋初始值Rest参数扩展运算符扩展运算符的应用Symbol的基本使用对象添加Symbol类型的属性Symbol内置值迭代器生成器PromiseSetMapclass类数值扩展对象扩展模块化往期精彩内容【
      • SpringBoot中使用TraceId进行日志追踪 java15655057970 面试学习路线阿里巴巴springboot状态模式后端
        **查询日志的痛点：**项目中每当我们查询日志的时候都是看前端请求什么接口，根据一些关键字进入服务器查询日志中是否有这个关键字，然而这个关键字在日志里面并不是唯一的，所以要生成一个唯一的标识，每一次请求都是唯一的一串字符，查询会过滤掉很多无用的信息，快捷查找到这次请求。为了解决这个痛点，就使用了TraceId。一、TraceId定义用于标识某一次具体的请求ID。当用户的请求进入系统后，会在RPC调
      • SpringBoot + Vue 前后端分离开发项目源码 左李滢Just
        SpringBoot+Vue前后端分离开发项目源码SpringBootVue前后端分离开发项目源码本仓库提供了一个完整的SpringBoot+Vue前后端分离开发项目的源码。该项目展示了如何使用SpringBoot作为后端框架，Vue作为前端框架，实现前后端分离的开发模式。通过本项目，您可以学习到如何搭建一个高效、可扩展的Web应用架构项目地址:https://gitcode.com/open-s
      • 【前端】--- ES6下篇（带你深入了解ES6语法） 心.c 前端es6ecmascript
        前言：ECMAScript是JavaScript的标准化版本，由ECMA国际组织制定。ECMAScript定义了JavaScript的语法、类型、语句、关键字、保留字等。ES6是ECMAScript的第六个版本，于2015年发布，引入了许多重要的新特性，使JavaScript更加现代化。进制ES6中增加了二进制和八进制的写法：二进制使用前缀'0b'或'0B'，八进制使用前缀'0o'或'0O'二进制
      • java枚举转json 软件老王 枚举json
        1、背景java后端的枚举类型，要展示到前端，提供给用户进行下拉选择，java后端需要封装enum为json字符串提供给前端，需要首先将枚举类型转为list，然后再转为json字符串。2、方案方案也很简单，使用EnumSet.allOf(TestEnum.class)，将数据获取到再塞到list中就可以了。代码如下：importcom.alibaba.fastjson.JSONObject;imp
      • 多功能系统下的专业游戏陪玩小程序，线上开黑陪玩与线下家政服务全囊括
        技术栈与工具前端技术栈UniApp框架：用于开发跨平台的移动应用。Vue.js：用于构建用户界面。微信小程序云函数：用于在微信小程序中实现后端逻辑。后端技术栈PHP：用于开发后端服务。MySQL：用于存储用户数据和陪玩人员信息。TP6框架：用于开发后端服务。开发工具HBuilderX：用于开发UniApp项目。微信开发者工具：用于开发微信小程序。适用行业陪玩行业：游戏陪玩领域国内已经很成熟。陪聊行
      • 浅谈视频智能化的发展与应用 weixin_33692284 前端后端人工智能ViewUI
        视频监控发展到今天，大家对视频系统规模的快速发展是有目共睹的。近年来基于成熟的以太网技术，大规模数字化视频监控系统的建设变得非常简单，很多项目拥有成百上千个前端点位，达到上万个前端点位的超大规模监控系统也不少见。随着视频监控系统规模的增加，在图像质量越来越好的当下，能否让摄像机看懂正在发生的事件并提出告警，这正是近年来非常流行的智能化需求的由来。本文将对目前智能视频分析技术的发展做些简单的阐述。一
      • nginx闲谈 沉默monkey nginx运维
        提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录介绍特点高并发轻量级模块化设计应用场景web服务器反向代理正向代理（类似机场）配置demo负载均衡缓存处理https与ssl/tlsapi网关介绍nginx高性能（同比tomcat性能高20%），轻量的weib服务器和反向代理服务器，能解决大量并发连接（C10K问题），高并发，高可靠，低内存消耗，支持多功能模块（如前端静态资源
      • 制作动态菜单 大磊程序员(“hello world”) Java后端javascript开发语言ecmascript
        动态菜单的说明什么叫做动态菜单？动态菜单就是根据用户属于不同的角色，每个角色还有不同的菜单，左侧菜单栏会有不同的显示前端加载流程menu.js修改/src/api/menu.js中的请求地址，如下所示：//获取菜单exportconstGetMenus=params=>{returnrequest({url:'/admin/system/index/menus',method:'get',para
      • Vue.js 单页应用（SPA）开发教程：从零开始构建你的第一个项目 Milk夜雨 vue.jsvue.js前端javascript
        单页应用（SPA，SinglePageApplication）是现代前端开发的主流模式。Vue.js是一个非常适合构建SPA的框架，它通过VueRouter实现页面导航，通过组件化开发和状态管理实现复杂的交互功能。本篇教程将带你了解SPA的基本概念，并一步步创建一个Vue.js单页应用。什么是单页应用（SPA）？单页应用是一种只有一个HTML页面，通过JavaScript动态加载内容的应用。特点包
      • Node.js的解释 web15085415935 面试学习路线阿里巴巴node.js
        1.Node.js入门教程1.1什么是Node.js？1.1.1Node.js是什么？Node.js是一个基于JavaScript的开源服务器端运行时环境，允许开发者用JavaScript编写服务器端代码。与传统的前端JavaScript主要运行在浏览器端不同，Node.js通过提供一个非阻塞的异步模型，允许开发者在服务器端创建高性能的网络应用程序。比喻：想象你把JavaScript看作是一个厨师
      • vue2在线生成二维码 家里有只小肥猫 javascript前端开发语言
        亲情提示：如果可以让后端生成就让后端生成实在不行再前端解决（分享方法只是为了让你快点下班不是为了让你能者多劳）创建npminstallqrcodejs2pnpminstallqrcodejs2importQRCodefrom'qrcodejs2'data:{qrcode:'',}submitCode(){if(this.$refs.qrcode){this.qrcode='';this.$refs
      • 最受欢迎的WebAssembly Web开发框架：Blazor前端开发 ScriptWELL wasm前端
        WebAssembly（简称Wasm）是一种用于在Web平台上运行高性能代码的二进制格式。它可以在现代Web浏览器中以原生速度执行，并为开发人员提供了使用其他编程语言编写Web应用程序的能力。在WebAssembly的推动下，出现了许多与其兼容的Web开发框架，其中最受欢迎的之一是Blazor。Blazor是一个由微软开发的Web开发框架，它允许开发人员使用C#语言编写前端Web应用程序。Blaz
      • 【前端知识】简单易懂的vue前端页面元素权限控制 问道飞鱼 前端开发技术vue.js前端javascript权限控制
        文章目录设计思路代码实现1.**权限数据管理**2.**权限判断方法**3.**动态控制元素**4.**路由权限控制**5.**无权限页面**总结相关文献在前端实现基于Vue的权限控制，通常需要结合后端返回的用户权限数据，动态控制页面元素的显示与隐藏、按钮的可点击状态等。以下是设计思路和代码实现：设计思路权限数据管理:从后端获取用户的权限数据（如角色、权限列表等），并存储在Vuex或组件的data
      • 分布式微服务搭建 Xi-Tong 微服务架构云原生linuxcentosbashjdk
        分布式微服务架构搭建（举出一个项目搭建的例子，其他项目可参考本文档）基于Nginx作为web服务器、JDK作为Java运行环境、MySQL作为关系型数据库、Nacos作为服务发现和配置中心、Maven作为项目管理工具、Redis作为缓存和消息中间件（视具体需求而定）、Node.js与npm作为某些微服务（如前端服务或特定业务逻辑服务）的开发和依赖管理工具，可以搭建一个完整的分布式微服务架构项目。以
      • 前端开发概述 不会写代码的菜 html前端html
        我们前后端工程师都一样,最终目的都是开发和维护软件,以给用户以更好的服务我们可以将软件分为以下几类:系统软件:WindowsLinuxmacOS应用软件:officeqq游戏软件:王者荣耀绝地求生我们的软件通常由服务器端和客户端组成客户端:通过客户端来使用软件,我们通常使用电脑时能看到的也就是客户端的软件,服务器端我们平常在使用过程中是无法看到的客户端的形式:文字客户端:一种古老的方式,通过命令行
      • React 前端框架开发详细操作 编码小袁 前端框架
        一、引言在当今的web开发领域，React作为一款流行的前端框架，以其高效的组件化开发模式、虚拟DOM带来的高性能以及灵活的生态系统，受到了广大开发者的青睐。无论是开发小型的单页应用还是大型的企业级项目，React都能展现出强大的能力。本文将详细介绍React前端框架的操作使用方法，帮助开发者快速上手并深入理解React开发。二、环境搭建在开始使用React进行开发之前，需要先搭建好开发环境。以下
      • React 前端框架简介与应用 仰望丨苍穹 前端：技巧与实践前端框架react.js前端
        React是一个用于构建用户界面的JavaScript库，在前端开发中被广泛应用。1：主要特点1.1：组件化开发React提倡以组件的方式构建用户界面。每个组件都具有独立的功能和逻辑，可以重复使用和组合，提高了开发效率和代码的可维护性。例如，一个网页中的导航栏、侧边栏、内容区域等都可以分别构建为不同的组件。1.2：虚拟DOMReact引入了虚拟DOM（VirtualDOM）的概念。当数据发生变化时
      • React 前端框架：简介与核心概念 一ge科研小菜鸡 工具前端框架
        React是由Facebook开发和维护的一个用于构建用户界面的JavaScript库。它专注于通过组件化的方式构建单页应用（SPA），允许开发者高效地创建复杂、交互性强的界面。React的核心特点是其虚拟DOM、组件化开发和声明式编程，使其成为目前最流行的前端开发框架之一。1.React的优势1.1组件化开发React的核心是组件（Component），它允许开发者将界面划分为多个独立的、可重用
      • 【前端开发】前端开发深度解析：HTML、CSS、JavaScript与Vue.js RS迷途小书童 前端开发探索之旅javascripthtmlcss前端vue.js
        一、HTML：构建网页的基石1.1简介HTML（HyperTextMarkupLanguage，超文本标记语言）是一种用于创建网页的标准标记语言。它使用各种标签（tags）来描述网页上的内容，包括文本、图像、链接、视频、音频等。HTML是网页开发的基础，与CSS（层叠样式表）和JavaScript等技术一起，共同构建出丰富多彩的网页世界。HTML文档由一系列的元素构成，每个元素都由开始标签、内容和
      • 前端路由的hash模式和history模式 bsr1983 前端hashhistory路由模式
        hash模式和history模式是前端路由实现的两种常见方式，分别基于不同的浏览器特性实现。下面从浏览器实现、前端框架实现及相关标准定义三个方面详细解释这两种模式。1.浏览器实现1.1Hash模式•核心机制：•基于浏览器的location.hash属性和hashchange事件。•#后的内容（如#home）被称为“fragmentidentifier”，不会被浏览器发送到服务器，因此只在前端有效。
      • 前端一次性在接口中给后端传多个文件流的集合作为参数 柠檬花开_ 前端javascript上传文件文件流
        前端上传文件后，文件流暂存在数组中。保存时，接口传参多个文件流一、前端暂存文件流//上传附件，attachFiles前端暂存文件流为一个数组httpSuggestionRequest:function(param){console.log(param,'param')if(this.attachFiles.length===10){this.$message.error('上限10个文件！');r
      • ASM系列四 利用Method 组件动态注入方法逻辑 lijingyao8206 字节码技术jvmAOP动态代理ASM
                这篇继续结合例子来深入了解下Method组件动态变更方法字节码的实现。通过前面一篇，知道ClassVisitor 的visitMethod()方法可以返回一个MethodVisitor的实例。那么我们也基本可以知道，同ClassVisitor改变类成员一样，MethodVIsistor如果需要改变方法成员，注入逻辑，也可以
      • java编程思想 --内部类 百合不是茶 java内部类匿名内部类
        内部类;了解外部类 并能与之通信 内部类写出来的代码更加整洁与优雅   1,内部类的创建  内部类是创建在类中的 package com.wj.InsideClass; /* * 内部类的创建 */ public class CreateInsideClass { public CreateInsideClass(
      • web.xml报错 crabdave web.xml
        web.xml报错   The content of element type "web-app" must match "(icon?,display-  name?,description?,distributable?,context-param*,filter*,filter-mapping*,listener*,servlet*,s
      • 泛型类的自定义 麦田的设计者 javaandroid泛型
           为什么要定义泛型类，当类中要操作的引用数据类型不确定的时候。 采用泛型类，完成扩展。   例如有一个学生类     Student{ Student(){ System.out.println("I'm a student....."); } }  有一个老师类  
      • CSS清除浮动的4中方法 IT独行者 JavaScriptUIcss
        清除浮动这个问题，做前端的应该再熟悉不过了，咱是个新人，所以还是记个笔记，做个积累，努力学习向大神靠近。CSS清除浮动的方法网上一搜，大概有N多种，用过几种，说下个人感受。 1、结尾处加空div标签 clear:both 1 2 3 4 .div 1 { background : #000080 ; border : 1px   s
      • Cygwin使用windows的jdk 配置方法 _wy_ jdkwindowscygwin
        1.[vim /etc/profile]    JAVA_HOME="/cgydrive/d/Java/jdk1.6.0_43"  (windows下jdk路径为D:\Java\jdk1.6.0_43)    PATH="$JAVA_HOME/bin:${PATH}"    CLAS
      • linux下安装maven 无量 mavenlinux安装
        Linux下安装maven(转) 1.首先到Maven官网 下载安装文件，目前最新版本为3.0.3，下载文件为 apache-maven-3.0.3-bin.tar.gz，下载可以使用wget命令； 2.进入下载文件夹，找到下载的文件，运行如下命令解压 tar -xvf  apache-maven-2.2.1-bin.tar.gz 解压后的文件夹
      • tomcat的https 配置,syslog-ng配置 aichenglong tomcathttp跳转到httpssyslong-ng配置syslog配置
        1) tomcat配置https,以及http自动跳转到https的配置     1)TOMCAT_HOME目录下生成密钥(keytool是jdk中的命令)      keytool -genkey -alias tomcat -keyalg RSA -keypass changeit -storepass changeit
      • 关于领号活动总结 alafqq 活动
        关于某彩票活动的总结 具体需求，每个用户进活动页面，领取一个号码，1000中的一个； 活动要求 1，随机性，一定要有随机性； 2，最少中奖概率，如果注数为3200注，则最多中4注 3，效率问题，（不能每个人来都产生一个随机数，这样效率不高）； 4，支持断电（仍然从下一个开始），重启服务；（存数据库有点大材小用，因此不能存放在数据库） 解决方案 1，事先产生随机数1000个，并打
      • java数据结构 冒泡排序的遍历与排序 百合不是茶 java
        java的冒泡排序是一种简单的排序规则   冒泡排序的原理：           比较两个相邻的数，首先将最大的排在第一个，第二次比较第二个 ，此后一样；         针对所有的元素重复以上的步骤，除了最后一个     例题；将int array[]
      • JS检查输入框输入的是否是数字的一种校验方法 bijian1013 js
        如下是JS检查输入框输入的是否是数字的一种校验方法： <form method=post target="_blank"> 数字：<input type="text" name=num onkeypress="checkNum(this.form)"><br> </form>
      • Test注解的两个属性：expected和timeout bijian1013 javaJUnitexpectedtimeout
        JUnit4：Test文档中的解释： 　　The Test annotation supports two optional parameters. 　　The first, expected, declares that a test method should throw an exception. 　　If it doesn't throw an exception or if it
      • [Gson二]继承关系的POJO的反序列化 bit1129 POJO
        父类     package inheritance.test2; import java.util.Map; public class Model { private String field1; private String field2; private Map<String, String> infoMap
      • 【Spark八十四】Spark零碎知识点记录 bit1129 spark
        1. ShuffleMapTask的shuffle数据在什么地方记录到MapOutputTracker中的 ShuffleMapTask的runTask方法负责写数据到shuffle map文件中。当任务执行完成成功，DAGScheduler会收到通知，在DAGScheduler的handleTaskCompletion方法中完成记录到MapOutputTracker中  
      • WAS各种脚本作用大全 ronin47 WAS 脚本
        　　　http://www.ibm.com/developerworks/cn/websphere/library/samples/SampleScripts.html 　　　无意中，在WAS官网上发现的各种脚本作用，感觉很有作用，先与各位分享一下 　　　 获取下载 这些示例 jacl 和 Jython 脚本可用于在 WebSphere Application Server 的不同版本中自
      • java-12.求 1+2+3+..n不能使用乘除法、 for 、 while 、 if 、 else 、 switch 、 case 等关键字以及条件判断语句 bylijinnan switch
        借鉴网上的思路，用java实现： public class NoIfWhile { /** * @param args * * find x=1+2+3+....n */ public static void main(String[] args) { int n=10; int re=find(n); System.o
      • Netty源码学习-ObjectEncoder和ObjectDecoder bylijinnan javanetty
        Netty中传递对象的思路很直观： Netty中数据的传递是基于ChannelBuffer（也就是byte[]）； 那把对象序列化为字节流，就可以在Netty中传递对象了 相应的从ChannelBuffer恢复对象，就是反序列化的过程 Netty已经封装好ObjectEncoder和ObjectDecoder 先看ObjectEncoder ObjectEncoder是往外发送
      • spring 定时任务中cronExpression表达式含义 chicony cronExpression
        一个cron表达式有6个必选的元素和一个可选的元素，各个元素之间是以空格分隔的，从左至右，这些元素的含义如下表所示： 代表含义            是否必须 允许的取值范围         &nb
      • Nutz配置Jndi ctrain JNDI
        1、使用JNDI获取指定资源： var ioc = { dao : { type :"org.nutz.dao.impl.NutDao", args : [ {jndi :"jdbc/dataSource"} ] } } 以上方法,仅需要在容器中配置好数据源,注入到NutDao即可.
      • 解决 /bin/sh^M: bad interpreter: No such file or directory daizj shell
        在Linux中执行.sh脚本，异常/bin/sh^M: bad interpreter: No such file or directory。   分析：这是不同系统编码格式引起的：在windows系统中编辑的.sh文件可能有不可见字符，所以在Linux系统下执行会报以上异常信息。 解决： 1）在windows下转换： 利用一些编辑器如UltraEdit或EditPlus等工具
      • [转]for 循环为何可恨？ dcj3sjt126com 程序员读书
          Java的闭包(Closure)特征最近成为了一个热门话题。 一些精英正在起草一份议案，要在Java将来的版本中加入闭包特征。 然而，提议中的闭包语法以及语言上的这种扩充受到了众多Java程序员的猛烈抨击。 不久前，出版过数十本编程书籍的大作家Elliotte Rusty Harold发表了对Java中闭包的价值的质疑。 尤其是他问道“for 循环为何可恨？”[http://ju
      • Android实用小技巧 dcj3sjt126com android
        1、去掉所有Activity界面的标题栏 　　修改AndroidManifest.xml 　　在application 标签中添加android:theme="@android:style/Theme.NoTitleBar"   2、去掉所有Activity界面的TitleBar 和StatusBar  　　修改AndroidManifes
      • Oracle 复习笔记之序列 eksliang Oracle 序列sequenceOracle sequence
        转载请出自出处：http://eksliang.iteye.com/blog/2098859 1.序列的作用 序列是用于生成唯一、连续序号的对象 一般用序列来充当数据库表的主键值 2.创建序列语法如下：   create sequence s_emp start with 1 --开始值 increment by 1 --増长值 maxval
      • 有“品”的程序员 gongmeitao 工作
        完美程序员的10种品质　　   完美程序员的每种品质都有一个范围，这个范围取决于具体的问题和背景。没有能解决所有问题的   完美程序员（至少在我们这个星球上），并且对于特定问题，完美程序员应该具有以下品质： 　　1. 才智非凡- 能够理解问题、能够用清晰可读的代码翻译并表达想法、善于分析并且逻辑思维能力强   （范围：用简单方式解决复杂问题）　　
      • 使用KeleyiSQLHelper类进行分页查询 hvt sql.netC#asp.nethovertree
        本文适用于sql server单主键表或者视图进行分页查询，支持多字段排序。KeleyiSQLHelper类的最新代码请到http://hovertree.codeplex.com/SourceControl/latest下载整个解决方案源代码查看。或者直接在线查看类的代码：http://hovertree.codeplex.com/SourceControl/latest#HoverTree.D
      • SVG 教程 （三）圆形，椭圆，直线 天梯梦 svg
        SVG <circle> SVG 圆形 - <circle> <circle> 标签可用来创建一个圆： 下面是SVG代码： <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" c
      • 链表栈 luyulong java数据结构
        public class Node { private Object object; private Node next; public Node() { this.next = null; this.object = null; } public Object getObject() { return object; } public
      • 基础数据结构和算法十：2-3 search tree sunwinner Algorithm2-3 search tree
          Binary search tree works well for a wide variety of applications, but they have poor worst-case performance. Now we introduce a type of binary search tree where costs are guaranteed to be loga
      • spring配置定时任务 stunizhengjia springtimer
        最近因工作的需要，用到了spring的定时任务的功能,觉得spring还是很智能化的,只需要配置一下配置文件就可以了,在此记录一下，以便以后用到：     //------------------------定时任务调用的方法------------------------------ /** * 存储过程定时器 */ publi
      • ITeye 8月技术图书有奖试读获奖名单公布 ITeye管理员 活动
        ITeye携手博文视点举办的8月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。 8月试读活动回顾： http://webmaster.iteye.com/blog/2102830 本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）： 《跨终端Web》 gleams：http