부트스트랩의 양식에 대한 예제 코드

零下一度
풀어 주다: 2017-06-24 14:31:08
원래의
2011명이 탐색했습니다.

1. 기본 양식: Bootstrap은 기본 양식에 대해 사용자 정의 효과 디자인을 많이 하지 않고 양식의 필드 세트, 범례 및 레이블 태그만 사용자 정의했습니다.

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;
}
로그인 후 복사
소스 코드

2. 가로 양식 클래스 이름 "form-horizontal"

부트스트랩의 양식에 대한 예제 코드
.form-horizontal .control-label,
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
padding-top: 7px;
margin-top: 0;
margin-bottom: 0;
}
.form-horizontal .radio,
.form-horizontal .checkbox {
min-height: 27px;
}
.form-horizontal .form-group {
margin-right: -15px;
margin-left: -15px;
}
.form-horizontal .form-control-static {
padding-top: 7px;
}
@media (min-width: 768px) {
.form-horizontal .control-label {
text-align: right;
  }
}
.form-horizontal .has-feedback .form-control-feedback {
top: 0;
right: 15px;
}
로그인 후 복사
부트스트랩의 양식에 대한 예제 코드
소스 코드

3. form 클래스 이름 "form-inline"

부트스트랩의 양식에 대한 예제 코드
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
     
     
부트스트랩의 양식에 대한 예제 코드
Example

Form control

1. 다양한 형태의 스타일로 스타일이 올바른 경우 클래스 이름 "form-control"을 추가해야 합니다. 아래의 각 양식 컨트롤을 추가할 수 있습니다. ㅋㅋㅋ

2. 드롭다운 선택 상자 선택: 다중 행 선택은 다중 속성의 값을 multiple
nbsp;html>


    <meta>
    <title>表单控件——输入框input</title>
    <link>


로그인 후 복사
  
            
    부트스트랩의 양식에 대한 예제 코드Example
으로 설정합니다.

3.内联表单  类名“form-inline”

부트스트랩의 양식에 대한 예제 코드
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
     
     
부트스트랩의 양식에 대한 예제 코드
示例

ea:添加了类名“form-control”类名,则无需设置cols属性。

로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
  
       

示例

4.复选框checkbox和单选择按钮radio:水平排列加类名“checkbox-inline”||类名“radio-inline”

로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
  
       
示例

4.复选框checkbox和单选择按钮radio:水平排列加类名“checkbox-inline”||类名“radio-inline”

nbsp;html>


    <meta>
    <title>表单控件——表单控件大小</title>
    <link>


로그인 후 복사
  

案例1

  
       
  
           //如果要水平class=“radio-inline”        
    
         //如果要水平class=“radio-inline”        
  
     
示例
.radio,
.checkbox {
display: block;
min-height: 20px;
padding-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
}
.radio label,
.checkbox label {
display: inline;
font-weight: normal;
cursor: pointer;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
float: left;
margin-left: -20px;
}
.radio + .radio,
.checkbox + .checkbox {
margin-top: -5px;
}
로그인 후 복사
源码
.radio-inline,
.checkbox-inline {
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px;
}
로그인 후 복사
水平排列源码

5.控件大小:类名input-sm:让控件比正常大小更小;类名input-lg:让控件比正常大小更大;宽度配合Bootstrap的网格系统

.input-sm {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
select.input-sm {
height: 30px;
line-height: 30px;
}
textarea.input-sm,
select[multiple].input-sm {
height: auto;
}
.input-lg {
height: 46px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
select.input-lg {
height: 46px;
line-height: 46px;
}
textarea.input-lg,
select[multiple].input-lg {
height: auto;
}
로그인 후 복사
源码

6.表单控件状态(焦点状态):类名form-control

.form-control:focus {
border-color: #66afe9;
outline: 0;
  -webkit-box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}
로그인 후 복사
源码

7.表单控件状态(禁用状态):form-control别忘记加①在需要禁用的表单控件上加上“disabled”;②fieldset设置了disabled属性,整个域都将处于被禁用状态。

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eee;
opacity: 1;
}
로그인 후 복사
源码

8.表单控件状态(验证状态):1、.has-warning:警告状态(黄色)  2、.has-error:错误状态(红色) 3、.has-success:成功状态(绿色)

:需要类名has-feedback    +     

 

9.表单提示信息:"help-block"      

.help-block {
display: block;
margin-top: 5px;
margin-bottom: 10px;
color: #737373;
}
로그인 후 복사
源码

按钮

建议使用button或a标签来制作按钮

1.基本按钮:类名“btn”

.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
로그인 후 복사
源码

2.默认按钮: 类名“btn”  +  类名“btn-default”    

.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
로그인 후 복사
源码
3.定制风格:
     

4.按钮大小: .btn-lg:大型按钮    .btn-sm:小型按钮    .btn-cs:超小型按钮   

.btn-lg,
.btn-group-lg> .btn {
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
.btn-sm,
.btn-group-sm> .btn {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.btn-xs,
.btn-group-xs> .btn {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
로그인 후 복사
源码

5.块状按钮: 类名“btn-block”

6.禁用状态: 使用disabled类或disabled属性

图像   1.img-responsive:响应式图片,主要针对于响应式设计    2.img-rounded:圆角图片    3.img-circle:圆形图片    4.img-thumbnail:缩略图片 

img {
vertical-align: middle;
}
.img-responsive,
.thumbnail>img,
.thumbnail a >img,
.carousel-inner > .item >img,
.carousel-inner > .item > a >img {
display: block;
max-width: 100%;
height: auto;
}
.img-rounded {
border-radius: 6px;
}
.img-thumbnail {
display: inline-block;
max-width: 100%;
height: auto;
padding: 4px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.img-circle {
border-radius: 50%;
}
로그인 후 복사
源码

图标

 :查看全部图标

부트스트랩의 양식에 대한 예제 코드
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

<!--使用-->
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {
content: "\2a";
}
로그인 후 복사
부트스트랩의 양식에 대한 예제 코드

 

 

위 내용은 부트스트랩의 양식에 대한 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿