프로그래밍 언어/부트스트랩(Bootstrap)139 [bootstrap] 부트스트랩 – .nav – 페이지 번호 활성, 비활성 상태 처리하기 페이지 번호에 활성, 비활성 처리는 다음 선택자만 넣어주면 됩니다..active : 활성 .disabled : 비활성 더 이상 페이지를 이동할 수 없는 경우 왼쪽이나 오른쪽 화살표에 .disabled 선택자를 넣어주면 됩니다. 2016. 2. 2. [bootstrap] 부트스트랩 – .nav – 페이지 번호 보여주기 페이지도 내비게이션에 해당하므로 nav 태그를 사용하고 목록이므로 ul 태그에 .pagination 선택자를 사용합니다. 2016. 2. 2. [bootstrap] 부트스트랩 – 내비게이션 메뉴바 [냅바(navbar)] – 브레드크럼(Breadcrumb) 페이지의 상단에서 메뉴나 카테고리의 순서를 표시할 때 사용합니다. 순서있는 목록 태그인 ol에 .breadcrumb 선택자를 사용합니다. 2016. 2. 2. [bootstrap] 부트스트랩 – 내비게이션 메뉴바 [냅바(navbar)] – 브랜드 이미지 내비게이션 바에 로고를 추가할 경우 .navbar-brand 선택자가 있는 a 태그에 img 태그를 사용해 삽입합니다. 2016. 2. 2. [bootstrap] 부트스트랩 – 내비게이션 메뉴바 [냅바(navbar)] 내비게이션 바에는 .navbar 선택자를 기본으로 사용합니다..navbar-default : 밝은색 .navbar-inverse : 어두운색 그리고 .container-fluid 선택자를 바로 하위에 사용해 주어야 합니다. … 768px 해상도 이상에서는 아래와 같이 정상적으로 메뉴가 보여지지만 768px 해상도 미만에서는 아래와 같이 메뉴가 숨겨져서 나옵니다. 2016. 2. 2. [bootstrap] 부트스트랩 – .nav – 탭 – 필(Pills) 전체 정렬 전체 너비로 필을 사용하려면 .nav-justified 를 넣어주면 됩니다. 아래 실행에서 [새창으로 확인] 클릭하셔서 확인하세요~ 2016. 2. 1. [bootstrap] 부트스트랩 – .nav – 탭 전체 정렬 탭을 전체 너비로 그려주는 선택자는 .nav-justified 를 사용하면 됩니다. 아래 실행에서 [새창으로 보기] 클릭해서 확인하세요~ 2016. 2. 1. [bootstrap] 부트스트랩 – .nav – 탭 – 필(Pills) 우측 정렬 필을 우측으로 정렬하려면 아래와 같이 그리드 선택자를 사용합니다. 칼럼 순서가 바뀌도록 .col-sm-push-* 선택자를 사용합니다.… … 2016. 2. 1. [bootstrap] 부트스트랩 – .nav – 필(Pills) 좌측 정렬 필을 좌측으로 정렬하려면 아래와 같이 그리드 선택자를 사용합니다.… … cols-sm-* 의 합은 12여야 하는데, 3과 9를 사용해서 좌측으로 정렬되도록 구현했습니다. .cols-sm-4 .cols-sm-8 을 사용해도 너비만 조금 변하게 되고 좌측 정렬이 됩니다. 2016. 2. 1. [bootstrap] 부트스트랩 – .nav – 필(Pills) 기본형 필은 .nav-tabs 대신 .nav-pills를 사용하면 됩니다. .nav-pills 와 함께 .nav-stacked를 함께 사용하시면 됩니다.… 2016. 2. 1. [bootstrap] 부트스트랩 – .nav – 사이드웨이 탭 (탭 90도 회전) 부트스트랩의 탭에서 한가지 특이한 레이아웃이 있는데, 탭 목록의 글자를 세로로 만들 수가 있습니다. .sideways 선택자를 추가하면 됩니다. 이 .sideway를 사용하기 위해서는 별도의 플러그인이 필요합니다. https://github.com/dbtek/bootstrap-vertical-tabs 여기서 파일을 다운로드 받아서 링크를 걸어주면 됩니다. 사이에 다운로드 받은 css 파일의 경로로 다음과 같이 링크해 주세요. => 추천 2016. 2. 1. [bootstrap] 부트스트랩 – .nav – 우측 탭 탭을 왼쪽이나 오른쪽으로 배치하려면 별도의 플러그인이 필요합니다. https://github.com/dbtek/bootstrap-vertical-tabs 여기서 파일을 다운로드 받아서 링크를 걸어주면 됩니다. 사이에 다운로드 받은 css 파일의 경로로 다음과 같이 링크해 주세요. => 추천 .tabs-right 클래스를 사용하여 탭을 왼쪽으로 배치할 수 있습니다. 2016. 2. 1. [bootstrap] 부트스트랩 – .nav – 좌측 탭 탭을 왼쪽이나 오른쪽으로 배치하려면 별도의 플러그인이 필요합니다. https://github.com/dbtek/bootstrap-vertical-tabs 여기서 파일을 다운로드 받아서 링크를 걸어주면 됩니다. 사이에 다운로드 받은 css 파일의 경로로 다음과 같이 링크해 주세요. => 추천 .tabs-left 클래스를 사용하여 탭을 왼쪽으로 배치할 수 있습니다. 2016. 2. 1. [bootstrap] 부트스트랩 – .nav – 탭 예제 부트스트랩 .nav 클래스를 이용한 만든 탭과 드롭다운 예제인데 참고하세요~ 2016. 2. 1. [bootstrap] 부트스트랩 – 입력상자에 버튼 추가 기본 형태의 입력박스에 버튼을 추가한 형태입니다. 버튼을 왼쪽, 오른쪽에 추가한 예제네요. 2016. 2. 1. 이전 1 2 3 4 5 6 7 ··· 10 다음