Bootstrap은 프론트 엔드 개발을 위해 Twitter에서 시작한 오픈 소스 툴킷입니다. 트위터 디자이너 Mark Otto와 Jacob Thornton이 개발했으며 CSS/HTML 프레임 워크입니다.
다음 으로이 기사를 통해 탄성 검색 상자를 구현하기위한 부트 스트랩 코드를 소개하겠습니다.
<form action = ""method = "get"> <div> <입력 유형 = "hidden"name = "scope"value = "1"> <입력 이름 = "키"autocomplete = "꺼
해당 CSS :
.Search-input-Group .input-Group-Addon {배경 : White! 중요; } .Search-input-Group .Form-Control {Border-Right : 0; Box-Shadow : 0 0 0; Border-Color : #ccc;}. 검색 입력 그룹 {width : 40%;}. 검색 입력 그룹 버튼 {테두리 : 0; 배경 : 투명;}. 검색 입력 : Focus + Button {z-index : 3;}. 검색 그룹 입력 {-webkit-transition : width 0.2s easy-in; EASE-IN-OUT; -O- 전환 : 너비 0.2S 편의-인 아웃; 전환 : 너비 0.2S 편의-인 아웃;}. 검색-입력 그룹 입력 : 포커스 {너비 : 500px;}검색 아이콘을 입력 상자 앞에 놓으려면 실제로 Bootstrap이 지원하지 않으므로 직접 사용자 정의해야합니다.
http://bootsnipp.com/snippets/featured/support-glyph-and-fa-icon-inside-input
위의 것은 편집자가 소개 한 탄성 검색 상자 구현에 대한 전체 설명입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 더 알고 싶다면 Wulin.com 웹 사이트에주의를 기울이십시오!