概述
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 对标题样式进行了显著的优化重置。
副标题，使用
行高都是1，而且 font-weight 设置了 normal，变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。
<h1 > Bootstrap标题一<small > 我是副标题small >h1 >段落（正文文本）
源码默认样式：
body {
font-family : "Helvetica Neue" , Helvetica, Arial, sans-serif font-size : 14 px line-height : 1.42857143 color : #333 background-color : #fff }
p {
margin : 0 0 10 px } 强调内容
一个段落p突出显示，可以通过添加类名 lead 实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。
<p > 我是一个普通的段落，我不需要强调显p >
<p class ="lead" > 这部分内容需要特别的强调，我和别人长得不一样p >源码样式：
.lead {
margin-bottom : 20 px font-size : 16 px font-weight : 200 line-height : 1.4 }
@media (min-width: 768 px) {
.lead {
font-size : 21 px }
}除此之外，Bootstrap还通过元素标签:
粗体
粗体就是给文本加粗，在普通的元素中我们一般通过 font-weight 设置为 bold 关键词给文本加粗。在 Bootstrap 中，可以使用
斜体
除了可以给元素设置样式 font-style 值为 italic 实现之外，在 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 : -5 px list-style : none }
.list-inline > li {
display : inline-block padding-right : 5 px padding-left : 5 px } 示例：
<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 主要提供了三种代码风格：
使用 单个单词或单个句子的代码。
使用 多行代码（也就是成块的代码）。
使用 键盘输入的内容。
<div > Bootstrap的代码风格有三种：
<code > <code>code >
<pre > <pre>pre >
<kbd > <kbd>kbd >
div >注意：不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代。而且对于
有时候代码太多，而且不想让其占有太大的页面篇幅，就想控制代码块的大小。Bootstrap 也考虑到这一点，你只需要在 pre 标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为 340px，一旦超出这个高度，就会在 Y 轴出现滚动条。
源码：
.pre-scrollable {
max-height : 340 px 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 还为表格的行元素 提供了五种不同的类名，每种类名控制了行的不同背景颜色，具体说明如下表所示：
注意：除了”.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 >
“.table”主要有三个作用：
给表格设置了margin-bottom:20px 以及设置单元内距；
在 thead 底部设置了一个 2px 的浅灰实线；
每个单元格顶部设置了一个 1px 的浅灰实线。
斑马线表格（table-striped）
让表格带有背景条纹效果，在 Bootstrap 中实现这种表格效果并不困难，只需要在 的基础上增加类名“.table-striped”即可：
<table class ="table table-striped" >
…
table >其效果与基础表格相比，仅是在 tbody 隔行有一个浅灰色的背景色。其实现原理也非常的简单，利用 CSS3 的结构性选择器“:nth-child”来实现，所以对于 IE8 以及其以下浏览器，没有背景条纹效果。
带边框的表格（table-bordered）
Bootstrap 出于实际运用，也考虑这种表格效果，即所有单元格具有一条1px 的边框。 基础上添加一个“.table-bordered”类名即可：
<table class ="table table-bordered" >
…
table >
鼠标悬浮高亮的表格（table-hover）
当鼠标悬停在表格的行上面有一个高亮的背景色，这样的表格让人看起来就是舒服，时刻告诉用户正在阅读表格哪一行的数据。Bootstrap 的确没有让你失望，他也考虑到这种效果，其提供了一个“.table-hover”类名来实现这种表格效果。
<table class ="table table-hover" >
…
table >紧凑型表格（table-condensed）
何谓紧凑型表格，简单理解，就是单元格没内距或者内距较其他表格的内距更小。换句话说，要实现紧凑型表格只需要重置表格单元格的 内距 padding 的值。那么在 Bootstrap 中，通过类名“table-condensed”重置了单元格内距值。
<table class ="table table-condensed" >
…
table >
注意，不管制作哪种表格都离不开类名“table”。所以大家在使用 Bootstrap 表格时，千万注意，你的 元素中一定不能缺少类名“table”。
响应式表格（）
Bootstrap 提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将 置于这个容器当中`，这样表格也就具有响应式效果。
<div class ="table-responsive" >
<table class ="table table-bordered" >
…
table >
div >Bootstrap 中响应式表格效果表现为：当你的浏览器可视区域小于 768px 时，表格底部会出现水平滚动条。当你的浏览器可视区域大于 768px 时，表格底部水平滚动条就会消失。
你可能感兴趣的:(前端开发入门)
day15｜前端框架学习和算法
universe_01
前端 算法 笔记
T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的
vue element 封装表单
影子信息
vue vue.js javascript 前端
背景：在前端系统开发中，系统页面涉及到的表单组件比较多，所以进行了简单的封装。封装的包括一些Form表单组件，如下：input输入框、select下拉框、等实现效果：理论知识：表单组件官方链接：点击跳转封装组件：封装组件的思路：不封装element组件，每一个input组件绑定一个form对象，例如官网。简单封装element组件，利用for循环生成form表单的每一项el-form-item。进
前端面试每日 3+1 —— 第39天
浪子神剑
今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss
Django学习笔记（一）
学习视频为：pythondjangoweb框架开发入门全套视频教程一、安装pipinstalldjango==****检查是否安装成功django.get_version()二、django新建项目操作1、新建一个项目django-adminstartprojectproject_name2、新建APPcdproject_namedjango-adminstartappApp注：一个project
前端数据库：IndexedDB从基础到高级使用指南
文章目录前端数据库：IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例：构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.
【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三）
笙囧同学
java 前端 状态模式
核心功能设计用户管理系统用户管理是整个系统的基础，我设计了完整的用户生命周期管理：用户注册流程验证失败验证通过验证失败验证通过用户名已存在用户名可用失败成功用户访问注册页面填写注册信息前端表单验证显示错误提示提交到后端后端数据验证返回错误信息用户名唯一性检查提示用户名重复密码加密处理保存用户信息保存成功?显示系统错误注册成功跳转登录页面登录认证机制深度解析我实现了一套企业级的多层次安全认证机制：认
从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战
作者简介：笙囧同学，中科院计算机大模型方向硕士，全栈开发爱好者联系方式：
[email protected] 各大平台账号：笙囧同学座右铭：偷懒是人生进步的阶梯前言在AI技术飞速发展的今天，如何将前沿的大模型技术与实际应用相结合，一直是我们开发者关注的焦点。今天，笙囧同学将带大家从零开始，构建一个基于GigaChatAI的艺术创作平台，实现React前端+Django后端的完整全栈解决方案。这不仅仅是
14.tornado操作之应用Websocket协议实现聊天室功能
孤寒者
Tornado框架从入门到实战 websocket tornado 聊天室功能实现 python
目录：每篇前言：1.什么是WebSocket（1）定义（2）优点（3）和HTTP对比（4）适用场景2.WebSocket关键方法3.本tornado项目中使用WebSocket（1）准备一个聊天室的页面：第一步：编写视图：第二步：编写接口：（app.py中加入以下接口！）第三步：编写前端页面：测试接口——响应OK！（2）使用WebSocket：（3）聊天室的聊天功能的最终实现：第一步：战前准备第二
为什么学习Web前端一定要掌握JavaScript？
web前端学习指南
为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。
小架构step系列25：错误码
秋千码途
架构 java
1概述一个系统中，可能产生各种各样的错误，对这些错误进行编码。当错误发生时，通过这个错误码就有可能快速判断是什么错误，不一定需要查看代码就可以进行处理，提高问题处理效率。有了统一的错误码，还可以标准化错误信息，方便把错误信息纳入文档管理和对错误信息进行国际化等。没有错误码的管理，开发人员就会按自己的理解处理这些错误。有些直接把堆栈直接反馈到前端页面上，使用看不懂这些信息体验很差，也暴露了堆栈信息有
Java朴实无华按天计划从入门到实战（强化速战版-66天）
岫珩
Java 后端 java 开发语言 学习 Java 时间安排 学习计划
致敬读者感谢阅读笑口常开生日快乐⬛早点睡觉博主相关博主信息博客首页专栏推荐活动信息文章目录Java朴实无华按天计划从入门到实战（强化速战版-66天）1.基础（18）1.1JavaSE核心（5天）1.2数据库与SQL（5天）1.3前端基础（8天）2.进阶（17天）2.1JavaWeb核心（5天）2.2Mybatis与Spring全家桶（6天）2.3中间件入门（4天）2.4实践项目（2天）3.高阶（1
《跨域资源共享CORS的深层逻辑与前端实践精要》
不同源头的资源交互已成为常态，而跨域资源共享（CORS）正是支撑这种交互的隐形架构。现代Web安全体系中平衡开放与防护的精妙设计。理解CORS的深层逻辑，不仅能解决实际开发中的跨域难题，更能触及网络安全与资源流通的核心矛盾，为前端工程师构建稳健的应用提供底层认知支撑。跨域资源共享的诞生，源于网络安全与应用发展的必然冲突。浏览器的同源策略，作为早期网络安全的基石，通过限制不同源文档的交互，有效阻挡了
深入了解 Kubernetes（k8s）：从概念到实践
目录一、k8s核心概念二、k8s的优势三、k8s架构组件控制平面组件节点组件四、k8s+docker运行前后端分离项目的例子1.准备前端项目2.准备后端项目3.创建k8s部署配置文件4.部署应用到k8s集群在当今云计算和容器化技术飞速发展的时代，Kubernetes（简称k8s）已成为容器编排领域的事实标准。无论是互联网巨头、传统企业还是初创公司，都在广泛采用k8s来管理和部署容器化应用。本文将带
大厂都在用的前端缓存策略，你掌握了吗？
AI架构全栈开发实战笔记
前端 缓存 ai
大厂都在用的前端缓存策略，你掌握了吗？关键词：前端缓存、HTTP缓存、ServiceWorker、CDN缓存、缓存策略、性能优化、浏览器缓存摘要：本文将深入探讨前端开发中常用的缓存策略，从浏览器缓存到ServiceWorker，从HTTP缓存头到CDN缓存，全面解析大厂都在使用的高效缓存技术。通过生动的比喻和实际代码示例，帮助开发者理解并掌握这些提升Web应用性能的关键技术。背景介绍目的和范围本文
26. 什么是雪碧图，作用和原理了解吗
yqcoder
前端面试-CSS css 前端 html
总结小图合成一张，使用background来使用，减少资源请求一、什么是雪碧图？雪碧图（CSSSprite）是一种前端优化技术，指的是将多个小图标合并成一张大图，通过CSS控制显示其中的某一部分。它常用于网站中图标、按钮等小图较多的场景。二、雪碧图的作用作用说明✅减少HTTP请求次数合并多个图片为一张图，减少请求资源数✅提升页面加载速度尤其在图片较多时效果明显✅避免图片加载闪烁鼠标悬停切换图片时不
H5UI微信小程序前端框架实战指南
ai
本文还有配套的精品资源，点击获取简介：H5UI是一个为微信小程序开发设计的前端框架，基于H5技术，提供简洁高效的组件库。框架集成了丰富的UI元素，如按钮、表格、导航栏等，简化了界面布局和交互的实现。通过安装、引入、使用组件和事件绑定四个步骤，开发者可以轻松构建功能齐全的应用。了解性能优化等注意事项对于高效开发同样重要。1.微信小程序前端开发框架介绍微信小程序概述微信小程序是微信官方推出的一种无需下
Ubuntu安装LAMP
L_h1
测试 ubuntu linux
在安装vim时遇到了一个问题：E:无法获得锁/var/lib/dpkg/lock-frontend-open(11:资源暂时不可用)E:无法获取dpkg前端锁(/var/lib/dpkg/lock-frontend)，是否有其他进程正占用它？解决办法：强制解锁sudorm/var/lib/dpkg/lock-frontendsudorm/var/cache/apt/archives/locksud
震惊！DOM变化监控神器MutationObserver，前端开发必知的隐藏武器！
coding随想
JavaScript 前端 javascript html5
一、什么是MutationObserver？如果你是一个前端开发者，一定会遇到这样的场景：页面动态加载内容后，某些操作失效了。比如，你写了一个监听按钮点击的代码，但按钮是通过AJAX动态加载的，你的代码根本无法触发。这个时候，你就需要一个“监控哨兵”——MutationObserver，它能实时监听DOM树的变化，帮你捕获那些“暗中作祟”的节点变动。MutationObserver是HTML5引入
Coze Studio 架构拆解：AI Agent 开发平台项目结构全分析
代码简单说
2025开发必备(限时特惠) 架构 人工智能 Coze Studio 架构 AI Agent 开发平台 全栈 AI 工程化 图解架构
CozeStudio架构拆解：AIAgent开发平台项目结构全分析标签：CozeStudio项目架构、领域驱动设计DDD、全栈开发规范、Hertz框架、前后端协作、云原生容器、前端测试、IDL接口设计、微服务解耦、AI开发平台源码分析在最近研究AIAgent开发平台的过程中，我深入分析了刚刚开源的CozeStudio项目。这套系统是国内少有的开源全栈AI工程化项目，代码整洁、架构先进，特别是它基于
关于前端的性能优化
性能优化主要涵盖了以下四个方面：(tip:仅代表个人总结，如有不当，还希望看到的大佬多多指示)减少网络请求：合并文件、使用CDN、启用缓存。优化资源加载：代码分割、懒加载、图片压缩。提升渲染性能：减少重绘回流、防抖节流、使用WebWorker。监控和迭代：定期使用工具检测性能，持续优化。一、网络层面优化减少HTTP请求合并文件：将多个CSS或JavaScript文件合并成一个，减少请求次数。使用C
linux网卡显示未知未托管,linux有线网络显示设备未托管
NetworkManagerNetworkManager是为了使网络配置尽可能简单而开发的网络管理软件包，如果使用DHCP，NetworkManager会替换默认的路由表、从DHCP服务器获取IP地址并根据情况设置域名服务器，NetworkManager的目标是使网络能够开箱即用。NetworkManager由两部分组成:一个以超级用户运行的守护进程(network-manager)；一个前端管理
页面开发样式和布局入门：Vite + Vue 3 + Less
页面开发样式和布局入门：Vite+Vue3+Less引言在现代前端开发中，样式和布局是页面开发的核心部分。随着技术的不断发展，Vite、Vue3和Less等工具和框架的出现，使得前端开发变得更加高效和灵活。然而，尽管这些工具和框架提供了强大的功能，但在实际开发中仍然会遇到各种样式和布局的问题。本文将结合Vite、Vue3和Less，详细介绍在页面开发中常见的样式和布局问题，并提供解决方案和最佳实践
推客系统小程序机构版开发上线全攻略（2025年最新版）
vx_qutudy
推客小程序 推客系统开发 推客系统源码
一、开发前准备：筑牢基础，合规先行1.1注册与认证账号注册：登录微信公众平台注册小程序账号，选择“机构版”类型，获取唯一AppID。资质认证：基础资质：企业营业执照、法人身份证、对公账户信息。特殊资质：涉及支付功能：需办理《增值电信业务经营许可证》（ICP证）。涉及教育/医疗内容：需《互联网信息服务许可证》或相关行业资质。1.2技术选型：高效与扩展并重模块推荐方案前端框架微信原生框架（WXML+W
网络安全第14集
不灭锦鲤
web安全 安全
前言：小迪安全14集，这集重点内容：0、什么是js渗透测试？在javascript中也存在变量和函数，存在可控变量和函数就有可能存在在漏洞，js开发的web应用和php、java开发的区别是，js能看得到的源代码，php看不到，但是风险就是未授权访问、配置信息泄露（加密算法、key秘钥等），源代码看得到，存在更多的url泄露，从而可能会出现未授权访问，从url，前提：web应用可以采用前端语言或后
怎么判断一个DAPP是否真正去中心化
判断一个DAPP（去中心化应用）是否真正去中心化，需要从多个维度进行考察。以下是关键评估标准：1.区块链依赖程度✅真正去中心化：核心逻辑和数据处理完全依赖智能合约，运行在区块链上（如以太坊、Solana等）。❌伪去中心化：依赖中心化服务器处理关键数据或业务逻辑，仅前端去中心化。2.智能合约控制权✅去中心化：合约代码开源，无管理员密钥（adminkey）或可升级后门，治理由DAO（去中心化自治组织）
Web前端交互利用Python跟大模型操作
哥本哈士奇
前端 交互 python
Web前端交互利用Python跟大模型操作一个简单的演示，如何把大模型应用集成到自己的应用场景当中。这里的场景我们模拟的是在吃鸡游戏中，一个作战计划，是否符合老六的行为规范。吃鸡游戏已经风靡很多年，游戏里每个人的游戏风格都不一样，有喜欢钢枪的，有喜欢随机应变的，也有喜欢当老六苟分的。每种风格的游戏方式以及游戏里的行为都不同，所以这里将演示如何应用大模型，去判断一个人的游戏方式，是否符合一个老六的行
尚硅谷微服务尚医通前端npm报错
尚硅谷微服务尚医通前端npm报错血泪史我的版本的8.0.0，弹幕里说降级npm到6.多就能安装，经过许久挣扎还是各种报错，最后通过一下办法解决解决办法:不需要降低npm版本，办法如下这里需要使用到cnpm：1.导入下载好到的项目2.安装cnpm：npminstallcnpm-g3.安装node-sass：cnpminstallnode-sass4.继续安装：cnpminode-sass-D5.删除
Layui核心语法快速入门指南
bemyrunningdog
layui 前端 javascript 开发语言
Layui基本语法学习指南Layui是一个经典的模块化前端框架，以其轻量易用、组件丰富著称。以下是Layui的核心语法结构和使用方法：一、模块加载机制（核心基础）//标准模块加载语法layui.use(['module1','module2'],function(){//回调函数中获取模块varmod1=layui.module1;varmod2=layui.module2;//模块功能调用mod
前端基础知识Vue3系列 - 04（Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同）
开始之前CompositionAPI可以说是Vue3的最大特点，那么为什么要推出CompositionApi，解决了什么问题？通常使用Vue2开发的项目，普遍会存在以下问题：代码的可读性随着组件变大而变差每一种代码复用的方式，都存在缺点TypeScript支持有限以上通过使用CompositionApi都能迎刃而解正文一、OptionsApiOptionsAPI，即大家常说的选项API，即以vue
Vue 工程化开发入门
dawn191228
前端学习 vue.js 前端 javascript 前端框架
文章目录一、Vue工程化开发概述二、Vue脚手架三、项目运行流程四、组件化开发五、组件注册六、总结在当今的前端开发领域，Vue.js以其简洁、高效的特性受到了广泛的欢迎。Vue的工程化开发能够帮助我们更好地组织和管理项目，提高开发效率和代码质量。本文将带你了解Vue工程化开发入门知识，包括脚手架、项目运行流程、组件化以及组件注册。一、Vue工程化开发概述工程化开发是一种将软件开发过程规范化、标准化
HQL之投影查询
归来朝歌
HQL Hibernate 查询语句 投影查询
在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按钮监听器的四种技术
百合不是茶
android xml配置 监听器 实现接口
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
TeamForge How do Attachement Anchor Wiki 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整合-附源码
白糖_
eclipse spring tomcat Hibernate Google
今天用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
oracle ADR
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
c iconv utf8&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
android theme
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&
