programing

입력 상자에 부트스트랩 글리폰 추가

newnotes 2023. 9. 7. 22:00

입력 상자에 부트스트랩 글리폰 추가

텍스트 유형 입력란에 글리폰을 추가하려면 어떻게 해야 합니까?예를 들어, 다음과 같은 사용자 이름 입력에 'icon-user'를 입력하고 싶습니다.

enter image description here

부트스트랩 미포함:

잠시 후에 부트스트랩을 시작할 예정이지만, 이 작업을 직접 수행하기 위한 기본 CSS 개념이 여기에 있습니다.먹잇감의 수염이 지적하는 것처럼 입력 요소 안에 아이콘을 절대적으로 배치하여 CSS로 이를 수행할 수 있습니다.그런 다음 텍스트가 아이콘과 겹치지 않도록 양쪽에 패딩을 추가합니다.

따라서 다음 HTML의 경우:

<div class="inner-addon left-addon">
    <i class="glyphicon glyphicon-user"></i>
    <input type="text" class="form-control" />
</div>

다음 CSS를 사용하여 왼쪽과 오른쪽 정렬 글리프를 정렬할 수 있습니다.

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

플렁커의 데모

참고: 글리폰을 사용하는 경우를 가정하지만 글꼴이 멋진 경우에도 마찬가지로 잘 작동합니다.
우만다면의a다e면tr으로 교체하면 됩니다..glyphicon와 함께.fa

부트스트랩 사용:

버퍼가 지적한 바와 같이 이 작업은 옵션 아이콘과 함께 유효성 검사 상태를 사용하여 부트스트랩 내에서 기본적으로 수행할 수 있습니다.이것은 다음을 제공함으로써 수행됩니다..form-group를fes를의tf의 부류를.has-feedback그의콘fesn고de그e의 아이콘..form-control-feedback.

가장 간단한 예는 다음과 같습니다.

<div class="form-group has-feedback">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>

장점:

다양한 폼 유형(Basic, Horizontal, Inline) 지원 포함
다양한 컨트롤 크기(기본값, 소형, 대형) 지원 포함

단점:

왼쪽 정렬 아이콘에 대한 지원이 포함되어 있지 않음

단점을 극복하기 위해 저는 왼쪽 정렬 아이콘을 지원하기 위한 변경 사항과 이 풀-요청을 결합했습니다.비교적 큰 폭의 변화이기 때문에 향후 릴리스로 미뤄졌습니다. 하지만 현재 이러한 기능이 필요하다면 간단한 구현 가이드를 소개합니다.

이러한 양식 변경 사항을 CSS에 포함시키기만 하면 됩니다(아래쪽 숨겨진 스택 스니펫을 통해 인라인 처리 가능).
_{*LESS: 또는 LESS를 통해 구축하는 경우, LESS의 형태 변경 사항이 있습니다.}

그럼 수업을 포함시키기만 하면 됩니다..has-feedback-left수업을 받는 어떤 그룹이든지.has-feedback아이콘을 왼쪽 정렬합니다.

폼 종류, 컨트롤 크기, 아이콘 세트, 레이블 가시성 등 다양한 HTML 구성이 가능하기 때문에 각 순열별로 정확한 HTML 세트를 보여주는 테스트 페이지를 라이브 데모와 함께 만들었습니다.

Working demo in jsFiddle

For this HTML:

<form class="form form-horizontal col-xs-12">
    <div class="form-group">
        <div class="col-xs-7">
            <span class="usericon">
                <input class="form-control" id="name" placeholder="Username" />
            </span>
        </div>
    </div>
</form>

Use this CSS (Bootstrap 3.x and Webkit-based browsers compatible)

.usericon input {
    padding-left:25px;
}
.usericon:before {
    height: 100%;
    width: 25px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    position: absolute;
    content: "\e008";
    font-family: 'Glyphicons Halflings';
    pointer-events: none;
}

@Frizi가 말했듯이, 우리는 추가해야 합니다.pointer-events: none;커서가 입력 포커스를 방해하지 않도록 합니다.다른 모든 CSS 규칙은 중심을 잡고 적절한 간격을 추가하기 위한 것입니다.

The result:

screenshot

You can use its Unicode HTML

따라서 사용자 아이콘을 추가하려면 추가하기만 하면 됩니다.에게placeholder속성, 또는 원하는 곳으로 이동할 수 있습니다.

You may want to check this cheat sheet.

Example:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<input type="text" class="form-control" placeholder="&#xe008; placeholder..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="text" class="form-control" value="&#xe008; value..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="submit" class="btn btn-primary" value="&#xe008; submit-button" style="font-family: 'Glyphicons Halflings', Arial">

다음 코드를 사용하여 입력의 글꼴을 글리폰 글꼴로 설정하는 것을 잊지 마십시오.font-family: 'Glyphicons Halflings', Arial, 여기서 Arial은 입력에 있는 일반 텍스트의 글꼴입니다.

Tested with Bootstrap 4.

가져가세요form-control, 덧붙이기is-valid동급의컨트롤이 녹색으로 변하는 방식을 주목하십시오. 하지만 더 중요한 것은 컨트롤 오른쪽에 있는 체크 표시 아이콘을 주목하십시오.이게 우리가 원하는 겁니다!

Example:

.my-icon {
    padding-right: calc(1.5em + .75rem);
    background-image: url('https://use.fontawesome.com/releases/v5.8.2/svgs/regular/calendar-alt.svg');
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="col-md-5">
	<input type="text" id="date" class="form-control my-icon" placeholder="Select...">
  </div>
</div>

I also have one decision for this case with Bootstrap 3.3.5:

<div class="col-sm-5">
    <label for="date">
       <input type="date" placeholder="Date" id="date" class="form-control">         
    </label>
    <i class="glyphicon glyphicon-calendar col-sm-pull-2"></i>
</div>

On input I have something like this:

Here's how it works in pure Bootstrap 5:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>iconbutton</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet">
</head>

<body>

<div class="d-flex flex-row align-items-center m-4 border rounded">
    <i class="fa-solid fa-search mx-2"></i>
    <input type="text" class="form-control border-0" placeholder="Search">
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

포커스에 표시되는 테두리를 제거하려면 다음을 추가합니다.shadow-0입력으로

If you are fortunate enough to only need modern browsers: try css transform translate. This requires no wrappers, and can be customized so that you can allow more spacing for input[type=number] to accomodate the input spinner, or move it to the left of the handle.

    @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");


.is-invalid {
  height: 30px;
  box-sizing: border-box;
}

.is-invalid-x {
  font-size:27px;
  vertical-align:middle;
  color: red;
  top: initial;
  transform: translateX(-100%);
}




 <h1>Tasty Field Validation Icons using only css transform</h1>
    <label>I am just a poor boy nobody loves me</label>
    <input class="is-invalid"><span class="glyphicon glyphicon-exclamation-sign is-invalid-x"></span>

http://codepen.io/anon/pen/RPRmNq?editors=110

You should be able to do this with existing bootstrap classes and a little custom styling.

<form>
    <div class="input-prepend">
        <span class="add-on">
            <i class="icon-user"></i>
        </span>
        <input class="span2" id="prependedInput" type="text" placeholder="Username" style="background-color: #eeeeee;border-left: #eeeeee;">
    </div>

Edit 아이콘은 를 통해 참조됩니다.icon-user수업. 이 대답은 부트스트랩 버전 2때 작성된 것입니다.참고문헌은 다음 페이지 http://getbootstrap.com/2.3.2/base-css.html#images 에서 확인할 수 있습니다.

ReferenceURL : https://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box

'programing' 카테고리의 다른 글

예기치 않은 AUTO_INCRECTION 동작 (0)	2023.09.07
Spring Boot 3으로 업그레이드할 때 wiremock 문제 발생 (0)	2023.09.07
Node.js에서 CTRL+C 탐지 (0)	2023.09.07
디브에서 긴 단어를 단어로 묶는 방법이 있습니까? (0)	2023.09.07
정렬-객체 및 정수 (0)	2023.09.07

현재글입력 상자에 부트스트랩 글리폰 추가

각종 프로그래밍 정보를 다루는 블로그입니다.

TypeScript, oracle, bash, Android, CSS, excel, Ajax, ReactJS, MariaDB, AngularJS, JSON, JQuery, spring-boot, PowerShell, spring, ios, azure, MongoDB, WPF, Wordpress,

Today :
Yesterday :

newnote

입력 상자에 부트스트랩 글리폰 추가

입력 상자에 부트스트랩 글리폰 추가

부트스트랩 미포함:

플렁커의 데모

부트스트랩 사용:

여기 플렁커의 데모가 있습니다.

왼쪽 정렬 피드백 아이콘용 CSS 추가

Working demo in jsFiddle

You can use its Unicode HTML

Tested with Bootstrap 4.

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2026/07 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

입력 상자에 부트스트랩 글리폰 추가

입력 상자에 부트스트랩 글리폰 추가

부트스트랩 미포함:

플렁커의 데모

부트스트랩 사용:

여기 플렁커의 데모가 있습니다.

왼쪽 정렬 피드백 아이콘용 CSS 추가

Working demo in jsFiddle

You can use its Unicode HTML

Tested with Bootstrap 4.

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바