찾다
웹 프론트엔드부트스트랩 튜토리얼Bootstrap의 양식에 대한 자세한 설명

Bootstrap의 양식에 대한 자세한 설명

Mar 15, 2021 am 10:05 AM
bootstrap형태

이 글에서는 Bootstrap의 양식을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Bootstrap의 양식에 대한 자세한 설명

관련 추천: "부트스트랩 튜토리얼"

Form은 사용자와 소통하는 데 사용되는 웹 컨트롤입니다. 좋은 양식 디자인을 사용하면 웹 페이지가 사용자와 더 잘 소통할 수 있습니다. 양식의 공통 요소에는 주로 텍스트 입력 상자, 드롭다운 선택 상자, 라디오 버튼, 확인 버튼, 텍스트 필드 및 버튼 등이 포함됩니다. 각 컨트롤은 서로 다른 역할을 하며, 브라우저마다 양식 컨트롤에 대한 렌더링 스타일이 다릅니다.

  마찬가지로 양식도 부트스트랩 프레임워크의 핵심 콘텐츠입니다. 이번 글에서는 부트스트랩의 양식을 자세히 소개하겠습니다

기본 양식

 기본 양식에 대해서는 부트스트랩에서 맞춤 효과 디자인을 많이 하지 않고, form.fieldset, legend 및 label 태그가 사용자 정의되었습니다.

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

label {
  display: inline-block;
  margin-bottom: 5px;
  font-weight: bold;
}

주로 이러한 요소의 여백, 패딩 및 테두리가 구체화되고 설정되었습니다.

물론 이러한 요소 외에도 양식에는 입력이 있습니다. select, textarea 및 기타 요소는 Bootstrap 프레임워크에서 클래스 이름 `form-control`이 사용자 정의됩니다. 즉, 이러한 요소가 클래스 이름 "form-control"을 사용하면 일부 디자인 사용자 정의 효과가 달성됩니다

 1 .폭이 100%가 됩니다

 2. 연한 회색(#ccc) 테두리를 설정합니다

 3. 모서리를 4px로 둥글게 처리합니다

 4. 그림자 효과를 설정하고 요소에 초점이 맞춰지면 그림자 및 테두리 효과가 변경됩니다.

5. 자리 표시자 색상을 #999


  
         <input>   
  
         <input>   
  
         <input>     

Example block-level help text here.

  
  
       
  

Bootstrap의 양식에 대한 자세한 설명

가로 형식

로 설정합니다. Bootstrap 프레임워크의 기본 형식은 세로 표시 스타일이지만 가로 형식 스타일이 필요한 경우가 많습니다.

.form-horizontal 클래스를 양식에 추가하고 Bootstrap의 미리 설정된 그리드 클래스를 사용하여 레이블 레이블과 제어 그룹을 수평으로 나란히 배치합니다. 이렇게 하면 .form-group의 동작이 그리드 시스템의 행처럼 동작하도록 변경되므로 추가로 .row를 추가할 필요가 없습니다

 

  1. 양식 컨트롤의 패딩 및 여백 값 설정

2. 그리드 시스템의 "행"과 유사하게 "form-group" 표현 변경


  
         
      <input>     
  
  
         
      <input>     
  
  
    
      
               
    
  
  
    
           
  

Bootstrap의 양식에 대한 자세한 설명

Joint form

때로는 양식 컨트롤을 한 줄에 표시해야 할 때가 있습니다. Bootstrap 프레임워크에서 이러한 양식 효과를 구현하는 것은 쉽습니다.

요소에 "form-inline"이라는 클래스 이름을 추가하기만 하면 됩니다. 인라인 폼의 구현 원리는 매우 간단합니다. 폼 컨트롤을 한 줄에 표시하려면 폼 컨트롤을 인라인 블록 요소(display:inline-block)로 설정해야 합니다.

 .form-inline 클래스를 추가하세요. 해당 콘텐츠는 왼쪽 정렬되어 인라인 블록 수준 컨트롤처럼 동작합니다. 뷰포트 너비가 768px 이상인 경우에만 적용 가능합니다(뷰포트 너비가 더 작으면 양식이 축소됨)

Bootstrap에서 입력 상자 및 라디오/다중 선택 상자 컨트롤은 기본적으로 너비: 100%로 설정됩니다. 인라인 형식에서는 이러한 요소의 너비를 width:auto;로 설정하므로 여러 컨트롤을 같은 줄에 정렬할 수 있습니다. 레이아웃 요구 사항에 따라 일부 추가 사용자 정의 구성 요소가 필요할 수 있습니다.

각 입력 컨트롤에 대해 레이블 레이블이 설정되지 않으면 화면 판독기가 이를 올바르게 인식하지 못합니다. 이러한 인라인 양식의 경우 레이블에 .sr-only 클래스를 설정하여 숨길 수 있습니다. aria-label, aria-labelledby 또는 제목 속성과 같은 라벨 태그에 대한 대안을 제공하는 보조 기술도 있습니다. 이들 중 아무것도 없으면 스크린 리더는 다른 마크업 대신 자리 표시자를 사용하기 위해 자리 표시자 속성(있는 경우)을 사용할 수 있지만 이 접근 방식은 부적절하다는 점에 유의하세요.


  
         <input>   
  
         <input>   
  

Bootstrap의 양식에 대한 자세한 설명


  
         <input>   
  
         <input>   
  
       
  

Bootstrap의 양식에 대한 자세한 설명


  
         
      
$
      <input>       
.00
    
  
  

Bootstrap의 양식에 대한 자세한 설명

양식 컨트롤

 모든 양식은 양식 컨트롤로 구성됩니다. 컨트롤이 없으면 형태는 의미를 잃습니다

【입력 상자】

  单行输入框,常见的文本输入框,也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的

  包括大部分表单控件、文本输入域控件,还支持所有 HTML5 类型的输入控件: text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color

  为了让控件在各种表单风格中样式不出错,需要添加类名“form-control”

<input>

Bootstrap의 양식에 대한 자세한 설명

【下拉列表】

  Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple。Bootstrap框架会为这些元素提供统一的样式风格 

  [注意]许多原生选择菜单 - 即在 Safari 和 Chrome 中 - 的圆角是无法通过修改 border-radius 属性来改变的

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Bootstrap의 양식에 대한 자세한 설명

【文本域】

  文本域和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。 当然,也可以根据需要改变 rows 属性

<textarea></textarea>

Bootstrap의 양식에 대한 자세한 설명

【多选和单选框】

  多选框(checkbox)用于选择列表中的一个或多个选项,而单选框(radio)用于从多个选项中只选择一个

  Bootstrap框架中checkbox和radio有点特殊,Bootstrap针对他们做了一些特殊化处理,主要是checkbox和radio与label标签配合使用会出现一些小问题(最头痛的是对齐问题) 

  在Bootstrap框架中,主要借助“.checkbox”和“.radio”样式,来处理复选框、单选按钮与标签的对齐方式

  
  
  
  
  

Bootstrap의 양식에 대한 자세한 설명

  通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框(checkbox)或单选框(radio)控件上,可以使这些控件排列在一行 






Bootstrap의 양식에 대한 자세한 설명

【静态控件】

  如果需要在表单中将一行纯文本和 label 元素放置于同一行,为

元素添加 .form-control-static 类即可


  
         
      

email@example.com

    
  
  
         
      <input>     
  

1Bootstrap의 양식에 대한 자세한 설명


  
         

email@example.com

  
  
         <input>   
  

1Bootstrap의 양식에 대한 자세한 설명

控件尺寸

  前面看到的表单控件都正常的大小。可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名,用来控制表单控件的高度。这两个类名是:

  1、input-sm:让控件比正常大小更小

  2、input-lg:让控件比正常大小更大

  这两个类适用于表单中的input,textarea和select控件

<input>
<input>
<input>



1Bootstrap의 양식에 대한 자세한 설명

  通过添加 .form-group-lg 或 .form-group-sm 类,为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸


  
         
      <input>     
  
  
         
      <input>     
  

1Bootstrap의 양식에 대한 자세한 설명

  用栅格系统中的列(column)包裹输入框或其任何父元素,都可很容易的为其设置宽度

  
    <input>   
  
    <input>   
  
    <input>   

1Bootstrap의 양식에 대한 자세한 설명

控件状态

  表单主要用来与用户沟通,好的表单就能更好的与用户进行沟通,而好的表单一定离不开表单的控件状态。

  每一种表单状态都能给用户传递不同的信息,比如表单有焦点的状态可以告诉用户可以输入或选择东西,禁用状态可以告诉用户不可以输入或选择东西,还有就是表单控件验证状态,可以告诉用户的操作是否正确等。Bootstrap框架中的表单控件也具备这些状态

【焦点状态】

  焦点状态是通过伪类“:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式,重新添加阴影效果box-shadow

<input>

1Bootstrap의 양식에 대한 자세한 설명

【禁用状态】

  Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性“disabled”。和其他表单的禁用状态不同的是,Bootstrap框架做了一些样式风格的处理 ,被禁用的输入框颜色更浅,并且还添加了 not-allowed 鼠标状态

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eee;
opacity: 1;
}
<input>

1Bootstrap의 양식에 대한 자세한 설명

  在Bootstrap框架中,如果fieldset设置了disabled属性,整个域都将处于被禁用状态 

  [注意]对于整个禁用的域中,如果legend中有输入框的话,这个输入框是无法被禁用的


    <input>     
             <input>     
    
                  
    
           
       

1Bootstrap의 양식에 대한 자세한 설명

【只读状态】

  为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅(就像被禁用的输入框一样),但是仍然保留标准的鼠标状态

<input>

1Bootstrap의 양식에 대한 자세한 설명

【校验状态】

   在制作表单时,不免要做表单验证。同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果

  1、.has-warning:警告状态(黄色)

  2、.has-error:错误状态(红色)

  3、.has-success:成功状态(绿色)

  使用的时候只需要在form-group容器上或在其父级容器上对应添加状态类名

     <input>   A block of help text that breaks onto a new line and may extend beyond one line.
     <input>
     <input>
  
       
  
       
  
       

Bootstrap의 양식에 대한 자세한 설명

  很多时候,在表单验证的时候,不同的状态会提供不同的 icon,比如成功是一个对号(√),错误是一个叉号(×)等。在Bootstrap框中也提供了这样的效果。如果想让表单在对应的状态下显示 icon 出来,只需要在对应的状态下添加类名“has-feedback”

  [注意]此类名要与“has-error”、“has-warning”和“has-success”在一起使用,且只能使用在文本输入框 元素上

     <input>      (success)
     <input>      (warning)
     <input>      (error)
     
    @     <input>   
     (success)

2Bootstrap의 양식에 대한 자세한 설명

  当然,也可以为水平排列的表单和内联表单设置可选的图标


  
         
      <input>              (success)     
  
  
         
      
        @         <input>       
             (success)     
  

2Bootstrap의 양식에 대한 자세한 설명


  
         <input>          (success)   
  
         
      @       <input>     
         (success)   

2Bootstrap의 양식에 대한 자세한 설명

【提示信息】

  在制作表单验证时,要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个"help-block"样式,将提示信息以块状显示,并且显示在控件底部。


  
         <input>     你输入的信息是正确的        
  
         <input>     请输入正确信息        
  
         <input>     你输入的信息是错误的          

2Bootstrap의 양식에 대한 자세한 설명

按钮

  按钮是Bootstrap框架核心内容之一。因为按钮是Web制作中不可缺少的东西。而且不同的Web页面具有不同的按钮风格,甚至说同一个Web网站或应用程序具有多种按钮风格,比如说不同的按钮颜色、大小和状态等

【基本按钮】

  Bootstrap框架的基本按钮是通过类名“btn”来实现

<button>我是一个基本按钮</button>

2Bootstrap의 양식에 대한 자세한 설명

【默认按钮】

  Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格,然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

2Bootstrap의 양식에 대한 자세한 설명

【按钮元素】

  可以为 

  制作按钮通常使用下面代码来实现:

2Bootstrap의 양식에 대한 자세한 설명

  当然了,还可以使用在其他的标签元素上,如

,只要在制作按钮的标签元素上添加类名“btn”即可

  虽然按钮类可以应用到其他元素上,但是,导航和导航条组件只支持 


<input>
a标签按钮
span标签按钮
div标签按钮

2Bootstrap의 양식에 대한 자세한 설명

【按钮风格】

  在Bootstrap框架中除了默认的按钮风格之外,还有其他六种按钮风格,每种风格的其实都一样,不同之处就是按钮的背景颜色、边框颜色和文本颜色

  使用起来就很简单,就像前面介绍的默认按钮一样的使用方法,只需要在基础按钮“.btn”基础上追加对应的类名,就可以得到需要的按钮风格

<button>基础按钮.btn</button>
<button>默认按钮.btn-default</button>
<button>主要按钮.btn-primary</button>
<button>成功按钮.btn-success</button>
<button>信息按钮.btn-info</button>
<button>警告按钮.btn-warning</button>
<button>危险按钮.btn-danger</button>
<button>链接按钮.btn-link</button>

2Bootstrap의 양식에 대한 자세한 설명

【按钮尺寸】

  使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮

  通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素,并且这个按钮不会有任何的padding和margin值

<p>
  <button>(大按钮)Large button</button>
  <button>(大按钮)Large button</button>
</p>
<p>
  <button>(默认尺寸)Default button</button>
  <button>(默认尺寸)Default button</button>
</p>
<p>
  <button>(小按钮)Small button</button>
  <button>(小按钮)Small button</button>
</p>
<p>
  <button>(超小尺寸)Extra small button</button>
  <button>(超小尺寸)Extra small button</button>
</p>
<button>(块级元素)Block level button</button>
<button>(块级元素)Block level button</button>

Bootstrap의 양식에 대한 자세한 설명

【按钮状态】

  Bootstrap框架针对按钮的状态做了一些特殊处理。在Bootstrap框架中针对按钮的状态效果主要分为两种:活动状态和禁用状态。

  Bootstrap按钮的活动状态主要包括按钮的悬浮状态(:hover),点击状态(:active)和焦点状态(:focus)几种

  当按钮处于激活状态时,其表现为被按压下去(底色更深、边框夜色更深、向内投射阴影)。对于 

  由于 :active 是伪状态,因此无需额外添加,但是在需要让其表现出同样外观的时候可以添加 .active 类

<button>Button1</button>
<button>Button2</button>
<a>Link1</a>
<a>Link2</a>

3Bootstrap의 양식에 대한 자세한 설명

  和input等表单控件一样,在Bootstrap框架的按钮中也具有禁用状态的设置。禁用状态与其他状态按钮相比,就是背景颜色的透明度做了一定的处理,opcity的值从100%调整为65%。

  在Bootstrap框架中,要禁用按钮有两种实现方式:

  方法1:在标签中添加disabled属性

  方法2:在元素标签中添加类名“disabled”

  两者的主要区别是:

  “.disabled”样式不会禁止按钮的默认行为,比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为,则需要通过JavaScript这样的语言来处理

  对于标签来说,它并不支持使用disable属性,只支持通过类名“.disable”来禁用按钮,可以禁止元素的链接跳转行为


               
    通过disabled属性禁用按钮      通过添加类名disabled禁用按钮     未禁用的按钮

3Bootstrap의 양식에 대한 자세한 설명

更多编程相关知识,请访问:编程视频!!

위 내용은 Bootstrap의 양식에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
이 기사는 博客园에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
React의 부트 스트랩 : 장점 및 모범 사례React의 부트 스트랩 : 장점 및 모범 사례Apr 16, 2025 am 12:17 AM

부트 스트랩을 React 프로젝트에 통합 할 때의 장점은 1) 빠른 개발, 2) 일관성 및 유지 가능성 및 3) 반응 형 디자인이 포함됩니다. CSS 파일을 직접 소개하거나 React-Bootstrap 라이브러리를 사용하면 React 프로젝트에서 Bootstrap의 구성 요소와 스타일을 효율적으로 사용할 수 있습니다.

부트 스트랩 : 웹 프레임 워크에 대한 빠른 안내서부트 스트랩 : 웹 프레임 워크에 대한 빠른 안내서Apr 15, 2025 am 12:10 AM

Bootstrap은 Twitter에서 개발 한 프레임 워크로, 반응 형 모바일 우선 웹 사이트 및 응용 프로그램을 신속하게 구축 할 수 있습니다. 1. 사용 편의성과 풍부한 구성 요소 라이브러리는 개발을 더욱 빠르게 만듭니다. 2. 거대한 커뮤니티는 지원과 솔루션을 제공합니다. 3. 클래스 이름을 소개하고 사용하여 반응 형 그리드 생성과 같은 CDN을 통해 스타일을 제어합니다. 4. 사용자 정의 가능한 스타일 및 확장 구성 요소. 5. 장점에는 빠른 개발과 반응 형 디자인이 포함되며 단점은 스타일 일관성과 학습 곡선입니다.

부트 스트랩 분해 : 그것이 무엇인지, 왜 중요한지부트 스트랩 분해 : 그것이 무엇인지, 왜 중요한지Apr 14, 2025 am 12:05 AM

BootstrapisAfree, Open-SourcecsSframework that atresponsiveandmobile-firstwebsitedevelopment.itofferspre-styledcomponentsandagridsystem, streamliningthecreations of hetsingallyfleasing 및 functionalwebdesigns를 간소화합니다.

부트 스트랩 : 웹 디자인을보다 쉽게 ​​만듭니다부트 스트랩 : 웹 디자인을보다 쉽게 ​​만듭니다Apr 13, 2025 am 12:10 AM

웹 디자인이 더 쉬운 것은 부트 스트랩입니다. 사전 설정 구성 요소, 반응 형 디자인 및 풍부한 커뮤니티 지원. 1) 사전 설정 구성 요소 라이브러리 및 스타일을 사용하면 개발자가 복잡한 CSS 코드를 쓰지 않도록 할 수 있습니다. 2) 내장 그리드 시스템은 반응 형 레이아웃 생성을 단순화합니다. 3) 커뮤니티 지원은 풍부한 자원과 솔루션을 제공합니다.

부트 스트랩의 영향 : 웹 개발 가속화부트 스트랩의 영향 : 웹 개발 가속화Apr 12, 2025 am 12:05 AM

Bootstrap은 웹 개발을 가속화하고 사전 정의 된 스타일 및 구성 요소를 제공함으로써 신속하게 반응 형 웹 사이트를 구축 할 수 있습니다. 1) 프로젝트에서 며칠 내에 기본 레이아웃을 완료하는 등 개발 시간이 단축됩니다. 2) SASS 변수와 믹스 인을 통해 부트 스트랩을 통해 맞춤형 스타일은 특정 요구를 충족시킬 수 있습니다. 3) CDN 버전을 사용하면 성능을 최적화하고 로딩 속도를 향상시킬 수 있습니다.

부트 스트랩 이해 : 핵심 개념 및 기능부트 스트랩 이해 : 핵심 개념 및 기능Apr 11, 2025 am 12:01 AM

Bootstrap은 오픈 소스 프론트 엔드 프레임 워크이며 주요 기능은 개발자가 반응 형 웹 사이트를 신속하게 구축하도록 돕는 것입니다. 1) 복잡한 UI 효과의 구현을 용이하게하기 위해 사전 정의 된 CSS 클래스 및 JavaScript 플러그인을 제공합니다. 2) 부트 스트랩의 작동 원리는 CSS 및 JavaScript 구성 요소에 의존하여 미디어 쿼리를 통해 반응 형 디자인을 실현합니다. 3) 사용의 예로는 버튼 작성과 같은 기본 사용 및 사용자 정의 스타일과 같은 고급 사용법이 포함됩니다. 4) 일반적인 오류에는 클래스 이름의 철자가 포함됩니다. 브라우저 개발자 도구를 사용하여 디버깅하는 것이 좋습니다. 5) 성능 최적화는 맞춤형 빌드 도구를 통해 달성 할 수 있으며 모범 사례에는 Semantic HTML 및 부트 스트랩 사용 사전 정의가 포함됩니다.

부트 스트랩 딥 다이브 : 반응 형 디자인 및 고급 레이아웃 기술부트 스트랩 딥 다이브 : 반응 형 디자인 및 고급 레이아웃 기술Apr 10, 2025 am 09:35 AM

Bootstrap은 그리드 시스템 및 미디어 쿼리를 통한 반응 형 디자인을 구현하여 웹 사이트를 다른 장치에 적용합니다. 1. 사전 정의 된 클래스 (예 : col-SM-6)를 사용하여 열 너비를 정의하십시오. 2. 그리드 시스템은 12 개의 열을 기반으로하며 합계가 12를 초과하지 않습니다. 3. SM, MD, LG와 같은 중단 점 (예 : SM, MD, LG)을 사용하여 다른 화면 크기로 레이아웃을 정의합니다.

부트 스트랩 인터뷰 질문 : 꿈의 프론트 엔드 직업을 착륙 시키십시오부트 스트랩 인터뷰 질문 : 꿈의 프론트 엔드 직업을 착륙 시키십시오Apr 09, 2025 am 12:14 AM

Bootstrap은 반응 형 웹 사이트 및 응용 프로그램의 신속한 개발을위한 오픈 소스 프론트 엔드 프레임 워크입니다. 1. 반응 형 설계, 일관된 UI 구성 요소 및 빠른 개발의 장점을 제공합니다. 2. 그리드 시스템은 12 열 구조를 기반으로 Flexbox 레이아웃을 사용하며 .Container, .row 및 .Col-SM-6과 같은 클래스를 통해 구현됩니다. 3. SASS 변수를 수정하거나 CSS를 덮어 쓰면 사용자 정의 스타일을 구현할 수 있습니다. 4. 일반적으로 사용되는 JavaScript 구성 요소에는 모달 상자, 회전식 다이어그램 및 접이식이 포함됩니다. 5. 필요한 구성 요소 만로드하고 CDN을 사용하고 병합 파일을 압축하여 최적화 성능을 달성 할 수 있습니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 채팅 명령 및 사용 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.