부트스트랩에서 검색창을 만드는 방법

프로젝트 개발 과정에서 검색 옵션을 어느 정도 사용하게 됩니다. 그럼 표준적이고 보기 좋은 검색창을 만드는 방법은 무엇일까요? 여기서는 부트스트랩과 함께 제공되는 컨트롤인 입력 그룹을 권장합니다.

추천 매뉴얼: Bootstrap 중국어 매뉴얼

먼저 이 컨트롤의 공식적인 설명을 간략하게 살펴보세요

Input group
Easily extend form controls by adding text, buttons, or button groups on either side of textual <input>s.
Contents
    Basic example
    Sizing
    Checkboxes and radio addons
    Button addons
    Buttons with dropdowns
    Segmented buttons
    Accessibility

우리가 일반적으로 사용하는 양식 제출 기능의 경우 컨트롤의 양쪽에 버튼과 텍스트를 추가할 수 있다는 뜻입니다. 입력 필드 .

관련 권장사항: "Bootstrap 시작하기 튜토리얼"

다음 7가지 컨텐츠는 이것이 달성할 수 있는 기본 기능입니다. 여기서는 네 번째 버튼 애드온에 중점을 둡니다. 스스로 공부하세요.

Button addons
Buttons in input groups are a bit different and require one extra level of nesting. Instead of .
input-group-addon, 
you’ll need to use .input-group-btn to wrap the buttons. This is required due to default browser 
styles that cannot 
be overridden.

위 단락은 입력 그룹의 버튼이 일반 버튼과 다르며 다른 중첩 수준이 필요하다는 것을 의미합니다. 사실 간단히 말하면 input-group-addon을 더 이상 사용하지 않고 input-group-btn을 사용하여 버튼을 관리하게 되었습니다. 제가 제공한 데모 코드는 다음과 같습니다.

<div class="input-group col-md-3" style="margin-top:0px positon:relative">
       <input type="text" class="form-control"placeholder="请输入字段名" / >
            <span class="input-group-btn">
               <button class="btn btn-info btn-search">查找</button>
               <button class="btn btn-info btn-search" style="margin-left:3px">添加</button>
            </span>
 </div>

최종 효과는 다음과 같습니다

이것은 검색창 옵션을 완벽하게 표시하며 스타일은 일관되게 유지됩니다.

관련 기사 추천:
1.부트스트랩 테이블 검색창 및 쿼리 기능에 대한 자세한 설명
2.bootStrap-테이블 서버 측 백그라운드 페이징 및 사용자 정의 검색창 구현 )_Bootstrap 비디오 튜토리얼

위 내용은 부트스트랩에서 검색창을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!