23.02.24(

😀cnd (3.4버전)

https://getbootstrap.com/docs/3.4/getting-started/

😀그리드옵션

768 / 970 / 1170

😀컴포넌트

http://bootstrapk.com/components/#glyphicons

 

😀컴포넌트같은거 쓴다음에 크기 줄이고 싶으면 class를 따로 줘서 css수정

 

😀 아이콘 넣기 

1. cdn

https://cdnjs.com/libraries/font-awesome/4.7.02.

2. 아이콘 찾기 홈페이지

https://fontawesome.com/v4/icons/

font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

<!-- 부트스트랩 레이아웃 -->
<!-- 부트스트랩 레이아웃은 다 합치면 한줄은 12개로 이루어져 있음 -->
<!-- 
화면사이즈 | 표현
 1170px보다 클 때 .col-lg-
 970px보다 클 때 .col-md-
 768px보다 클 때 .col-sm-
 768px보다 작을 때 .col-xs-
  -->

<div class="contatiner">
	<div col-md-4 col-sm-6>첫번째</div>
    <div col-md-4 col-sm-6>첫번째</div>
    <div col-md-4 col-sm-6>첫번째</div>
</div>

 

<!-- 버튼 컴포넌트를 만들기 -->

btn btn-default

btn btn-primary

btn bnt-success

 

btn btn-info

btn btn-warning

btn btn-danger

 

<!-- 테이블 컴포넌트 만들기 -->

<table class="table table-bordered table-hover">

 

<패널컴포넌트>

<div class="container">
<br> <br> <br>

<div class="panel panel-default">
<div class="panel panel-heading">패널타이틀 </div>

<div class="panel-body">
<h3>패널 본문</h3>
패널의 본문입니다. <br>
패널의 본문입니다. <Br>
패널의 본문입니다. <br>
</div>
</div>

 

 

😀summernote

<!-- include summernote css/js -->
<!-- summernote 스타일관련 cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.6/summernote.css">
<!-- summernote 자바스크립트 cdn -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.6/summernote.js"></script>
<!-- summernote 한글처리관련 cdn -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.6/lang/summernote-ko-KR.js"></script>

<script type="text/javascript">

$(function() {
$("#myEditor").summernote({
lang: 'ko-KR',
height: 300
});
});

</script>