Show 개선이 많이 필요는 하겠지만, boot skin에서 검색 버튼이 xs에서만 나오게 하는 방법입니다. <div class="pull-right hidden-lg hidden-md hidden-sm"> <div class="pull-right collapse navbar-collapse board-bottom-search-collapse"> - opencode.co.kr -
어느 프로그래머의 스마트한 이야기
프로그래밍 언어/부트스트랩(Bootstrap) by 우림 2018. 5. 11. 부트스트랩 전체 너비 내비게이션 메뉴바 검은색 테마입니다. '프로그래밍 언어 > 부트스트랩(Bootstrap)' 카테고리의 다른 글
태그bootstrap, javascript, JQuery, 냅바, 메뉴바, 부트스트랩, 자바스크립트 관련글
댓글0비밀글 오늘은 위처럼 생긴 검색창을 만들어 볼 것이다.
div 태그 안에는 input 태그, img 태그가 들어있다.
부모 태그를 relative 를 하고, input 태그를 width: 100% 를 주어서 부모 공간을 꽉 차게 만든다. 그 후 돋보기 이미지를 부모 태그 안으로 배치하기 위해서는 position: absolute; 속성을 주어야 한다. 이번엔 검색창 부분에 세 개의 아이콘이 들어 있다.
위의 코드와 마찬가지로 먼저 부모 태그(search-mode)에 position: relative 속성을 주고 시작해야 한다. 그리고 input 태그는 부모 태그를 꽉 채운다. 그 후 아이콘은 두 덩어리로 먼저 나누었는데 이때 justify-content: space-between 속성을 쓴다. 아이콘은 자식 태그이므로 position: absolute 속성을 주어서 부모 태그 안에 위치할 수 있게 한다. icon 의 위치 범위를 left, right 를 주어서 범위를 지정하는 방법을 고려해보았다. |