[ Bootstrap ] 부트스트랩 Spacing Row Margin 마진 Padding 패딩 Card Modal 활용

[ Bootstrap ] 부트스트랩 Spacing Row Margin 마진 Padding 패딩 Card Modal 활용

col은 행으로 x축과 같이 폭을 설정하는 단위이다

row은 열로 y축과 같이 높이를 설정하는 단위이다.

 

 

Bootstarap Spacing Row

 

margin : 마진은 경계 바깥쪽 간격을 의미한다. 경계선으로부터 떨어진 거리를 의미한다.

padding : 패딩은 경계 안쪽 간격을 의미한다. 경계선으로부터 페이지 내용까지의 거리를 의미한다.

 

t = 위쪽	b = 아래쪽
l = 왼쪽	r = 오른쪽
x = 왼오(x축)	y = 위아래(y축)
(없음) = 왼쪽, 오른쪽, 위, 아래

 

표에 나와있는 속성을 마진과 패딩으로 조합해 활용할 수 있다. 예를 들어

<div class=“row my-3”>

이 태그는 행의 마진을 위아래로 3px 만큼 준다는 의미이다.

 

 

728x90

 

Bootstrap Log In 아이콘

 

로그인 아이콘은 웹페이지에서 대체적으로 왼쪽에 위치한다. 따라서 Log In 버튼을 Navbar의 왼쪽에 설정하는 방법이 있고, Navbar의 다른 속성을 오른쪽에 설정하는 방법이 있다. 

 

1. Log In 버튼을 왼쪽으로 설정하기

<ul class= "navbar-nav ml-auto">

 

2. Log In 버튼을 오른쪽에 설정하기

<ul class=“navbar-nav mr-auto”>

 

 

728x90

 

 

Bootstrap Card

 

부트스트랩 카드는 내용을 더 가독성 있게 보여주는 기능 중 하나이다.

한 행에 두 개의 블로그 포스트를 보여주고 싶다면 row로 둘러싸면 된다.

<div class =“row”>
   <div class=“card mb-4”>
   <div class=“card mb-4”>

 

Bootstrap Card 속성

card-img-top	card-body
card-title	card-text
card-footer

 

 

728x90

 

 

Bootstrap Modal

 

Bootstrap Modal 부트스트랩 모달은 팝업창을 띄어준다.

data-toggle에 "modal"이라고 명시해주고, data-target에 "#id"를 넣는다. 이후 <div> 태그에서 id값을 찾아 연결해준다.

 

<button type=“button” data-toggle=“modal” data-target=“#Mo”>

<!-- Modal -->
<div class=“modal fade” id=“Mo”>