moduzhang
moduzhang

Bootstrap 框架-排版

概述

GitHub上这样介绍 bootstrap：

  • 简单灵活可用于架构流行的用户界面和交互接口的 html、css、javascript 工具集。
  • 基于 html5、css3 的 bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。
  • 自定义 JQuery 插件，完整的类库，基于 Less 等。

https://getbootstrap.com/

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

标题

Bootstrap 对标题样式进行了显著的优化重置。

Bootstrap 框架-排版_第1张图片

副标题，使用 来制作副标题 ，副标题具有自己独特的样式。

  • 行高都是1，而且 font-weight 设置了 normal，变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。
  • 内的文本字体在 h1-h3 内，其大小都设置为当前字号的 65%；而在 h4-h6 内的字号都设置为当前字号的 75%。
<h1>Bootstrap标题一<small>我是副标题small>h1>

段落（正文文本）

源码默认样式：

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}

p {
 margin: 0 0 10px;
}

强调内容

一个段落p突出显示，可以通过添加类名 lead 实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。

<p>我是一个普通的段落，我不需要强调显p>
<p class="lead">这部分内容需要特别的强调，我和别人长得不一样p>

源码样式：

.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 200;
line-height: 1.4;
}
@media (min-width: 768px) {/*大中型浏览器字体稍大*/
.lead {
font-size: 21px;
  }
}

除此之外，Bootstrap还通过元素标签: 、、 和 给文本做突出样式处理。

粗体

粗体就是给文本加粗，在普通的元素中我们一般通过 font-weight 设置为 bold 关键词给文本加粗。在 Bootstrap 中，可以使用 和 标签让文本直接加粗。

斜体

除了可以给元素设置样式 font-style 值为 italic 实现之外，在 Bootstrap 中还可以通过使用标签 或 来实现。

强调相关的类

在Bootstrap中除了使用标签 、 等说明正文某些字词、句子的重要性， Bootstrap 还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下：

  • .text-muted：提示，使用浅灰色（#999）
  • .text-primary：主要，使用蓝色（#428bca）
  • .text-success：成功，使用浅绿色(#3c763d)
  • .text-info：通知信息，使用浅蓝色（#31708f）
  • .text-warning：警告，使用黄色（#8a6d3b）
  • .text-danger：危险，使用褐色（#a94442）
<div class="text-danger">.text-danger效果div>

文本对齐风格

Bootstrap 通过定义四个类名来控制文本的对齐风格：

  • .text-left：左对齐

  • .text-center：居中对齐

  • .text-right：右对齐

  • .text-justify：两端对齐

列表

在 HTML 文档中，列表结构主要有三种：有序列表、无序列表和定义列表。


<ul>
    <li>…li>
ul>


<ol>
    <li>…li>
ol>


<dl>
    <dt>…dt>
    <dd>…dd>
dl>

Bootstrap 根据平时的使用情形提供了六种形式的列表：

  • 普通列表
  • 有序列表
  • 去点列表
  • 内联列表
  • 描述列表
  • 水平描述列表

无序列表、有序列表

无序列表和有序列表使用方式和我们平时使用的一样（无序列表使用 ul，有序列表使用 ol 标签），在样式方面，Bootstrap 只是在此基础上做了一些细微的优化，只是在 margin 上做了一些调整。在 Bootstrap 中列表也是可以嵌套的。

去点列表

通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。

.list-unstyled {
padding-left: 0;
list-style: none;
}

除了项目编号之外，还将列表默认的左边内距也清０了。

内联列表

Bootstrap 像去点列表一样，通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。

源码样式：

.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}

示例：

<ul class="list-inline">
    <li>W3cplusli>
    <li>Blogli>
    <li>CSS3li>
    <li>jQueryli>
    <li>PHPli>
ul>

定义列表

对于定义列表而言，Bootstrap 并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。

<dl>
    <dt>北京dt>
    <dd>北京是中国的首都，是政治文化集中地dd>
    <dt>上海dt>
    <dd>上海号称东方的巴黎dd>
dl>

水平定义列表

水平定义列表就像内联列表一样，Bootstrap 可以给

添加类名“.dl-horizontal”给定义列表实现水平显示效果。

代码风格

用于显示代码的风格。在 Bootstrap 主要提供了三种代码风格：

  1. 使用 来显示单行内联代码，一般是针对于单个单词或单个句子的代码。
  2. 使用 
     来显示多行块代码，一般是针对于多行代码（也就是成块的代码）。
    3.  
   
  3. 使用  来显示用户输入代码，一般是表示用户要通过键盘输入的内容。
    4.  
  
 
  
<div>Bootstrap的代码风格有三种：
  <code><code>code>
  <pre><pre>pre>
  <kbd><kbd>kbd>
div>
 
  
注意：不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代。而且对于 
 代码块风格，标签前面留多少个空格，在显示效果中就会留多少个空格。
 
  
有时候代码太多，而且不想让其占有太大的页面篇幅，就想控制代码块的大小。Bootstrap 也考虑到这一点，你只需要在 pre 标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为 340px，一旦超出这个高度，就会在 Y 轴出现滚动条。
 
  
源码：
 
  
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}
 
  
如果您了解 LESS 或 Sass 这样的 CSS 预定定义处理器，你完全可以通过 code.less 或者 _code.scss 文件修改样式，然后重新编译，你就可以得到属于自己的代码样式风格。
 
  
表格
 
  
表格是 Bootstrap 的一个基础组件之一，Bootstrap 为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用 Bootstrap 的表格过程中，只需要添加对应的类名就可以得到不同的表格风格。
 
  
     
   
  • .table：基础表格
    •  
   
  • .table-striped：斑马线表格
    •  
   
  • .table-bordered：带边框的表格
    •  
   
  • .table-hover：鼠标悬停高亮的表格
    •  
   
  • .table-condensed：紧凑型表格
    •  
   
  • .table-responsive：响应式表格
    •  
  
 
  
表格行的类
 
  
Bootstrap 还为表格的行元素  提供了五种不同的类名，每种类名控制了行的不同背景颜色，具体说明如下表所示：
 
  
Bootstrap 框架-排版_第2张图片
 
  
注意：除了”.active”之外，其他四个类名和”.table-hover”配合使用时，Bootstrap 针对这几种样式也做了相应的悬浮状态的样式设置，所以如果需要给 tr 元素添加其他颜色样式时，在”.table-hover”表格中也要做相应的调整。
 
  
注意要实现悬浮状态，需要在
标签上加入 table-hover 类。
基础表格（table）
对表格的结构，跟我们平时使用表格是一样的：
<table>
<thead>
<tr>
<th>表格标题th>
…
tr>
thead>
<tbody>
<tr>
<td>表格单元格td>
…
tr>
     …
tbody>
table>
在 Bootstrap 中，对于基础表格是通过类名“.table”来控制。如果在 
 
   
   
   
  
 元素中不添加任何类名，表格是无任何样式效果的。想得到基础表格，我们只需要在 
 元素上添加“.table”类名，就可以得到 Bootstrap 的基础表格：
<table class="table">
…
table>
Bootstrap 框架-排版_第3张图片
“.table”主要有三个作用：
     
   
  • 给表格设置了margin-bottom:20px 以及设置单元内距；
    •  
   
  • 在 thead 底部设置了一个 2px 的浅灰实线；
    •  
   
  • 每个单元格顶部设置了一个 1px 的浅灰实线。
    •  
  
斑马线表格（table-striped）
让表格带有背景条纹效果，在 Bootstrap 中实现这种表格效果并不困难，只需要在 
 
   
   
   
   
   
  
 的基础上增加类名“.table-striped”即可：
<table class="table table-striped">
…
table>
其效果与基础表格相比，仅是在 tbody 隔行有一个浅灰色的背景色。其实现原理也非常的简单，利用 CSS3 的结构性选择器“:nth-child”来实现，所以对于 IE8 以及其以下浏览器，没有背景条纹效果。
Bootstrap 框架-排版_第4张图片
带边框的表格（table-bordered）
Bootstrap 出于实际运用，也考虑这种表格效果，即所有单元格具有一条1px 的边框。 
 Bootstrap 中带边框的表格使用方法和斑马线表格的使用方法类似，只需要在基础表格 
 
   
   
   
   
  
 基础上添加一个“.table-bordered”类名即可：
<table  class="table table-bordered">
  …
table>
Bootstrap 框架-排版_第5张图片
鼠标悬浮高亮的表格（table-hover）
当鼠标悬停在表格的行上面有一个高亮的背景色，这样的表格让人看起来就是舒服，时刻告诉用户正在阅读表格哪一行的数据。Bootstrap 的确没有让你失望，他也考虑到这种效果，其提供了一个“.table-hover”类名来实现这种表格效果。
<table class="table table-hover">
…
table>
紧凑型表格（table-condensed）
何谓紧凑型表格，简单理解，就是单元格没内距或者内距较其他表格的内距更小。换句话说，要实现紧凑型表格只需要重置表格单元格的 内距 padding 的值。那么在 Bootstrap 中，通过类名“table-condensed”重置了单元格内距值。
<table class="table table-condensed">
…
table>
Bootstrap 框架-排版_第6张图片
注意，不管制作哪种表格都离不开类名“table”。所以大家在使用 Bootstrap 表格时，千万注意，你的 
 
   
   
   
   
   
   
   
   
   
  
 元素中一定不能缺少类名“table”。
响应式表格（）
Bootstrap 提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将 
 
   
  
置于这个容器当中`，这样表格也就具有响应式效果。
<div class="table-responsive">
<table class="table table-bordered">
   …
table>
div>
Bootstrap 中响应式表格效果表现为：当你的浏览器可视区域小于 768px 时，表格底部会出现水平滚动条。当你的浏览器可视区域大于 768px 时，表格底部水平滚动条就会消失。

                    
                

        
你可能感兴趣的:(前端开发入门)

        

            

                
    
                    
  • HarmonyOS 开发实战 —— 模块化架构组件 （使用系统路由表+注解+hvigor插件 自动配置项目模块化）
                        CTrup
鸿蒙开发HarmonyOS移动开发harmonyos架构uiArkUI组件化插件化hvigor
                        
    往期笔录记录：鸿蒙（HarmonyOS）北向开发知识点记录~鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景？嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~对于大前端开发来说，转鸿蒙开发究竟是福还是祸？鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？记录一场鸿蒙开发岗位面试经历~持续更新中……@satis/oh-router简介@sati
    
                    
    • 
                    
  • HarmonyOS 开发实践——模块化架构组件 （使用系统路由表+注解+hvigor插件 自动配置项目模块化）
                        我是你叶
HarmonyOS鸿蒙开发移动开发harmonyos架构鸿蒙开发uiArkui移动开发组件化
                        
    往期推文看点鸿蒙（HarmonyOS）北向开发知识点记录~鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景？嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~对于大前端开发来说，转鸿蒙开发究竟是福还是祸？鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？记录一场鸿蒙开发岗位面试经历~持续更新中……@satis/oh-router简介@satis
    
                    
    • 
                    
  • 放弃传统模板语言，前后端分离架构和传统架构相比到底强在哪？
                        博远~
前端架构
                        
    引言在当今Web开发中，后端SpringBoot和前端Vue通过前后端分离架构来结合，已经是一个成熟的主流技术栈了。这种前后端分离的架构方式，目前广泛应用于约90%以上通过Java开发的Web应用中。但是，对于为何弃用了之前服务端渲染页面的方式，而选择了前后端分离架构，现有大多数开发者和企业都是懵懵懂懂，甚至有些公司还觉得，之前一个人能干的项目，现在变成了两个人干，增加了成本和复杂度，降低了效益。
    
                    
    • 
                    
  • 从0到1：AI微信红包开发全攻略，小白也能轻松上手！
                        
人工智能cursor程序员
                        
    AI编程时代真的来了！最近我重度沉迷AI编程，发现它简直是开发神器，前端页面、后端服务，都能轻松搞定，效率直接起飞！最近临近过年，我突然冒出一个想法：为什么不试试用AI来做个微信红包呢？说干就干！1.明确需求要用AI做红包，首先得了解微信红包的规则。简单来说，我们需要一张精美的红包封面图，它会出现在发红包、消息气泡、拆红包、详情页等四个地方。而且尺寸也有要求，是957×1278像素。看起来有点复杂
    
                    
    • 
                    
  • Java全栈项目 - 校园跑腿服务系统
                        天天进步2015
Java项目实战java开发语言
                        
    项目介绍校园跑腿服务系统是一个面向高校师生的互助平台,旨在解决校园内取快递、买饭、打印等日常跑腿需求。系统采用前后端分离架构,基于SpringBoot+Vue实现。技术栈后端SpringBoot2.xSpringSecurityMyBatisPlusMySQL8.0RedisRabbitMQJWT前端Vue2.xElementUIAxiosVuexVueRouter核心功能1.用户模块注册/登录实
    
                    
    • 
                    
  • CSS 布局的四大宗师：破解 BFC、IFC、GFC 和 FFC 的深层奥秘
                        dorabighead
前端八股总结css前端
                        
    CSS布局的四大宗师：破解BFC、IFC、GFC和FFC的深层奥秘在CSS的江湖中，布局问题犹如无形的桎梏，困扰着每一位前端开发者。有人为浮动塌陷而抓狂，有人被复杂的响应式布局逼得手足无措。而在布局的巅峰，有四位宗师——BFC、IFC、GFC和FFC，它们分别掌控着块级、行内、网格和弹性布局的精髓。掌握它们，不仅仅是技术的进步，更是开启布局新境界的钥匙。今天，我们不再止步于表面，而是深入到它们的核
    
                    
    • 
                    
  • vue项目中使用mockjs模拟后端接口
                        上趣工作室
vue3.xvue2.xuniappvue.jsjavascriptecmascript
                        
    Vue2中使用Mock.js来模拟数据是一个非常常见的做法，尤其是在前端开发时需要与后端接口交互但后端尚未完成的情况下。下面是一个简单的案例，演示如何在Vue2项目中使用Mock.js来模拟数据。1.安装Mock.js首先，确保在你的项目中安装了Mock.js。可以使用npm或yarn来安装：npminstallmockjs--save-dev或者yarnaddmockjs--dev2.将Mock
    
                    
    • 
                    
  • Java全栈项目--校园餐饮点评平台项目实战
                        天天进步2015
Java项目实战java开发语言
                        
    项目介绍本项目是一个面向校园师生的餐饮点评平台，用户可以在平台上查看校园内各个餐厅的信息、菜品评价、发表点评等。项目采用SpringBoot+Redis+MySQL实现，包含用户登录、商户查询、优惠券秒杀、点评发布等功能。技术栈后端：SpringBoot、MyBatis-Plus、Redis前端：Vue.js、ElementUI数据库：MySQL缓存：Redis核心功能实现1.登录功能采用Redi
    
                    
    • 
                    
  • Java全栈项目 - 农产品溯源管理系统开发实践
                        天天进步2015
Java项目实战java开发语言
                        
    一、项目介绍农产品溯源管理系统是一个基于Java全栈技术开发的现代化信息系统，旨在实现农产品从种植、生产到销售的全过程追踪管理。本系统帮助提高农产品质量安全监管效率，保障食品安全。二、技术架构后端技术栈：SpringBoot2.5.xSpringSecurityMyBatisPlusMySQL8.0RedisJWT认证前端技术栈：Vue.js3.0ElementPlusAxiosEchartsVu
    
                    
    • 
                    
  • JavaScript 操作符与表达式
                        布兰妮甜
#JavaScript基础javascript操作符表达式箭头函数前端开发
                        
    Hi,我是布兰妮甜，编写流畅、愉悦用户体验的程序员。JavaScript是一种功能强大且灵活的编程语言，广泛应用于前端和后端开发。它提供了一系列丰富的操作符和表达式来处理数据、执行逻辑判断以及控制程序流程。理解这些概念对于编写高效、可读性强的代码至关重要。下面将详细探讨JavaScript中的操作符与表达式。文章目录一、操作符（Operators）二、表达式（Expressions）三、总结一、操
    
                    
    • 
                    
  • 【商城系统技术选型】
                        启山智软 商城 源码
微信小程序小程序java
                        
    商城系统技术选型是一个复杂但至关重要的过程，它直接关系到商城系统的性能、可扩展性、安全性以及用户体验等多个方面。以下是一些关键的技术选型考虑因素：前端技术选型框架选择：React或Vue.js等流行前端框架是不错的选择，它们具有良好的可组件化和可重用性，且社区资源丰富，有大量的插件和工具可供使用，能提高开发效率和界面的交互性。响应式设计：确保系统能自适应不同设备屏幕，如手机、平板、电脑等，提供一致
    
                    
    • 
                    
  • 前端建议玩node？？？
                        web网站装修工
前端javascriptvue.js前端框架node.js后端
                        
    想搞个小项目玩玩顺便挣点零花钱，那node是最简单和方便的。我就发现一个node+vue后台管理比较实用，可以直接那来用。直通车：vue+node源码https://gitee.com/MMinter/vue_node核心功能模块用户管理用户信息维护：管理员可以创建、更新和删除用户账户。用户状态控制：包括激活或禁用用户账户，确保安全性和合规性。角色管理角色创建与分配：根据业务需求创建不同的角色，并
    
                    
    • 
                    
  • 都用vue3了，还这样用emit？
                        web网站装修工
javascriptvue.js前端node.jsvue
                        
    今天查验一位前端同事代码，发现他为了方便封装了一个通用输入框。但也发现了很严重问题！！！先看看他的封装：子组件：import{ref}from'vue'constname=ref('')constemits=defineEmits(['getName'])constnameBlur=()=>{emits('getName',name.value)}父页面：importInputComponents
    
                    
    • 
                    
  • Spring Boot 实战篇（四）：实现用户登录与注册功能
                        m0_74824054
springbootjava后端
                        
    目录SpringBoot实战篇（四）：实现用户登录与注册功能一、用户注册功能（一）前端页面设计（简要提及）（二）后端实现二、用户登录功能（一）前端页面设计（简要提及）（二）后端实现在构建Web应用程序时，用户登录与注册功能是常见且重要的部分。以下将详细介绍在SpringBoot项目中实现用户登录与注册功能的步骤，并附上相应的代码示例。一、用户注册功能（一）前端页面设计（简要提及）创建注册页面使用H
    
                    
    • 
                    
  • Vben5登录过期无法再次登录问题，http状态码
                        
前端typescript
                        
    个人博客：无奈何杨（wnhyang）个人语雀：wnhyang共享语雀：在线知识共享Github：wnhyang-Overview前言最近在做项目前端，使用的https://doc.vben.pro/，在登录过期时出现了无法再次登录的问题，在此记录一下。项目前面那些直接略过，如果感兴趣直接看官方文档就可以，以下会根据解决过程附带部分官网说明。分析原因梳理流程文档前面的都已按照要求配置修改好了，所有的
    
                    
    • 
                    
  • Vue.js结合ASP.NET Core构建用户登录与权限验证系统
                        眸笑丶
Vuec#npmvue.js
                        
    1.环境准备2.创建项目3.Vue配置步骤一:安装包步骤二:配置文件步骤三:页面文件4.后台配置在本教程中，我将利用VisualStudio2022的强大集成开发环境，结合Vue.js前端框架和ASP.NETCore后端框架，从头开始创建一个具备用户登录与权限验证功能的Web应用程序。我们将充分利用VisualStudio的内置工具和模板来简化开发流程。1.环境准备VisualStudio2022
    
                    
    • 
                    
  • SpringBoot + Vue 项目超简单的合并部署方案
                        小北不想努力
教程springbootvue.jsjavanginxmaven
                        
    文章目录前言一、Vue项目二、SpringBoot项目三、服务器上的部署四、端口映射五、请求跨域前言最近在捣鼓SpringBoot与Vue整合的项目，看了网上很多套的方案，自己总结了一套为轻量级个人开发提供的项目部署方案，简单有效！通过maven的打包在服务器上仅需要运行一个Jar包即可运行包括前端的整个项目。（全文无图！别问问就是太懒惹，下次有机会再补上。。）个人博客内有更多详细内容：https
    
                    
    • 
                    
  • reac 后端接口返回二进制文件流前端导出文件
                        初遇你时动了情
前端
                        
    axios配置在你的请求中加入responseType:'blob'导出函数exportinterfaceDownloadFileOptions{filename:string;//文件名称}/***下载二进制文件流*@paramdata-二进制数据*@paramoptions-下载配置*/exportconstdownloadBinaryFile1=(data:any,//这里使用any是因为后
    
                    
    • 
                    
  • 前端必知必会-Node.js连接MongoDB 删除集合
                        编程岁月
前端node.jsmongodb
                        
    文章目录Node.js连接MongoDB删除集合删除集合db.dropCollection总结Node.js连接MongoDB删除集合删除集合您可以使用drop()方法删除表或MongoDB中所谓的集合。drop()方法采用包含错误对象和结果参数的回调函数，如果成功删除集合，则返回true，否则返回false。示例获取您自己的Node.js服务器删除“customers”表：varMongoCli
    
                    
    • 
                    
  • 大文件上传的解决办法~文件切片、秒传、限制文件并发请求。。。
                        行咘行啊细狗
javascript开发语言ecmascript
                        
    1、项目背景：针对大文件上传，如果将文件作为一个请求去发送给后端，会有以下几种问题，首先是上传时间长，用户不能进行其他操作，包括页面刷新等操作，其次有的接口会设置响应时间限制，可能大文件还没上传完就触发响应限制了，这样对用户很不友好，那么怎么解决呢？2、首先前端针对大文件使用文件切片技术，将大文件切成多个小文件，然后再将多个小文件传给后端，由后端进行组合即可。（文件切片）import{ref}fr
    
                    
    • 
                    
  • iOS开发入门（一）
                        ape阿浩
iosobjective-cswift
                        
    iOS开发是做什么的呢？这一点嘛，主要做iOS操作系统上的应用软件，包括iPhone和iPad上的各种App，主要使用的语言是Objective-C和Swift开发语言，这两种语言都是面向对象的编程语言。iOS开发使用什么开发工具呢？统一使用Xcode进行开发，Xcode可以从AppStore进行获取，这个集成开发工具（IDE）既可以开发iOS应用软件，也可以开发macOS应用软件，Xcode中可
    
                    
    • 
                    
  • 使用vue3实现语音交互的前端页面
                        张正栋
交互前端
                        
    代码地址：https://github.com/ZZD3627/my-third-vue.git需求1.前端实现录音并将音频传到通过http请求将音频传递到后端2.基于后端识别的语音及后端返回的内容进行语音沟通实现1.使用MediaRecorder在前端使用录音功能2.使用SpeechSynthesis实现将后端传来的文字进行播放其中一个页面的代码：import{ref,onMounted}fro
    
                    
    • 
                    
  • 新书速览|鸿蒙之光HarmonyOS NEXT原生应用开发入门
                        全栈开发圈
harmonyos华为
                        
    《鸿蒙之光HarmonyOSNEXT原生应用开发入门》1本书内容《鸿蒙之光HarmonyOSNEXT原生应用开发入门》以HarmonyOSNEXT版本为核心，从基础知识到实战案例，引领读者逐步探索“纯血鸿蒙”原生开发的奥秘。全书共16章，内容涵盖HarmonyOS架构、DevEcoStudio使用、应用结构解析、ArkTS编程语言、Ability组件、ArkUI开发、公共事件处理、窗口管理、网络编
    
                    
    • 
                    
  • 080：vue+cesium 利用PointPrimitiveCollection绘制4个不同颜色不同位置的点
                        还是大剑师兰特
#cesium综合教程200+大剑师cesium教程cesium入门cesium示例
                        
    作者：还是大剑师兰特，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。查看本专栏目录-本文是第080篇文章文章目录一、示例效果图二、示例介绍三、配置说明四、示例源代码（共101行）五、相关文章参考一
    
                    
    • 
                    
  • 【学习总结|DAY028】后端Web实战(部门管理)
                        123yhy传奇
学习javamysqlmybatislog4jmavenweb
                        
    在Web后端开发领域，构建高效、规范且功能完备的系统是核心目标。本文将围绕Tlias智能学习辅助系统的后端开发展开，详细阐述从开发准备工作到各部门管理功能实现，以及日志技术应用的全过程，为开发者提供全面的实践参考。一、开发准备（一）开发模式与规范前后端分离开发已成为主流趋势。在这种模式下，前端项目和后端项目的开发、部署相互独立。其开发流程包括需求分析、接口设计、前后端并行开发、测试以及联调等环节。
    
                    
    • 
                    
  • Java Web 登录系统示例：过滤器技术与 JDBC 数据库连接
                        Bro_cat
JavaWeb开发javatomcatmavenjava-eeservlet过滤器Filter
                        
    在这篇博客中，我们将探讨一个简单的JavaWeb登录系统示例，重点介绍其中使用的过滤器技术以及JDBC数据库连接技术。这个示例包括后端代码和简单的前端代码，帮助你理解这些技术的实现和原理。项目结构过滤器技术什么是过滤器？过滤器（Filter）是JavaWeb开发中的一个强大工具，它可以在请求到达Servlet之前或响应返回客户端之前对请求和响应进行拦截和处理。过滤器可以用来执行诸如字符编码设置、跨
    
                    
    • 
                    
  • ThreeJS入门（226）：THREE.CSS3DRenderer 知识详解，示例代码
                        还是大剑师兰特
#ThreeJS综合教程500+大剑师threejs入门threejs教程threejs示例
                        
    作者：还是大剑师兰特，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。查看本专栏目录-本文是第226篇入门文章文章目录特性构造函数方法`render(scene,came
    
                    
    • 
                    
  • 矩阵碰一碰发视频之视频剪辑功能开发全解析，支持OEM
                        余~~18538162800
音视频线性代数矩阵
                        
    在短视频风靡的当下，矩阵碰一碰发视频结合视频剪辑功能，为内容创作与传播带来了全新的活力。本文将深入探讨这一创新功能的源码搭建过程，助力开发者打造出功能强大且用户体验良好的视频处理系统。一、技术选型前端技术框架：选用React作为前端开发框架，其高效的虚拟DOM机制和组件化开发模式，能显著提升开发效率与应用性能。借助ReactHooks，可更便捷地管理组件状态与副作用。UI库：采用AntDesign
    
                    
    • 
                    
  • 一次捋清uniapp小程序微信快速登陆、获取手机号验证、获取用户信息【前端】
                        m0_74825074
vip1024puni-app小程序微信
                        
    首先要知道，微信登录和获取手机号、获取用户信息是相互独立的过程，接下来分开讲解这三个东西，内容很干，只用文字描述，认真看、跟着做就行，没有花里胡哨uniapp微信登录流程前端使用uni.login方法获取code（用户的登录凭证）发送给后端后端使用这个code请求code2Session这个接口：https://developers.weixin.qq.com/miniprogram/dev/Op
    
                    
    • 
                    
  • 使用vue3实现语音交互的前端页面
                        Rverdoser
交互前端
                        
    要在Vue3中实现语音交互的前端页面，你可以使用WebSpeechAPI。以下是一个简单的例子，展示了如何在Vue3组件中集成语音识别（speechrecognition）和语音合成（speechsynthesis）功能。首先，确保你的项目中安装了vue3。npminstallvue@next然后，创建一个Vue组件：开始录音开始播放import{ref}from'vue';constSpeech
    
                    
    • 
                                
  • HQL之投影查询
                                    归来朝歌
HQLHibernate查询语句投影查询
                                    
            在HQL查询中，常常面临这样一个场景，对于多表查询，是要将一个表的对象查出来还是要只需要每个表中的几个字段，最后放在一起显示？ 
针对上面的场景，如果需要将一个对象查出来： 
HQL语句写“from 对象”即可 
Session session = HibernateUtil.openSession();
		
    
                                
    • 
                                
  • Spring整合redis
                                    bylijinnan
redis
                                    
    pom.xml 
 

<dependencies>
		<!-- Spring Data - Redis Library -->
		<dependency>
			<groupId>org.springframework.data</groupId>
			<artifactId>spring-data-redi
    
                                
    • 
                                
  • org.hibernate.NonUniqueResultException: query did not return a unique result: 2
                                    0624chenhong
Hibernate
                                    
    参考：http://blog.csdn.net/qingfeilee/article/details/7052736 
org.hibernate.NonUniqueResultException: query did not return a unique result: 2 
        在项目中出现了org.hiber
    
                                
    • 
                                
  • android动画效果
                                    不懂事的小屁孩
android动画
                                    
    前几天弄alertdialog和popupwindow的时候，用到了android的动画效果，今天专门研究了一下关于android的动画效果，列出来，方便以后使用。 
 
Android 平台提供了两类动画。 一类是Tween动画，就是对场景里的对象不断的进行图像变化来产生动画效果（旋转、平移、放缩和渐变）。 
第二类就是 Frame动画，即顺序的播放事先做好的图像，与gif图片原理类似。 
 

    
                                
    • 
                                
  • js delete 删除机理以及它的内存泄露问题的解决方案
                                    换个号韩国红果果
JavaScript
                                    
    delete删除属性时只是解除了属性与对象的绑定，故当属性值为一个对象时，删除时会造成内存泄露  （其实还未删除） 
举例： 

var person={name:{firstname:'bob'}}
var p=person.name
delete person.name
p.firstname  -->'bob'
// 依然可以访问p.firstname，存在内存泄露
    
                                
    • 
                                
  • Oracle将零干预分析加入网络即服务计划
                                    蓝儿唯美
oracle
                                    
    由Oracle通信技术部门主导的演示项目并没有在本月较早前法国南斯举行的行业集团TM论坛大会中获得嘉奖。但是，Oracle通信官员解雇致力于打造一个支持零干预分配和编制功能的网络即服务（NaaS）平台，帮助企业以更灵活和更适合云的方式实现通信服务提供商（CSP）的连接产品。这个Oracle主导的项目属于TM Forum Live!活动上展示的Catalyst计划的19个项目之一。Catalyst计
    
                                
    • 
                                
  • spring学习——springmvc（二）
                                    a-john
springMVC
                                    
    Spring MVC提供了非常方便的文件上传功能。 
1，配置Spring支持文件上传： 
DispatcherServlet本身并不知道如何处理multipart的表单数据，需要一个multipart解析器把POST请求的multipart数据中抽取出来，这样DispatcherServlet就能将其传递给我们的控制器了。为了在Spring中注册multipart解析器，需要声明一个实现了Mul
    
                                
    • 
                                
  • POJ-2828-Buy Tickets
                                    aijuans
ACM_POJ
                                    
    POJ-2828-Buy Tickets 
http://poj.org/problem?id=2828 
线段树，逆序插入 
 
#include<iostream>#include<cstdio>#include<cstring>#include<cstdlib>using namespace std;#define N 200010struct
    
                                
    • 
                                
  • Java Ant build.xml详解
                                    asia007
build.xml
                                    
    1,什么是antant是构建工具2,什么是构建概念到处可查到，形象来说，你要把代码从某个地方拿来，编译，再拷贝到某个地方去等等操作，当然不仅与此，但是主要用来干这个3,ant的好处跨平台   --因为ant是使用java实现的，所以它跨平台使用简单--与ant的兄弟make比起来语法清晰--同样是和make相比功能强大--ant能做的事情很多，可能你用了很久，你仍然不知道它能有
    
                                
    • 
                                
  • android按钮监听器的四种技术
                                    百合不是茶
androidxml配置监听器实现接口
                                    
    android开发中经常会用到各种各样的监听器,android监听器的写法与java又有不同的地方;  
  
1,activity中使用内部类实现接口 ,创建内部类实例  使用add方法  与java类似 
  
创建监听器的实例 
myLis lis = new myLis(); 
  
使用add方法给按钮添加监听器 
 
    
                                
    • 
                                
  • 软件架构师不等同于资深程序员
                                    bijian1013
程序员架构师架构设计
                                    
            本文的作者Armel Nene是ETAPIX Global公司的首席架构师，他居住在伦敦，他参与过的开源项目包括 Apache Lucene,，Apache Nutch， Liferay 和 Pentaho等。 
        如今很多的公司
    
                                
    • 
                                
  • TeamForge Wiki Syntax & CollabNet User Information Center
                                    sunjing
TeamForgeHow doAttachementAnchorWiki Syntax
                                    
    the CollabNet user information center http://help.collab.net/ 
  
How do I create a new Wiki page? 
A CollabNet TeamForge project can have any number of Wiki pages. All Wiki pages are linked, and
    
                                
    • 
                                
  • 【Redis四】Redis数据类型
                                    bit1129
redis
                                    
    概述 
Redis是一个高性能的数据结构服务器，称之为数据结构服务器的原因是，它提供了丰富的数据类型以满足不同的应用场景，本文对Redis的数据类型以及对这些类型可能的操作进行总结。 
Redis常用的数据类型包括string、set、list、hash以及sorted set.Redis本身是K/V系统，这里的数据类型指的是value的类型，而不是key的类型，key的类型只有一种即string
    
                                
    • 
                                
  • SSH2整合-附源码
                                    白糖_
eclipsespringtomcatHibernateGoogle
                                    
    今天用eclipse终于整合出了struts2+hibernate+spring框架。 
我创建的是tomcat项目，需要有tomcat插件。导入项目以后，鼠标右键选择属性，然后再找到“tomcat”项，勾选一下“Is a tomcat project”即可。具体方法见源码里的jsp图片，sql也在源码里。 
  
  
补充1：项目中部分jar包不是最新版的，可能导
    
                                
    • 
                                
  • [转]开源项目代码的学习方法
                                    braveCS
学习方法
                                    
    转自： 
http://blog.sina.com.cn/s/blog_693458530100lk5m.html 
http://www.cnblogs.com/west-link/archive/2011/06/07/2074466.html 
  
1）阅读features。以此来搞清楚该项目有哪些特性2）思考。想想如果自己来做有这些features的项目该如何构架3）下载并安装d
    
                                
    • 
                                
  • 编程之美-子数组的最大和（二维）
                                    bylijinnan
编程之美
                                    
    package beautyOfCoding;

import java.util.Arrays;
import java.util.Random;

public class MaxSubArraySum2 {

	/**
	 * 编程之美 子数组之和的最大值（二维）
	 */
	private static final int ROW = 5;
	private stat
    
                                
    • 
                                
  • 读书笔记-3
                                    chengxuyuancsdn
jquery笔记resultMap配置ibatis一对多配置
                                    
    1、resultMap配置 
2、ibatis一对多配置 
3、jquery笔记 
 
1、resultMap配置
当<select resultMap="topic_data">
<resultMap id="topic_data">必须一一对应。
(1)<resultMap class="tblTopic&q
    
                                
    • 
                                
  • [物理与天文]物理学新进展
                                    comsci

                                    
     
 
      如果我们必须获得某种地球上没有的矿石,才能够进行某些能量输出装置的设计和建造,而要获得这种矿石,又必须首先进行深空探测,而要进行深空探测,又必须获得这种能量输出装置,这个矛盾的循环,会导致地球联盟在与宇宙文明建立关系的时候,陷入困境 
 
      怎么办呢? 
 
 
    
                                
    • 
                                
  • Oracle 11g新特性:Automatic Diagnostic Repository
                                    daizj
oracleADR
                                    
    Oracle Database 11g的FDI（Fault Diagnosability Infrastructure）是自动化诊断方面的又一增强。 
FDI的一个关键组件是自动诊断库（Automatic Diagnostic Repository-ADR）。 
 
在oracle 11g中，alert文件的信息是以xml的文件格式存在的，另外提供了普通文本格式的alert文件。 
这两份log文
    
                                
    • 
                                
  • 简单排序:选择排序
                                    dieslrae
选择排序
                                    
    
    public void selectSort(int[] array){
        int select;
        
        for(int i=0;i<array.length;i++){
            select = i;
            
            for(int k=i+1;k<array.leng
    
                                
    • 
                                
  • C语言学习六指针的经典程序，互换两个数字
                                    dcj3sjt126com
c
                                    
    示例程序，swap_1和swap_2都是错误的，推理从1开始推到2，2没完成，推到3就完成了 
# include <stdio.h>

void swap_1(int, int);
void swap_2(int *, int *);
void swap_3(int *, int *);

int main(void)
{
	int a = 3;
	int b = 
    
                                
    • 
                                
  • php 5.4中php-fpm 的重启、终止操作命令
                                    dcj3sjt126com
PHP
                                    
    php 5.4中php-fpm 的重启、终止操作命令: 
查看php运行目录命令：which php/usr/bin/php 
查看php-fpm进程数：ps aux | grep -c php-fpm 
查看运行内存/usr/bin/php  -i|grep mem 
重启php-fpm/etc/init.d/php-fpm restart 
在phpinfo()输出内容可以看到php
    
                                
    • 
                                
  • 线程同步工具类
                                    shuizhaosi888
同步工具类
                                    
    同步工具类包括信号量（Semaphore）、栅栏（barrier）、闭锁（CountDownLatch） 
  
闭锁（CountDownLatch） 
public class RunMain {
	public long timeTasks(int nThreads, final Runnable task) throws InterruptedException {
		fin
    
                                
    • 
                                
  • bleeding edge是什么意思
                                    haojinghua
DI
                                    
    不止一次，看到很多讲技术的文章里面出现过这个词语。今天终于弄懂了——通过朋友给的浏览软件，上了wiki。  
我再一次感到，没有辞典能像WiKi一样，给出这样体贴人心、一清二楚的解释了。为了表达我对WiKi的喜爱，只好在此一一中英对照，给大家上次课。 
  
In computer science, bleeding edge is a term that 
    
                                
    • 
                                
  • c中实现utf8和gbk的互转
                                    jimmee
ciconvutf8&gbk编码
                                    
    #include <iconv.h>
#include <stdlib.h>
#include <stdio.h>
#include <unistd.h>
#include <fcntl.h>
#include <string.h>
#include <sys/stat.h>

int code_c
    
                                
    • 
                                
  • 大型分布式网站架构设计与实践
                                    lilin530
应用服务器搜索引擎
                                    
    1.大型网站软件系统的特点？ 
a.高并发，大流量。 
b.高可用。 
c.海量数据。 
d.用户分布广泛，网络情况复杂。 
e.安全环境恶劣。 
f.需求快速变更，发布频繁。 
g.渐进式发展。 
 
2.大型网站架构演化发展历程？ 
a.初始阶段的网站架构。 
应用程序，数据库，文件等所有的资源都在一台服务器上。 
b.应用服务器和数据服务器分离。 
c.使用缓存改善网站性能。 
d.使用应用
    
                                
    • 
                                
  • 在代码中获取Android theme中的attr属性值
                                    OliveExcel
androidtheme
                                    
    Android的Theme是由各种attr组合而成, 每个attr对应了这个属性的一个引用, 这个引用又可以是各种东西. 
  
在某些情况下, 我们需要获取非自定义的主题下某个属性的内容 (比如拿到系统默认的配色colorAccent), 操作方式举例一则: 
int defaultColor = 0xFF000000;
int[] attrsArray = { andorid.r.
    
                                
    • 
                                
  • 基于Zookeeper的分布式共享锁
                                    roadrunners
zookeeper分布式共享锁
                                    
    首先，说说我们的场景，订单服务是做成集群的，当两个以上结点同时收到一个相同订单的创建指令，这时并发就产生了，系统就会重复创建订单。等等......场景。这时，分布式共享锁就闪亮登场了。 
  
共享锁在同一个进程中是很容易实现的，但在跨进程或者在不同Server之间就不好实现了。Zookeeper就很容易实现。具体的实现原理官网和其它网站也有翻译，这里就不在赘述了。 
  
官
    
                                
    • 
                                
  • 两个容易被忽略的MySQL知识
                                    tomcat_oracle
mysql
                                    
    1、varchar(5)可以存储多少个汉字，多少个字母数字？   　　相信有好多人应该跟我一样，对这个已经很熟悉了，根据经验我们能很快的做出决定，比如说用varchar(200)去存储url等等，但是，即使你用了很多次也很熟悉了，也有可能对上面的问题做出错误的回答。   　　这个问题我查了好多资料，有的人说是可以存储5个字符，2.5个汉字（每个汉字占用两个字节的话），有的人说这个要区分版本，5.0
    
                                
    • 
                                
  • zoj 3827 Information Entropy(水题)
                                    阿尔萨斯
format
                                    
     题目链接：zoj 3827 Information Entropy 
 题目大意：三种底，计算和。 
 解题思路：调用库函数就可以直接算了，不过要注意Pi = 0的时候，不过它题目里居然也讲了。。。limp→0+plogb(p)=0，因为p是logp的高阶。 
#include <cstdio>
#include <cstring>
#include <cmath&
    
                                
    •