helper class

helper class

helper class 여러가지 component와 css에 도움을 주는 클래스들로 구성이 되어져있다. .caret (Dropdown menu) 클릭을 하였을 시 리스트를 보여주는 버튼을 만들어준다. 드랍다운 메뉴 close 버튼 폼이나 버튼을 사라지게 하는 기능이다. 부모객체가 되는 클래스이름을 아래와 같이 입력해주어야 한다. 이용해주셔서 감사합니다. × .pull-left .pull-right .clearfix .center-block 객체를 화면의 제일 오른쪽 또는 왼쪽으로 위치를 지정하는 기능이다. .clearfix는 움직이는 객체로부터 위치의 영향을 받지 않게 하는 클래스이다. 센터블록을 사용하면 화면 가운데에 객체를 배치를 할 수 있다. .visible .hidden 디스플레이 크기에 따라 보..

  • format_list_bulleted Frontend/BootStrap
  • · 2022. 12. 23.
  • textsms
button, image tag

button, image tag

Button a, input, button 태그에 btn 클래스를 이용하여 스타일 적용이 가능함. 여러가지 색상 적용과 사이조절이 가능함. Link Button 색상조정 Default Primary Success Info Warning Danger Link 크기조절 Large button Large button Default button Default button Small button Small button Extra small button Extra small button .btn-block 부모박스의 가로길이에 맞게 자동으로 길이를 변경하는 속성 Block level button Block level button 버튼 그룹 버튼을 그룹별로 관리할 수 있게 해주는 속성(페이지 넘버 관리) ... ....

  • format_list_bulleted Frontend/BootStrap
  • · 2022. 12. 21.
  • textsms
table, form tag

table, form tag

Table tabledp table 클래스를 사용하면 부트스트랩이 지원하는 양식을 사용할 수 있음. ... 줄무늬 타입 테이블 ... 외곽선이 있는 테이블 ... 마우스를 올리면 색이 변하는 테이블 ... 행간의 간격을 줄인 테이블 ... 반응형 타입의 테이블 ... Forms form 사용 전에 container 클래스로 layout을 잡으면 더 나은 디자인을 만들 수 있음. 입력창에 스타일을 주려면 form-group 클래스명에 has-스타일이름 클래스명을 넣으면 된다. 레이블태그에 class="control-label"을 부여하면 form-group이 가지고 있는 스타일을 따름. 입력칸에 아이콘을 붙이려면 input-group으로 감싸고 그 안에 input-group-addon 이라는 클래스 활용 ..

  • format_list_bulleted Frontend/BootStrap
  • · 2022. 12. 21.
  • textsms
Grid options

Grid options

종류 총 4가지의 option이 존재함. prefix offset ordering nesting prefix .col-*-* 같은 형태로 사용됨. offset .col-*-offset-* 형태로 사용이 됨. offset 지정한 값이 먼저 반영이 되어 자리를 잡고 뒤에 prefix값이 자리잡는 형식이다. ordering 순서를 바꾸는 push와 pull 클래스 해당 클래스는 값을 입력한 대상만 영향을 주는 클래스이다. nesting .row안에 다시 .row를 사용하는 중첩구문

  • format_list_bulleted Frontend/BootStrap
  • · 2022. 12. 21.
  • textsms
.list-style .image

.list-style .image

.list-unstyled ol, ul 리스트에 스타이일 없게 만들어주는 클래스 내가 좋아하는 음식1 내가 좋아하는 음식2 내가 좋아하는 음식3 내가 좋아하는 색상1 내가 좋아하는 색상2 내가 좋아하는 색상3 .image 프로젝트에 스타일된 이미지를 얻기 위해서 사용되는 클래스 .text 텍스트에 색상을 입혀주는 클래스 Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. .bg 백그라운드 컬러를 입혀주는 클래스 Lorem ipsum dolor sit amet...

  • format_list_bulleted Frontend/BootStrap
  • · 2022. 12. 20.
  • textsms
BootStrap개념 Grid

BootStrap개념 Grid

BootStrap 부트스트랩은 반응형 웹디자인을 쉽게 하기 위해 css의 클래스 선택자별 스타일이 정의되어 있고 동적으로 반응하는 요소들을 위해 자바스크립트 라이브러리를 활용한 코딩이 짜여져 있다. 부트스트랩의 구성요소는 CSS, 그리드시스템, 컴포넌트, 자바스크립트 라이브러리이다. Grid 반응형 웹사이트를 위하여 화면을 총 12칸으로 나누어 크기를 구분하여 조정할 수 있음. px크기에 따라 lg, md, sm, xs 사용. .container .container-fluid container : 규정된 크기에서 벗어 났을 때 자동적으로 늘어나지 않음. container-fluid : 규정된 크기에서 벗어 났을 때 자동적으로 늘어남. .row .col 구조의 최상위 컨테이너 요소 안쪽에 새로운 가로 한 ..

  • format_list_bulleted Frontend/BootStrap
  • · 2022. 12. 20.
  • textsms