FreeCodeCamp - Responsive Design with Bootstrap
Use Responsive Design with Bootstrap Fluid Containers
现在让我们回到我们的Cat Photo应用。这次，我们将用流行的响应式框架Bootstrap来美化它。
Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 —— 强调 响应式设计的概念。
通过响应式设计，你无需再为你的网站设计一个手机版的。它在任何尺寸的屏幕上看起来都会不错。
你仅需要通过添加下列代码到你的HTML开头来将Bootstrap添加到任意应用中：
在此案例中，我们已经帮你把上述代码添加到页面中。
首先，我们需要把所有的HTML内容放在class为container-fluid的div下。
Make Images Mobile Responsive
首先，在已有的图片下方添加一张新的图片。将它的 src属性设置为 /images/running-cat.jpg。
如果图片的尺寸刚好等于我们手机的尺寸，那想必是极好的。
谢天谢地，通过Bootstrap，我们要做的只是给图片添加 img-responsive class属性。这样图片的宽度就能完美地适配你的页面的宽度了。
CatPhotoApp
Click here for cat photos .
Things cats love:
cat nip
laser pointers
lasagna
Top 3 things cats hate:
flea treatment
thunder
other cats
Center Text with Bootstrap
既然我们在使用Bootstrap，我们可以通过居中头部元素来使它看起来更棒。 我们所要做的只是把text-center class属性添加给 h2 元素。
记住：你可以用空格分开多个class来为同一个元素添加多个 class 属性， 就像这样：
your text
CatPhotoApp
Click here for cat photos .
Things cats love:
cat nip
laser pointers
lasagna
Top 3 things cats hate:
flea treatment
thunder
other cats
Create a Bootstrap Button
Bootstrap有它自己的 button 按钮风格， 看起来要比默认的按钮好看得多。
在三只猫咪图片下面创建一个新的 button 元素。给它添加 btn class 属性以及"Like"文本。
CatPhotoApp
Click here for cat photos .
like
Things cats love:
cat nip
laser pointers
lasagna
Top 3 things cats hate:
flea treatment
thunder
other cats
Create a Block Element Bootstrap Button
通常情况下，你的 button 元素仅与它所包含的文本一样宽。通过使其成为块级元素，你的按钮将会伸展并填满页面整个水平空间，任何在它之下的元素都会跟着浮动至该区块的下一行。
这张图阐述了行内元素与块级元素的区别：
注意，这些按钮仍然需要 btn class。
添加Bootstrap的 btn-block class 到你的按钮。
CatPhotoApp
Click here for cat photos .
Like
Things cats love:
cat nip
laser pointers
lasagna
Top 3 things cats hate:
flea treatment
thunder
other cats
Taste the Bootstrap Button Color Rainbow
深蓝色btn-primary是你的应用的主要颜色，被用在那些用户主要采取的操作上。
添加Bootstrap的 btn-primary class 属性到按钮标签上。
注意：这个按钮仍然需要 btn 和 btn-block 属性！
CatPhotoApp
Click here for cat photos .
Like
Things cats love:
cat nip
laser pointers
lasagna
Top 3 things cats hate:
flea treatment
thunder
other cats
Call out Optional Actions with Button Info
Bootstrap自带了一些预定义的按钮颜色。浅蓝色 btn-info被用在那些用户可能会采取的操作上。
在你的 "Like" 按钮下面添加一个文本为 "Info" 的块级Bootstrap按钮，并为其添加 btn-info 和 btn-block class属性。
注意：这些按钮仍然需要 btn 和 btn-block class属性
CatPhotoApp
Click here for cat photos .
Like
Info
Things cats love:
cat nip
laser pointers
lasagna
Top 3 things cats hate:
flea treatment
thunder
other cats
Warn your Users of a Dangerous Action
Bootstrap自带了一些预定义的按钮颜色。红色btn-danger被用来提醒用户该操作具有“破坏性”，例如删除一张猫的图片。
创建一个文本为 "Delete" 的按钮，并且给它添加 class btn-danger。
注意：这些标签仍然需要 btn 与 btn-block class。
CatPhotoApp
Click here for cat photos .
Like
Info
Delete
Things cats love:
cat nip
laser pointers
lasagna
Top 3 things cats hate:
flea treatment
thunder
other cats
Use the Bootstrap Grid to Put Elements Side By Side
Bootstrap 使用一种响应式网格布局——可轻松实现将多个元素放入一行并指定各个元素的相对宽度的需求。Bootstrap 中大多数的class属性都可以设置于 div 元素中。
下面这张图表显示了 Bootstraps 的12列网格布局是如何起作用的：
an image illustrating Bootstrap's grid system
请注意，在这张图表中，class属性 col-md-* 正被使用。在这里，md 表示 medium (中等的)，* 代表一个数字，它指定了这个元素所占的列宽。通过此图表的属性设置可知，在中等大小的屏幕上(例如笔记本电脑)，元素的列宽被指定了。
在我们创建的 Cat Photo App 中，将会使用 col-xs-*，其中 xs 是 extra small 缩写（应用于较小的屏幕，比如手机屏幕），* 是你需要填写的数字，代表在一行中,各个元素应该占的列宽。
把 Like, Info 和 Delete 三个按钮一并放入一个 元素中；然后，其中的每一个按钮都需要各自被一个
元素包裹。
当div 元素设置了 class 属性 row 之后，那几个按钮便可嵌入其中。
CatPhotoApp
Click here for cat photos .
Things cats love:
cat nip
laser pointers
lasagna
Top 3 things cats hate:
flea treatment
thunder
other cats
Ditch Custom CSS for Bootstrap
现在，让我们清理一下之前的代码了，以让我们的 Cat Photo 应用看起来更简洁，用 Bootstrap 内置的样式来替换我们之前自定义的样式。
别担心 —— 以后我们会有大把时间来自定义我们的 CSS 样式的 ：）
删除 style 元素里的 .red-text, p 和 .smaller-imageCSS声明，这样你的 style 留下的声明就只有 h2 和 thick-green-border。
然后删除包含死链接的 p 元素。 移除 h2 元素的 red-text class 并且用 Bootstrap的 text-primary class替换之。
最后，移除第一个 img 元素的 "smaller -image" class ，替换为 Bootstrap的 img-responsive class。
CatPhotoApp
Click here for cat photos .
Things cats love:
cat nip
laser pointers
lasagna
Top 3 things cats hate:
flea treatment
thunder
other cats
Use Spans for Inline Elements
你可以用 span 标签来创建行内元素。还记得我们是怎样使用 .btn-block来创建填满整行的按钮吗？
这张图展示了 inline 元素与 block-level 块级元素的区别：
通过使用 span 元素，你可以把几个元素放在一起。你甚至可以用此为一个元素的不同部分指定样式。
把 "Things cats love" 中的 "love" 放到 span 标签下。然后为其添加 text-danger class 来使文字变成红色。
举例，"Top 3 things cats hate" 元素的写法如下：
Top 3 things cats hate:
CatPhotoApp
Things cats love:
cat nip
laser pointers
lasagna
Top 3 things cats hate:
flea treatment
thunder
other cats
Create a Custom Heading
让我们来为Cat Photo 应用做一个导航吧，把标题和惬意的猫图片放在同一行。
记住，Bootstrap使用响应式栅格系统，这使得把元素放入行内并为每个元素指定宽度变得很容易。大部分的 Bootstrap的 class 都可以被用在 div 元素上。
这张图展示了 Bootstrap 的12栏栅格布局是如何工作的：
an image illustrating Bootstrap's grid system
注意，在此图示中，我们使用了 col-md-* class 。此处 md 代表中等，* 指定了元素宽度应该占用的栏数。 在这个案例中，我们指定了元素在中等大小的屏幕（如笔记本等）上所占用的栏数。
在此应用中，我们将使用 col-xs-*， xs 意味着非常小（比如非常小的手机屏幕）， * 指定了元素宽度应该占用的栏数。
将你的第一张图片和 h2 元素放到同一个 元素下。 将你的
h2 元素放到
下，你的图片放到
下，这样他们就能位于同一行了。
注意现在图片是否与文字大小一致呢？
Things cats love:
cat nip
laser pointers
lasagna
Top 3 things cats hate:
flea treatment
thunder
other cats
Add Font Awesome Icons to our Buttons
Font Awesome 是一个非常方便的图标库。这些图标都是矢量图形，被保存在 .svg 的文件格式中。这些图标就和字体一样，你可以通过像素单位指定它们的大小，它们将会继承其父HTML元素的字体大小。
你可以将 Font Awesome 图标库增添至任何一个应用中，方法很简单，只需要在你的 HTML 头部增加下列代码即可：
不过，我们已经事先在幕后为此页面添加了该功能。（不必重复添加上面这段代码）
i 元素起初一般是让其它元素有斜体(italic)的功能，不过现在一般用来指代图标。你可以将 Font Awesome 中的 class 属性添加到 i 元素中，把它变成一个图标，比如：
你可以通过 Font Awesome 库增加一个 thumbs-up 图标到你的 like 按钮中，方法是在i 元素中增加 class 属性 fa 和 fa-thumbs-up。
Things cats love:
cat nip
laser pointers
lasagna
Top 3 things cats hate:
flea treatment
thunder
other cats
Add Font Awesome Icons to all of our Buttons
Font Awesome 是一个非常方便的图标库。这些图片都是矢量图，以 .svg 文件格式保存。这些图标用起来就像字体一样。你可以使用像素单位来指定他们的大小，它们会继承父级HTML元素的字体大小。
使用 Font Awesome 分别为你的 info 按钮添加 info-circle 图标，为你的 delete 按钮添加 trash 图标。
Things cats love:
cat nip
laser pointers
lasagna
Top 3 things cats hate:
flea treatment
thunder
other cats
Responsively Style Radio Buttons
你还可以将 Bootstrap 的 col-xs-*用在 form 元素中。这样的话，我们的单选按钮就可以均匀地在页面上展开，不需要知道屏幕的分辨率有多宽。
将页面中的两个单选按钮放置于一个 元素中。然后，添加
元素并分别包裹每一个单选按钮。
Things cats love:
cat nip
laser pointers
lasagna
Top 3 things cats hate:
flea treatment
thunder
other cats
Responsively Style Checkboxes
你还可以将 Bootstrap 的 col-xs-*用在 form 元素中。这样我们的复选框就可以均匀地在页面上展开了，不管屏幕的分辨率是多大。
将你所有的复选框都放置于一个 元素中。然后分别把每个按钮都放置于一个
元素中。
Things cats love:
cat nip
laser pointers
lasagna
Top 3 things cats hate:
flea treatment
thunder
other cats
Style Text Inputs as Form Controls
你可以在你的 button 提交按钮上添加 Font Awesome的 fa-paper-plane 图标，方法是在元素中增加
给你表单的文本输入框增加 classform-control 。在你的表单提交按钮中增加 class btn btn-primary 。同样，在这个提交按钮中增加 Font Awesome 的 fa-paper-plane 图标。
Things cats love:
cat nip
laser pointers
lasagna
Top 3 things cats hate:
flea treatment
thunder
other cats
Line up Form Elements Responsively with Bootstrap
现在让我们把 input 元素和提交按钮 button 放到同一行。我们将用和之前一样的方法：通过使用拥有 rowclass 属性的 div 元素和其它在它之内的具有 col-xs-*class 属性的 div 元素。
将你的表单中的 input 文本框和提交按钮 button 放到一个具有 row class 属性的 div 元素中。 将你的 input 放置于 class 为 col-xs-7 的 div元素中。 将你的表单的提交按钮 button 放置于 class 属性为 col-xs-5 的 div 元素中。
这是目前为止我们的 Cat Photo 应用的最后一个挑战了。希望你能够喜欢学习 Font Awesome，Bootstrap和响应式设计！
Things cats love:
cat nip
laser pointers
lasagna
Top 3 things cats hate:
flea treatment
thunder
other cats
Create a Bootstrap Headline
现在，让我们从头开始练习我们的HTML, CSS 和 Bootstrap 技术。
我们将会搭建一个 jQuery playground，它也即将在我们接下来的 jQuery 课程中被投入使用。
首先，创建一个 h3 元素，并且包含文本内容 jQuery Playground 。
在 h3 元素中设置 Bootstrap 的 class 属性 text-primary 为其上色，同时增加 Bootstrap 的 class 属性 text-center 使文本居中显示。
jQuery Playground
House our page within a Bootstrap Container Fluid Div
现在让我们确保页面里所有的内容都是响应式的。
让我们将 h3 元素放置于一个class属性为 container-fluid的 div 元素中。
jQuery Playground
Create a Bootstrap Row
现在将要为我们的内联元素创建一个 Bootstrap 行。
在 h3 标签下创建一个 div 元素，并且带有 class 属性 row。
Split your Bootstrap Row
既然我们已经有了一个 Bootstrap 行，让我们来把它分成两栏来放置我们的元素吧。
在你的行内添加两个 div 元素，每个都具有 col-xs-6 class 属性。
Create Bootstrap Wells
Bootstrap 有一个 class 属性叫做 well，它的作用是为设定的列创造出一种视觉上的深度感（一种视觉上的效果，动手写代码体会一下）。
在你的每一个class为col-xs-6的div 元素中都嵌入一个带有 well class 属性的 div 元素。
Add Elements within your Bootstrap Wells
现在我们已经在行内的每一列都嵌套了好几层 div 元素了。这已经足够了。现在让我们添加 button 元素吧。
在每一个 well div 元素下放置三个 button 元素。
Apply the Default Bootstrap Button Style
Bootstrap 还有一种属于按钮的 class 属性叫做 btn-default 。
为你的每一个 button 元素增加两个 class 属性: btn 和 btn-default 。
Create a Class to Target with jQuery Selectors
并不是每一个 class 属性都是用于 CSS 的。 有些时候我们创建一些 class 只是为了更方便地在jQuery中选中这些元素。
为你的每一个 button 都添加 target class。
jQuery Playground
Add ID Attributes to Bootstrap Elements
回忆一下，我们除了可以给元素增加 class 属性，还可以给你的每个元素增添一个 id 属性。
每一个指定元素的 id 都是唯一的，并且在每个页面中只能使用一次。
现在给我们每个包含 class well 的 div 元素一个唯一的 id。
记住，你可以像这样赋予一个元素 id：
给左边的 well 赋予 id left-well。给右边的 well 赋予 id right-well。
Label Bootstrap Wells
让我们为我们的 wells 都标上它们的 id 吧。
在 left-well 之上，class为 col-xs-6 的 div 元素里面，添加一个文本为 #left-well 的 h4元素。
在 right-well 之上，class为 col-xs-6 的 div 元素里面，添加一个文本为 #right-well 的 h4元素。
Give Each Element a Unique ID
我们也可以使用jQuery并通过每个按钮各自唯一的 id 来标识出它们。
给你的每一个按钮一个唯一的 id ，以 target1 为开始，target6 为结束。
确保 target1 到 target3 在 #left-well 之中，target4 到 target6 则在 #right-well 之中。
Label Bootstrap Buttons
正如我们标注了每个 wells， 我们同样想要标注每一个按钮。
为你的每个 button 元素选择与其 id 选择器相同的文本。
jQuery Playground
#left-well
#target1
#target2
#target3
#right-well
#target4
#target5
#target6
Use Comments to Clarify Code
当我们开始使用jQuery，我们将修改HTML元素，但是实际上我们并不是直接在 HTML 文本中修改。
我们必须确保让每个人都知道，他们不应该直接修改此页面上这些代码。
记住，你可以在 为结束的地方进行评论注释。(像这样， )
请在你的 HTML 顶部加如下一段注释：Only change code above this line. 。
jQuery Playground
#left-well
#target1
#target2
#target3
#right-well
#target4
#target5
#target6
你可能感兴趣的:(FreeCodeCamp - Responsive Design with Bootstrap)
若依集成knife4j实现swagger文档增强
Roc-xb
knife4j
knife4j的前身是swagger-bootstrap-ui，为了契合微服务的架构发展,由于原来swagger-bootstrap-ui采用的是后端Java代码+前端Ui混合打包的方式,在微服务架构下显的很臃肿,因此项目正式更名为knife4j。目录一、单体版本1、ruoyi-admin\pom.xml模块添加整合依赖2、SwaggerController.java修改跳转访问地址二、前后端分离
内核调试环境：buildroot/debootstrap制作文件系统、编译内核、QEMU模拟
苏打呀
linux qemu kernel
编译内核#安装常用工具和依赖，可能会多，懒得分了，全装了吧反正以后说不定还要用。。。sudoaptinstallcurlwgetgpgzshtreegitnet-toolsproxychains4remminavimtarstracellvmclangunzipgccgcc-multilibbuild-essentialflexbisoncmakemakegawkdkmsautoconfninja
A Software as a Service (SaaS)
W_X_99515681
数据结构
IntroductionThisfinalprojectisacomprehensiveassignmentdesignedtoassessyourmasteryofwebdevelopmentconceptscoveredthroughoutthecourse.Itisasignificantundertakingthatwillrequiresubstantialtimeanddedicati
数据库原理实验报告：Powerdesigner建模E-R模型并转换表
不吃~香菜
各类实验报告汇总需要私 数据库 实验报告 Powerdesigner E-R模型建模
注：此实验并不完整，仅供参考，如需完整版请私我留言一、实验目的：二、实验工具：三、实验要求：四、实验过程：图文并茂，每一步都包含详细图片，总共11页word！往期回顾：计算机接口实验报告：8254定时/计数器应用实验-CSDN博客计算机接口实验报告：D/A转换实验-CSDN博客计算机接口实验报告：LED显示实验-CSDN博客数据库原理实验报告：Powerdesigner建模E-R模型并转换表一、实
HTML5实现左右滑动数据变化
ice_junjun
HTML 左右滑动
在HTML中怎么样实现左右滑动？代码附上Bootstrap实例-下拉菜单（Dropdowns）-->-->欢迎登陆页面！这是一个超大屏幕（Jumbotron）的实例。学习更多-->响应式表格布局产品付款日期状态产品123/11/2013待发货产品210/11/2013发货中产品320/10/2013待确认产品420/10/2013已退货产品123/11/2013待发货产品210/11/2013发货
Secure PDF Documents CRACK
SEO-狼术
Delphi net Crack pdf
SecurePDFDocumentsCRACKSecurePDFby/nsoftwareenablesuserstosign,verify,encrypt,anddecryptfileswithintegrationintoexistingworkflows.SecurePDFby/nsoftwareisapowerfuldevelopmentlibrarydesignedtoprovideent
FastAPI 最佳架构项目推荐
穆耀双
FastAPI最佳架构项目推荐fastapi_best_architectureFastAPIbasedontheconstructionofthefrontandbackoftheseparationofrightscontrolsystem,usingauniquepseudothree-tierarchitecturemodeldesign,andasatemplatelibraryfree
23种设计模式-抽象工厂(Abstract Factory)设计模式
程序员汉升
# 设计模式 设计模式 java 抽象工厂模式
抽象工厂设计模式什么是抽象工厂设计模式？抽象工厂模式的特点抽象工厂模式的结构抽象工厂模式的优缺点抽象工厂方法的Java实现代码总结总结什么是抽象工厂设计模式？抽象工厂模式（AbstractFactoryDesignPattern）是一种创建型设计模式，它提供了一种方式来创建一系列相关或相互依赖的对象，而无需指定它们的具体类。与工厂方法模式的区别在于，抽象工厂模式通常用于处理产品族的创建，确保创建的
常见的设计模式(单例模式&工厂模式)
客行.
设计模式 单例模式 观察者模式
目录一.为什么要学习设计模式？二.单例模式概念优点缺点1.饿汉模式1.1概念1.2示例2.懒汉模式2.1概念2.2示例三.工厂模式1.概念2.使用场景3.工厂方法一.为什么要学习设计模式？设计模式（Designpattern）代表了最佳的实践，是很多优秀的软件开发人员的经验总结，是解决特定问题的解决方案。它并不是语法规定，也不拘泥于特定语言。恰当的使用设计模式可以代码的可复用性，可维护性，可扩展性
selectpicker.js 下拉框多选控件的属性和方法
草木红
# JavaScript js jquery javascript bootstrap
中文网：https://www.bootstrapselect.cn/index.htmgithub：https://github.com/snapappointments/bootstrap-select需要用到的js和css（按顺序引用）：bootstrap.min.cssbootstrap-select.cssjquery.min.jsbootstrap.min.jsbootstrap-se
什么是设计模式以及常见的例子（如单例、工厂、观察者等）
python资深爱好者
c++ 设计模式 单例模式
设计模式（DesignPattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式的主要目的是为了可重用代码、让代码更容易被他人理解、提高代码的可靠性。设计模式一般包含模式名称、问题、目的、解决方案、效果等基本要素。设计模式根据目的（即模式是用来做什么的）可以分为三大类：创建型模式、结构型模式和行为型模式。下面分别给出几个常见的设计模式例子，包括单例模式、工厂模
Netty源码分析之Reactor线程模型详解
Java-进阶架构师
java java编程 java 后端 java-ee
在分析源码之前，我们先分析，哪些地方用到了EventLoop？NioServerSocketChannel的连接监听注册NioSocketChannel的IO事件注册NioServerSocketChannel连接监听在AbstractBootstrap类的initAndRegister()方法中，当NioServerSocketChannel初始化完成后，会调用case标记位置的代码进行注册。f
【 ＜二＞ 丹方改良：Spring 时代的 JavaWeb】之 Spring Boot 中的 RESTful API 设计：从上手到骨折
Foyo Designer
spring spring boot restful Spring MVC Async CrossOrigin
点击此处查看合集https://blog.csdn.net/foyodesigner/category_12907601.html?fromshare=blogcolumn&sharetype=blogcolumn&sharerId=12907601&sharerefer=PC&sharesource=FoyoDesigner&sharefrom=from_link一、开篇整活儿咱今儿个唠唠Spr
基于FPGA的DDS连续FFT 仿真验证
toonyhe
FPGA开发 fpga开发 DDS FFT IFFT
基于FPGA的DDS连续FFT仿真验证1摘要本文聚焦AMDLogiCOREIPFastFourierTransform(FFT)核心，深入剖析其在FPGA设计中的应用。该FFT核心基于Cooley-Tukey算法，具备丰富特性，如支持多种数据精度、算术类型及灵活的运行时配置。文中详细介绍了其架构选项、端口设计、理论运算原理，以及在不同场景下的动态范围特性。同时，结合VivadoDesignSuit
Zynq PS端外设之IIC
Mazy.v
fpga开发
IIC协议高电平采样：时序电路的信号采样一般靠的是时钟上升沿采样，而IIC协议则是靠高电平采样。读写数据帧ZynqPS的IIC外设1.PS的I2C0I2C0的引脚既可以使用MIO，也可以使用EMIO。为了方便起见，可以直接OpenElaboratedDesign对EMIO进行管脚约束。2.SDK开发//iic用到的头文件#include"xiicps.h"#include"xparameters.
Sketch：UI界面设计原则与Sketch实现_2024-07-21_23-01-33.Tex
chenjj4003
游戏开发 ui 交互 microsoft react.js 前端
Sketch：UI界面设计原则与Sketch实现Sketch：UI界面设计原则与Sketch实现UI设计基础UI设计的重要性在数字产品日益丰富的今天，用户界面设计（UserInterfaceDesign，简称UI设计）成为了决定产品用户体验的关键因素。良好的UI设计不仅能够提升产品的美观度，更重要的是，它能够确保用户在使用产品时的直观性、易用性和效率。UI设计的重要性体现在以下几个方面：提升用户体
MATLAB中的APPdesigner绘制多图问题解析？与逻辑值转成十进制
Ndmzi
Matlab matlab 开发语言
在matlabAPPdesigner中绘图可以用UIAxes组件进行绘图，但是当想多张图时，只能提前绘制图像区域不方便。下面是几种办法：为了操作可以添加Panl组件，方便操作。1、当是要求的几个图像大小都是相同时刻采用函数：tiledlayout创建分块图布局tiledlayout(m,n)tiledlayout('flow')tiledlayout(___,Name,Value)tiledlay
React Material Components Web 使用教程
计煦能Leanne
ReactMaterialComponentsWeb使用教程react-mdc-webMaterialDesignComponentsforReact项目地址:https://gitcode.com/gh_mirrors/re/react-mdc-web项目介绍ReactMaterialComponentsWeb（简称react-mdc-web）是一个基于Google的MaterialDesign
【 ＜二＞ 丹方改良：Spring 时代的 JavaWeb】之 Spring MVC 的核心组件：DispatcherServlet 的工作原理
Foyo Designer
spring mvc java servlet HandlerMapping ViewResolver
点击此处查看合集https://blog.csdn.net/foyodesigner/category_12907601.html?fromshare=blogcolumn&sharetype=blogcolumn&sharerId=12907601&sharerefer=PC&sharesource=FoyoDesigner&sharefrom=from_link一、DispatcherServ
【脑洞小剧场】零帧起手创业小公司之 第一次技术分享会
Foyo Designer
技术职场小剧 职场和发展 程序人生 学习方法 改行学it 程序员创富
点击查看小剧场合集https://blog.csdn.net/foyodesigner/category_12896948.html阳光明媚的早晨，段萌儿怀揣着对新工作的无限憧憬，踏入了这家充满未知的小公司。然而，她万万没想到，第一天上班就迎来了一场“惊悚”之旅。阳光透过会议室的窗户，洒在摆满椅子的地板上，技术分享会的氛围既紧张又期待。今天，将是公司第一次正式的技术交流盛会，各路技术大牛摩拳擦掌，
C#基于MVC模式实现TCP三次握手，附带简易日志管理模块
风，停下
C# 设计模式 网络协议 c# mvc tcp/ip
C#基于MVC模式实现TCP三次握手1Model1.1ServerModel1.2ClientModel1.3配置参数模块1.4日志管理模块1.4.1数据结构1.4.1日志管理工具类1.4.1日志视图展示1.4.1.1UcLogManage.cs1.4.1.2UcLogManage.Designer.cs2视图（View）2.1ViewServer2.1.1ViewServer.cs2.1.1Vi
Python + Qt Designer构建多界面GUI应用程序：Python如何调用多个界面文件
懒大王爱吃狼
python python qt 命令模式 mysql 数据库 Python基础 开发语言
引言QtDesigner是一个用户友好的图形用户界面设计工具，它可以帮助开发人员通过拖放的方式快速创建界面。在实际开发中，往往需要设计多个界面文件，并在Python代码中进行统一管理和使用。本文将介绍如何在Python中使用QtDesigner设计好的多个界面文件的常用方法。方法一：单独加载并显示如果界面文件相对独立，并且没有复杂的依赖关系，可以考虑单独加载并显示每个界面文件。fromPyQt5i
集成学习（Ensemble Learning）基础知识1
代码骑士
# 机器学习 集成学习 机器学习 人工智能
文章目录一、集成学习1、基本概念2、回顾:误差的偏差-方差分解3、为什么集成学习有效？4、基学习器：“好而不同”5、集成学习的两个基本问题（1）如何训练出具有差异性的多个基学习器？（2）如何将多个基学习器的预测结果集成为最终的强学习器预测结果？二、自助法（Bagging）1、Bagging2、BootstrapBootstrap采样的数学性质3、Bagging:集成学习的两个基本问题（1）如何训练
基于图像比对的跨平台UI一致性校验工具开发全流程指南——Android/iOS/Web三端自动化测试实战
追寻向上
ui android ios
一、需求背景与方案概述1.1为什么需要跨平台UI校验？在移动互联网时代，同一产品需覆盖Android、iOS和Web三端。由于不同平台的开发框架（如Android的MaterialDesign与iOS的Cupertino风格）及渲染引擎差异，UI界面易出现以下问题：布局错位：按钮位置偏移、文本换行不一致视觉差异：颜色色差、字体粗细不同交互逻辑冲突：滑动方向、弹窗动画不一致传统人工测试效率低且易遗漏
（六一）HarmonyOS Design 的用户引导设计
小_铁
Harmony OS Next Harmony OS Next
HarmonyOSDesign的用户引导设计在HarmonyOS应用生态中，用户引导设计犹如新用户探索应用世界的指南针，其重要性不言而喻。精心构建的用户引导不仅能帮助新用户快速上手应用，更能在初次交互中建立起良好的用户体验，为应用的长期留存和口碑传播奠定基础。接下来，我们深入剖析用户引导的重要性，并结合HarmonyOS的特性，探讨如何设计出切实有效的引导流程，同时辅以代码示例，让开发者能够更直观
Kafka系列之—向Kafka 写入数据（四）
葛旭朋
Kafka kafka 分布式 java
一，创建Kafka生产者1.1必选的三个属性1.1.1bootstrap.servers指定broker的地址清单，不需要包含所有的broker地址，生产者会从给定的broker里找到其它broker的信息，建议最少提供两个broker的信息。1.1.2key.serializerbroker希望接收到的消息的键和值都是字节数组。1.1.3value.serializer指定的类会将值序列化。1.
开源的 AntDesignVue 表单设计器使用教程
低代码研究员
FormCreate 开源 FormCreate vue.js 表单设计器 ant-design-vue
FcDesigner版是一款基于Vue3.0的低代码可视化表单设计器工具，通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。并广泛应用于在政务系统、OA系统、ERP系统、电商系统、流程管理等领域。源码地址:Github|Gitee|文档|在线演示本项目采用Vue3.0和AntDesignVue进行页面构建，内置多语言解决方案，支持二次扩展开发，支持
react加antd封装表格单、多选组件，支持跨页选择缓存
Cirrod
react.js 缓存 javascript
页面效果子组件importReact,{useState,useEffect,forwardRef,useImperativeHandle}from'react';import{Modal,Input,Table,Pagination,Avatar,Select}from'antd';import{UserOutlined}from'@ant-design/icons';importtype{Ta
Qt动态设置样式，实现样式实时切换
水瓶丫头站住
样式表 Qt qt 开发语言 样式设置
文章目录概要插件实现界面核心代码设置样式扩展导入样式导出样式概要最近需要设计界面，但是使用Qt的Designer只能看到每个界面单独的样式，程序中有些事需要主界面调用进行组合的界面，因此需要写一个插件Ui可以直接输入样式内容，进行实时设置，查看样式效果。插件实现界面应用样式前应用样式后核心代码设置样式voidSetSheetStyle::on_pbtn_Apply_clicked(){qApp->
mysql数据库转移到oracle
阳光女孩666
oracle mysql mysql oracle
在研发过程中，可能会用到将表数据库中的表结构及数据迁移到另外一种数据库中，比如说从mysql中迁移到oracle中，常用的方法有好些，如下：1、使用powerdesigner，先连接mysql然后生成mysql的pdm，再把mysql的pdm生成cdm(注：如果设计阶段有cdm那更好，可以直接使用，因为cdm是和具体数据库类型无关的，所以需要转为这个中间模型)，最后把cdm生成oracle类型的p
html
周华华
html
js
1，数组的排列
var arr=[1,4,234,43,52,];
for(var x=0;x<arr.length;x++){
for(var y=x-1;y<arr.length;y++){
if(arr[x]<arr[y]){
&
【Struts2 四】Struts2拦截器
bit1129
struts2拦截器
Struts2框架是基于拦截器实现的，可以对某个Action进行拦截，然后某些逻辑处理，拦截器相当于AOP里面的环绕通知，即在Action方法的执行之前和之后根据需要添加相应的逻辑。事实上，即使struts.xml没有任何关于拦截器的配置，Struts2也会为我们添加一组默认的拦截器，最常见的是，请求参数自动绑定到Action对应的字段上。
Struts2中自定义拦截器的步骤是：
make:cc 命令未找到解决方法
daizj
linux 命令未知 make cc
安装rz sz程序时，报下面错误：
[root@slave2 src]# make posix
cc -O -DPOSIX -DMD=2 rz.c -o rz
make: cc：命令未找到
make: *** [posix] 错误 127
系统：centos 6.6
环境：虚拟机
错误原因：系统未安装gcc，这个是由于在安
Oracle之Job应用
周凡杨
oracle job
最近写服务，服务上线后，需要写一个定时执行的SQL脚本，清理并更新数据库表里的数据，应用到了Oracle 的 Job的相关知识。在此总结一下。
一：查看相关job信息
1、相关视图
dba_jobs
all_jobs
user_jobs
dba_jobs_running 包含正在运行
多线程机制
朱辉辉33
多线程
转至http://blog.csdn.net/lj70024/archive/2010/04/06/5455790.aspx
程序、进程和线程：
程序是一段静态的代码，它是应用程序执行的蓝本。进程是程序的一次动态执行过程，它对应了从代码加载、执行至执行完毕的一个完整过程，这个过程也是进程本身从产生、发展至消亡的过程。线程是比进程更小的单位，一个进程执行过程中可以产生多个线程，每个线程有自身的
web报表工具FineReport使用中遇到的常见报错及解决办法（一）
老A不折腾
web报表 finereport java报表 报表工具
FineReport使用中遇到的常见报错及解决办法（一）
这里写点抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。
出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。
1、address pool is full：
含义：地址池满，连接数超过并发数上
mysql rpm安装后没有my.cnf
林鹤霄
没有my.cnf
Linux下用rpm包安装的MySQL是不会安装/etc/my.cnf文件的，
至于为什么没有这个文件而MySQL却也能正常启动和作用，在这儿有两个说法，
第一种说法，my.cnf只是MySQL启动时的一个参数文件，可以没有它，这时MySQL会用内置的默认参数启动，
第二种说法，MySQL在启动时自动使用/usr/share/mysql目录下的my-medium.cnf文件，这种说法仅限于r
Kindle Fire HDX root并安装谷歌服务框架之后仍无法登陆谷歌账号的问题
aigo
root
原文：http://kindlefireforkid.com/how-to-setup-a-google-account-on-amazon-fire-tablet/
Step 4: Run ADB command from your PC
On the PC, you need install Amazon Fire ADB driver and instal
javascript 中var提升的典型实例
alxw4616
JavaScript
// 刚刚在书上看到的一个小问题,很有意思.大家一起思考下吧
myname = 'global';
var fn = function () {
console.log(myname); // undefined
var myname = 'local';
console.log(myname); // local
};
fn()
// 上述代码实际上等同于以下代码
m
定时器和获取时间的使用
百合不是茶
时间的转换 定时器
定时器:定时创建任务在游戏设计的时候用的比较多
Timer();定时器
TImerTask();Timer的子类 由 Timer 安排为一次执行或重复执行的任务。
定时器类Timer在java.util包中。使用时，先实例化，然后使用实例的schedule(TimerTask task, long delay)方法，设定
JDK1.5 Queue
bijian1013
java thread java多线程 Queue
JDK1.5 Queue
LinkedList：
LinkedList不是同步的。如果多个线程同时访问列表，而其中至少一个线程从结构上修改了该列表，则它必须 保持外部同步。（结构修改指添加或删除一个或多个元素的任何操作；仅设置元素的值不是结构修改。）这一般通过对自然封装该列表的对象进行同步操作来完成。如果不存在这样的对象，则应该使用 Collections.synchronizedList 方
http认证原理和https
bijian1013
http https
一.基础介绍
在URL前加https://前缀表明是用SSL加密的。 你的电脑与服务器之间收发的信息传输将更加安全。
Web服务器启用SSL需要获得一个服务器证书并将该证书与要使用SSL的服务器绑定。
http和https使用的是完全不同的连接方式，用的端口也不一样,前者是80，后
【Java范型五】范型继承
bit1129
java
定义如下一个抽象的范型类，其中定义了两个范型参数，T1，T2
package com.tom.lang.generics;
public abstract class SuperGenerics<T1, T2> {
private T1 t1;
private T2 t2;
public abstract void doIt(T
【Nginx六】nginx.conf常用指令(Directive)
bit1129
Directive
1. worker_processes 8;
表示Nginx将启动8个工作者进程，通过ps -ef|grep nginx,会发现有8个Nginx Worker Process在运行
nobody 53879 118449 0 Apr22 ? 00:26:15 nginx: worker process
lua 遍历Header头部
ronin47
lua header 遍历
local headers = ngx.req.get_headers()
ngx.say("headers begin", "<br/>")
ngx.say("Host : ", he
java-32.通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小(两数组的差最小)。
bylijinnan
java
import java.util.Arrays;
public class MinSumASumB {
/**
* Q32.有两个序列a,b，大小都为n,序列元素的值任意整数，无序.
*
* 要求：通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小。
* 例如:
* int[] a = {100,99,98,1,2,3
redis
开窍的石头
redis
在redis的redis.conf配置文件中找到# requirepass foobared
把它替换成requirepass 12356789 后边的12356789就是你的密码
打开redis客户端输入config get requirepass
返回
redis 127.0.0.1:6379> config get requirepass
1) "require
[JAVA图像与图形]现有的GPU架构支持JAVA语言吗？
comsci
java语言
无论是opengl还是cuda，都是建立在C语言体系架构基础上的，在未来，图像图形处理业务快速发展，相关领域市场不断扩大的情况下，我们JAVA语言系统怎么从这么庞大，且还在不断扩大的市场上分到一块蛋糕，是值得每个JAVAER认真思考和行动的事情
安装ubuntu14.04登录后花屏了怎么办
cuiyadll
ubuntu
这个情况，一般属于显卡驱动问题。
可以先尝试安装显卡的官方闭源驱动。
按键盘三个键：CTRL + ALT + F1
进入终端，输入用户名和密码登录终端：
安装amd的显卡驱动
sudo
apt-get
install
fglrx
安装nvidia显卡驱动
sudo
ap
SSL 与 数字证书 的基本概念和工作原理
darrenzhu
加密 ssl 证书 密钥 签名
SSL 与 数字证书 的基本概念和工作原理
http://www.linuxde.net/2012/03/8301.html
SSL握手协议的目的是或最终结果是让客户端和服务器拥有一个共同的密钥，握手协议本身是基于非对称加密机制的，之后就使用共同的密钥基于对称加密机制进行信息交换。
http://www.ibm.com/developerworks/cn/webspher
Ubuntu设置ip的步骤
dcj3sjt126com
ubuntu
在单位的一台机器完全装了Ubuntu Server，但回家只能在XP上VM一个，装的时候网卡是DHCP的，用ifconfig查了一下ip是192.168.92.128,可以ping通。
转载不是错：
Ubuntu命令行修改网络配置方法
/etc/network/interfaces打开后里面可设置DHCP或手动设置静态ip。前面auto eth0，让网卡开机自动挂载.
1. 以D
php包管理工具推荐
dcj3sjt126com
PHP Composer
http://www.phpcomposer.com/
Composer是 PHP 用来管理依赖（dependency）关系的工具。你可以在自己的项目中声明所依赖的外部工具库（libraries），Composer 会帮你安装这些依赖的库文件。
中文文档
入门指南
下载
安装包列表
Composer 中国镜像
Gson使用四（TypeAdapter）
eksliang
json gson Gson自定义转换器 gsonTypeAdapter
转载请出自出处：http://eksliang.iteye.com/blog/2175595 一.概述
Gson的TypeAapter可以理解成自定义序列化和返序列化 二、应用场景举例
例如我们通常去注册时（那些外国网站），会让我们输入firstName，lastName,但是转到我们都
JQM控件之Navbar和Tabs
gundumw100
html xml css
在JQM中使用导航栏Navbar是简单的。
只需要将data-role="navbar"赋给div即可：
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active&qu
利用归并排序算法对大文件进行排序
iwindyforest
java 归并排序 大文件 分治法 Merge sort
归并排序算法介绍，请参照Wikipeida
zh.wikipedia.org/wiki/%E5%BD%92%E5%B9%B6%E6%8E%92%E5%BA%8F
基本思想：
大文件分割成行数相等的两个子文件，递归（归并排序）两个子文件，直到递归到分割成的子文件低于限制行数
低于限制行数的子文件直接排序
两个排序好的子文件归并到父文件
直到最后所有排序好的父文件归并到输入
iOS UIWebView URL拦截
啸笑天
UIWebView
本文译者：candeladiao，原文：URL filtering for UIWebView on the iPhone说明：译者在做app开发时，因为页面的javascript文件比较大导致加载速度很慢，所以想把javascript文件打包在app里，当UIWebView需要加载该脚本时就从app本地读取，但UIWebView并不支持加载本地资源。最后从下文中找到了解决方法，第一次翻译，难免有
索引的碎片整理SQL语句
macroli
sql
SET NOCOUNT ON
DECLARE @tablename VARCHAR (128)
DECLARE @execstr VARCHAR (255)
DECLARE @objectid INT
DECLARE @indexid INT
DECLARE @frag DECIMAL
DECLARE @maxfrag DECIMAL
--设置最大允许的碎片数量,超过则对索引进行碎片
Angularjs同步操作http请求with $promise
qiaolevip
每天进步一点点 学习永无止境 AngularJS 纵观千象
// Define a factory
app.factory('profilePromise', ['$q', 'AccountService', function($q, AccountService) {
var deferred = $q.defer();
AccountService.getProfile().then(function(res) {
hibernate联合查询问题
sxj19881213
sql Hibernate HQL 联合查询
最近在用hibernate做项目，遇到了联合查询的问题，以及联合查询中的N+1问题。
针对无外键关联的联合查询，我做了HQL和SQL的实验，希望能帮助到大家。（我使用的版本是hibernate3.3.2）
1 几个常识：
（1）hql中的几种join查询，只有在外键关联、并且作了相应配置时才能使用。
（2）hql的默认查询策略，在进行联合查询时，会产
struts2.xml
wuai
struts
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache
