일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- docker
- model1
- 배포
- Servlet
- AWS
- CSS
- 알고리즘
- JavaScript
- autowired
- jQuery
- RDS
- 암호화
- Ajax
- JSP
- HTML
- SQL
- node.js
- express
- 도커
- 비트코인
- EC2
- 웹게임
- PL/SQL
- Spring
- Cookie
- websocket
- 웹소켓
- phaser
- 블록체인
- tiles.xml
- Today
- Total
記錄
Bootstrap) 자주 쓰는 컴포넌트(button, jumbotron, form, container, nav) 본문
Bootstrap) 자주 쓰는 컴포넌트(button, jumbotron, form, container, nav)
surhommejk 2018. 5. 22. 18:07* * * * *
전체 참고 사이트 : https://getbootstrap.com/docs/3.3/css/
위 사이트를 참고하면 템플릿 사용 여부를 떠나 수정도 용이하고
백지에서 시작할 때에도 필요한 부분만 차용하는 것이 쉽다
* * * * *
Button>
CSS 중심으로 커스터마이징 할 것이 있으면 보고 찾아서 변경한다
https://getbootstrap.com/docs/3.3/css/#buttons
http://getbootstrap.com/docs/4.1/components/buttons/
Jumbotron>
A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.
cf. 원래 Jumbotron은 width를 모두 쓰는 것이었는데 처음에 컨테이너에 넣어서 쓰는 것으로 배우다보니 Jumbotron이 원래 좌우 패딩이 들어가 있는 것인줄 알았음
https://getbootstrap.com/docs/3.3/components/#jumbotron
form>
.form-group) form-group for optimum spacing.
.form-control) form-control are set to width: 100%
.form-inline) 한 줄로 길게 늘어진 form으로 상단 nav에서 로그인시 사용하기 적절
https://getbootstrap.com/docs/3.3/css/#forms
.Container>
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
그리드 시스템은 반드시 컨테이너 내부에서만 작동하는지 나중에 테스트 후 다시 정리
글로만 봐서는 그리드 시스템은 반드시 컨테이너 내부에서 작동하는 것으로 보인다
컨테이너는 그리드 시스템과는 별개로 페이지 전체에 적절한 여백과 패딩을 주고 싶을 때에 사용하면 편할 것 같다
nav>
https://getbootstrap.com/docs/3.3/components/#nav
ex) default nav
※ nav bar가 스크롤이 내려가도 항상 top에 위치하도록 하고 싶다면
클래스에서 "navbar-fixed-top"를 씌워주면 된다
You're not becoming an expert in memorization and in knowing every bit of information.
Yes you have to understand and memorize somethings but you're not becoming an expert or memorization.
(강의때 나온 말인데 좀 와닿았다. 숙지하고 방향키로 삼아야 할 말인 것 같다)
'Web > Bootstrap' 카테고리의 다른 글
Bootstrap) Background image (contain vs cover) (0) | 2018.05.27 |
---|---|
Bootstrap) 그리드 시스템(grid system) (0) | 2018.05.27 |