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)
探索 Elm 的 Material Design 组件库：elm-mdl
薄垚宝
探索Elm的MaterialDesign组件库：elm-mdlelm-mdlElm-portoftheMaterialDesignLiteCSS/JSlibrary项目地址:https://gitcode.com/gh_mirrors/el/elm-mdl项目介绍elm-mdl是一个基于Elm语言的MaterialDesign组件库，它是对Google的MaterialDesignLite库的El
arco.design动态引入icon
如果我们想在项目中动态引入icon，类似与这样：在官网中，有这么一句话：Arco图标是一个独立的库，需要额外引入并注册使用。这意味着，arco中的所有icon默认不是全量引入的，你只能手动引入单个icon并使用/*其它页面结构...*/你想要在递归组件中动态引入组件，则需要在main.ts中配置额外引入图标库import{createApp}from'vue'importArcoVuefrom'@
js 使用缓存判断在规定时间内显示一次弹框
洪洪呀
javascript 缓存 开发语言
js使用缓存判断在规定时间内显示一次弹框功能拆分，新用户注册完成登录跳转首页，js根据注册时间判断显示一个新手指引的弹窗，只在注册当天登录且显示一次jQuery(document).ready(function($){getWinnerModalShow()});//新手指引functiongetWinnerModalShow(){varwinnerModal=newbootstrap.Modal
.NET 9.0 的 Blazor Web App 项目，Bootstrap Blazor 全局异常 ＜ErrorLogger＞ 使用备忘
cqths
BootstrapBlazor Blazor Web App bootstrap 前端 c# .net
一、全局异常通过组件实现，可以对全局的日志、异常进行统一输出，该组件【已经包含】在中，使用了组件包裹的razor组件【不用】再额外添加组件包裹。二、全局异常默认已经开启、后台自动生效，【不用】在项目中做其他任务额外操作，项目发布后执行时，自动拦截异常，项目不会因为发生异常而崩溃、导致不可用，可能会在页面顶端显示全局异常的简要说明，如下图所示。三、如果要显示全局异常的详细说明，可以在appsetti
org.pentaho:pentaho-aggdesigner-algorithm:jar:5.1.5-jhyde Maven下载不下来
百夜﹍悠ゼ
maven jar java
找了很多文章都提供以下两种方式1）设置maven镜像仓库aliyunmaven*阿里云spring插件仓库https://maven.aliyun.com/repository/spring-pluginnexus-aliyun*Nexusaliyunhttp://maven.aliyun.com/nexus/content/groups/public2）pom文件增加springhttps://
touchdesigner常用材质
守着黎明看日出
笔记
1.constant常用的渲染材质，对光效无反应，没有阴影。可直接调整该材质的基础颜色2.phong可以渲染透明度灯光相机等，但几何体要有法线和纹理贴图。PhongShading建模三种类型的反射光：环境光-环境光被认为不是来自任何特定方向的光，因此在整个表面上是恒定的。漫反射-漫反射对由粗糙表面反射的光进行建模。该光在所有方向上均等地反射，因此观察者的位置不会影响感知的照明。镜面反射-镜面反射对
教育定制开发中，如何通过代码实现多终端适配？
万岳科技系统开发
外卖系统 外卖系统开发 小程序 android 开源
随着移动设备、平板电脑和PC的普及，教育平台的用户往往使用多种终端访问系统。为了提供一致的用户体验，教育定制开发必须考虑多终端适配问题。本文将探讨在教育系统开发中，如何通过代码实现多终端适配，并提供一些核心技术和代码示例。一、多终端适配的关键技术响应式设计（ResponsiveDesign）使用CSS媒体查询，根据屏幕大小动态调整页面布局。前端框架支持借助前端框架如Bootstrap、Tailwi
【Python第三方库】PyQt5安装与应用
墨辰JC
Python python qt 开发语言 学习 pyqt
文章目录引言安装PYQT5基于Pyqt5的简单桌面应用常用的方法与属性QtDesigner工具使用与集成窗口类型QWidget和QMainWindow区别UI文件加载方式直接加载UI文件的方式显示窗口转化py文件进行显示窗口PyQt5中常用的操作信号与槽的设置绑定页面跳转引言PyQt5是一个流行的Python库，用于创建桌面应用程序。它提供了对Qt应用程序框架的访问，使得开发者可以利用Qt的强大功
ZCC6507: A Superior Isolated Power Solution Outperforming SN6507
zhichengwei
其他
Inthefieldofisolatedpowerdesign,engineersareconstantlyseekingmoreefficient,flexible,andcost-effectivesolutions.TheZCC6507,ahigh-performancepush-pulltransformerdriver,standsoutwithitsuniquedesignandsig
射频仿真软件：ADS (Advanced Design System)_（10）.振荡器设计
kkchenjj
电路仿真 电路仿真 模拟仿真 仿真模拟
振荡器设计在射频仿真软件领域，振荡器设计是一个非常重要的模块。振荡器是射频系统中的关键组件，用于生成稳定的频率信号。在ADS(AdvancedDesignSystem)中，振荡器的设计可以通过多种方法实现，包括解析方法、数值方法和仿真方法。本节将详细介绍振荡器设计的基本原理和具体操作步骤，并通过具体的代码示例来展示如何在ADS中进行振荡器的设计和仿真。振荡器的基本原理振荡器是一种能够产生连续周期性
富文本框的使用kindeditor
zihandan
Java 富文本
有时项目中需要引入富文本框（这里我简单的写一下使用步骤）一、1、在工程wapapp下面建一个文件plugins（名字自己定为了放kindeditor-4.1.10文件）将kindeditor-4.1.10放入该文件下下载地址：http://download.pchome.net/design/homepage/download-170038.html2、建一个jsp页面，代码如下：Insertti
Blazor 组件库 BootstrapBlazor 中Editor组件介绍
虚幻私塾
python 计算机
优质资源分享学习路线指引（点击解锁）知识定位人群定位Python实战微信订餐小程序进阶级本课程是pythonflask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。Python量化交易实战入门级手把手带你打造一个易扩展、更安全、效率更高的量化交易系统组件介绍Editor组件是对Summernote组件的二次封装。组件分为div模式和editor模式。默认状态下edito
Bootstrap Blazor 实战 Dialog 对话框组件快速入门
Densen2014
BootstrapBlazor Blazor组件 Blazor html5 bootstrap .net
官方文档1.注入服务DialogService@injectDialogServiceDialogService或者后置代码[Inject][NotNull]privateDialogService?DialogService{get;set;}2.弹出说明awaitDialogService.Show(newDialogOption(){Title="运行结果",IsScrolling=true
SAP-ABAP：SAP的Screen Layout Designer屏幕布局设计器详解及示例
爱喝水的鱼丶
VIP详情查看专栏 ABAP开发之必须知道的 SAP-ABAP开发基础详解 SAP ABAP ERP 企业应用 开发运维
在SAP中，ScreenLayoutDesigner（屏幕布局设计器）是用于设计和维护屏幕（Dynpro）布局的工具。通过ScreenLayoutDesigner，您可以创建和修改屏幕元素（如输入字段、按钮、文本、表格控件等），并定义它们的属性、位置和交互行为。以下是关于ScreenLayoutDesigner的详细说明和使用方法：1.ScreenLayoutDesigner的用途设计屏幕布局：定
.NET 9.0 的 Blazor Web App 项目，自定义日志 TLog V2 使用备忘
cqths
Blazor Web App EF Core Blazor web app .net c# 数据库
一、TLogV1使用静态数据库上下文，优点是速度快，缺点是内存占用大，参见.NET9.0的BlazorWebApp项目、BootstrapBlazor组件库、自定义日志TLog使用备忘_navigationmanager.tobaserelativepath-CSDN博客二、TLogV2改为依赖注入方式，优点、缺点与V1相反，使用方法与V1相同。namespaceBlazorWebAppNet9S
【系统设计】俭约架构七大法则
乘风而来的思绪
系统设计 读书 系统架构 原则 架构原则 俭约架构 成本原则 java
目录简约架构（FrugalArchitecture）设计阶段（DESIGN）法则一：将成本作为一种非功能性需求法则二：达成最终成本与业务保持一致的系统法则三：架构设计就是一系列权衡测量阶段（MEASURE）法则四：无法观测的系统导致无法估量的成本法则五：依托成本感知架构实现成本控制观察阶段（OBSERVE）法则六：成本优化是个渐进的过程法则七：没经挑战的成功会让人想当然阅读原文简约架构（Fruga
DDD聚合在 ASP.NET Core中的实现
Rverdoser
asp.net 后端
在ASP.NETCore中实现DDD（领域驱动设计，Domain-DrivenDesign）聚合通常涉及到几个关键步骤，包括定义领域模型、实现领域服务、使用仓储模式等。以下是如何在ASP.NETCore应用中实现DDD聚合的一些步骤和示例。1.定义领域模型首先，你需要定义你的领域模型。这通常包括实体（Entities）、值对象（ValueObjects）和领域事件（DomainEvents）。示例
Java进阶必读书籍推荐
m0_74824054
面试 学习路线 阿里巴巴 java 开发语言
一java编程入门《java编程思想》，《Agilejava》中文版，《你必须知道的261个java语言问题》二java编程进阶《编程匠艺——如何编写卓越的代码》，《重构改善既有代码的设计》，《驱动测试开发byExample》三java架构师之路《ExpertOne-on-OneJ2EEDesignandDevelopment》，《企业应用架构模式》，《敏捷软件开发原则、模式和实践》四软件开发过程
分享58个Vue模板源码总有一个是你想要的
2401_86528135
vue.js 前端 javascript
分享58个Vue模板源码总有一个是你想要的学习知识费力气，收集整理更不易。知识付费甚欢喜，为咱码农谋福利。源码下载链接：https://pan.baidu.com/s/1OgcE5ZYet6l94niZuBvTwg?pwd=8888提取码：8888项目名称：amis自定义组件模板（vue30技术栈）AntDesignProVue+Golang后台管理基础模板electron+vue桌面应用开发快速
Vulhub靶机 MinIO信息泄露漏洞（CVE-2023-28432）（渗透测试详解）
芜丶湖
安全性测试 网络 linux 服务器
一、开启vulhub环境docker-composeup-d启动dockerps查看开放的端口二、访问靶机IP9001端口1、漏洞复现这个漏洞的节点存在于这个路径：http://your-ip:9000/minio/bootstrap/v1/verify对该路径发送POST请求会返回一段JSON数据：burp抓登陆包，修改post接口返回包内json字段中，我们可以看到MINIO_ROOT_USE
AntDesignBlazor示例——创建项目
antdblazor
本示例是AntDesignBlazor的入门示例，在学习的同时分享出来，以供新手参考。示例代码仓库：https://gitee.com/known/BlazorDemo1.开发环境VS202217.8.2.NET8AntDesign0.16.22.学习目标创建新项目安装AntDesign组件包及使用方法添加按钮测试组件3.演练步骤打开VS2022，新建BlazorWebApp，命名AntDesig
22_设计方案（第三章-技术路线）
珞圻-Health
信息化项目验收文档体系 政务 大数据 人工智能
3.7技术路线3.7.1开发及设计工具（1）开发工具IntellijIDEA2020、visualstudiocode1.51、GIT，mvn、jekins、Jemeter、LoadRunner、Sonar。（2）设计工具数据库设计工具：Powerdesigner。接口设计工具：YAPI。原型设计工具：Axure、墨刀、蓝湖。3.7.2后台框架3.7.2.1基础框架系统采用以微服务的思想，拆分冗余
六西格玛设计DFSS：让企业运营零浪费高收益——张驰咨询
张驰课堂
六西格玛设计 DFSS
在当今全球化和数字化的商业环境中，企业面临着前所未有的挑战与机遇。为了在激烈的市场竞争中脱颖而出，企业不仅需要创新的产品和服务，更需要高效、精准的管理体系。六西格玛设计（DesignforSixSigma,DFSS），作为一种以数据驱动、顾客为中心的管理哲学，正成为企业实现精益管理、提升竞争力的关键工具。六西格玛设计DFSS的核心理念六西格玛设计不仅仅是一种方法论，更是一种思维方式。它强调在产品设
Python----PyQt开发（PyQt高级：文件浏览器）
蹦蹦跳跳真可爱589
Python PyQt pyqt python
一、效果展示二、界面设计该界面通过QtDesigner设计#-*-coding:utf-8-*-#Formimplementationgeneratedfromreadinguifile'file_web.ui'##Createdby:PyQt5UIcodegenerator5.15.9##WARNING:Anymanualchangesmadetothisfilewillbelostwhenpy
Chromium Design Document学习及翻译之Multi-process Architecture
lail3344
browser chromium
ChromiumDesignDocument学习及翻译之Multi-processArchitecturehttp://www.chromium.org/developers/design-documents/multi-process-architectureMulti-processArchitectureThisdocumentdescribesChromium'shigh-levelarc
Chromium多进程架构
不觉
Chromium chromium Multi-process Architecture
原文地址：http://www.chromium.org/developers/design-documents/multi-process-architecture1、多进程架构浏览器引擎不可能绝对稳定，也不可能绝对安全。某种程度上，当前的Web浏览器类似于之前单用户、多任务协同工作的操作系统。现代操作系统使用不同的进程将不同的应用隔离起来，因而更加健壮。一个应用程序的的崩溃一般不会影响其他应用
【Chromium】多进程架构（Multi-process Architecture）
余亖爷
Chromium chromium 多进程架构
原文链接：http://www.chromium.org/developers/design-documents/multi-process-architecture问题创造一个从来不会崩溃或者挂起的渲染引擎是几乎不可能。同样，创造一个绝对安全的渲染引擎也非常的困难。从某些方面说，现在的浏览器就像早期的单用户共享多任务操作系统一样。一个应用程序出错可能导致整个系统的崩溃，现代浏览器的一个tab也一
Xtensa处理器系列介绍
小蘑菇二号
处理器
介绍（一）：Xtensa处理器系列是由Tensilica公司（已被CadenceDesignSystems收购）开发的一款高度可配置的32位微处理器内核系列，以其独特的可定制化能力而著称。Xtensa处理器适用于广泛的嵌入式应用领域，包括但不限于消费电子、物联网（IoT）、移动设备、网络基础设施、汽车电子、工业控制、以及各种需要高性能和低功耗的场合。**主要特点：**1.**高度可配置性**：-X
TDesign：Picker 选择器
sunly_
TDesign tdesign
Picker选择器API文档地址单列选择器用法///viewonTap:(){TDPicker.showMultiPicker(context,data:[controller.coinList],title:'',rightTextStyle:TextStyle(color:AppColors.ColorMain),onConfirm:(selected){controller.onTapCoi
【ElasticSearch】Es 启动流程 初始化流程 源码分析
九师兄
源码 es 启动流程
文章目录1.概述1.1核心类2.主要流程2.1主方法2.1.1关闭过程分析2.2execute方法2.3Bootstrap.init2.4INSTANCE.setup方法2.5创建节点2.5.1创建PluginsService2.5.2创建ThreadPool及ThreadContext实例2.5.3初始化ResourceWatcherService2.5.4创建NodeClient2.5.5创建
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
