고급 사용자는 주석문을 통해 이 내용을 더 자세히 이해할수 있습니다.
특정 부분만 크기를 조정하는 고정 그리드
1 of 3
2 of 3 (wider)
3 of 3
display gird 웹브라우저width값 보일요소 계산[요동주의]
xs에서만 보임(576px 이하나 모바일에서만 보임)
xs에서만 숨김(모바일에서 안보이고 그이상에서는 보임)
sm 이하에서 숨김(768px이상에서만 보임)
md 이하에서 숨김(992px이상에서만 보임)
lg 이상에서 보임(992px이상에서만 보임)
md 상태에만 보임(768px~991px이상에서만 보임)
xl에서만 보임(1200px이상에서만 보임)
인쇄-PDF나 일반 인쇄 미리보기에서 전환됩니다.
Print Only (Hide on screen only)
carousel+회전목마+부트스트랩style슬라이드쇼(중요)
간단한 경고창 생성
.full .row {margin: 0;}의 영향없이 스크롤이 안생기는 경고문입니다.
내용이 없어도 보이기는 하는게 일반 div와 차이점입니다.
아쉬운점은 색상적용이 아니라 alert- light,dark,info등의 특정 명령형 클래스를 줘야합니다.
근데, 이거 찾을시간에 그냥 div에 width,height,background-color,position: relativere;주고 자식요소에 포지션:앱솔루트 주는게 낫지 않을까요?
×
그렇지만 이 기능은!별다른 자바스크립트 명령문 없이도 경고창을 닫게 해줍니다!.
하지만 1회용입니다. 부트스트랩을 뜯어보기전까지 작동원리를 알수 없으므로 제거한것을 다시 불러오는방법은 알수 없습니다.
점보트론!
점보트론의 장점은 wrappage와 text-algin 기능을 동시에 한다는것입니다!.
심지어 이 기능은 전체에 대한 a를 걸지 않고 버튼만 살려서 배너의 공간으로도 쓰일수 있을겁니다.
그렇군!
헤어핏 스타일 모바일우선 배너
이 배너는 최저 width에서도 중앙을 기준으로 400px정도 살아남으며, 모바일에서 매우 효과적으로 정보를 전달합니다. 웹에서도 중앙부분을 기준으로 살아남으므로 원하는 정보를 확실하게 전달가능합니다.
progress바
Free Space
Warning
Danger
미니 슬라이드 토글
이 기능은 별다른 자바스크립트 문 없이 슬라이드 토글을 가능하게 해줍니다.
다만 이 내용은 하나의 내용만 처리할수있으며, 차라리 학원에서 배운 방식의 제이쿼리문( 탭방식의 컨텐츠구성)을 사용하는것이 더 효율적이고 미래지향적입니다.
물론 숙련된 사람이라면 이걸 가지고도 다수의 내용및 메뉴를 추가할수 있을것입니다.
fixed 그리드
하단에 고정적으로 배치될 푸터,메뉴,옵션등을 사용합니다. fixed그리드는 container 안에 있어도 전체화면으로 표시됩니다.
포지션이 자동으로 스티키로 잡히기때문에 포지션없이도 top값을 줄수 있습니다.
*참고 :스티키는 컨테이너 안에 있으면 작동하지 않습니다.
훨씬 복잡하지만 더 효과적인 슬라이드 토글
이미지를 배경으로 깔던가. 아니면 적당히 크기를 조정해서 넣으십시오.
이미지 캡션달기(비중요)
캡션의 위치를 조정.
미니 뉴스, 집중정보전달 = '모달'
이 역시 별다른 명령문 없이도 x버튼과 클로즈를 통해서 닫는것이 가능합니다. 심지어 이 기능은 bg를 클릭해도 닫힙니다.
Filterable List
지정된 주제 내에서 원하는 검색결과만 보이게 할수 있습니다.매우 흥미로운 기능이며 제이쿼리문을 사용합니다.
1.캣
2.검색어지우기
3. 모든 li리스트 확인
4. 원하는검색어 타이핑
display:none이1회용이므로 좀더 연구해야합니다.
가장 기본적인 이미지 깔기
