block 모양 정리

pre

pre로 감싸준다

가장 많이쓰는 block 이다

Basic block 테스트 합니다

<pre> *** </pre>

panel이용 box

panel을 이용한 흰색 box

panel 박스 입니다

<div  class="panel panel-default">
 <div class="panel-body">
panel 박스 입니다
 </div></div>

ul.pre

pre box 응용

• 박스목록 테스트 합니다..
• 박스목록 테스트 합니다.

<ul class="pre">
<li>박스목록 테스트 합니다..</li>
<li>박스목록 테스트 합니다.</li>
</ul>

css보기

*** css ***
ul.pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 95%;
  line-height: 1.5;
  color: #777777;
  background-color: #f5f5f5;
  border: 1px solid #cccccc;
  border-radius: 4px;
}
ul.pre li {
  margin: 0 20px 5px;
}

panel 응용

panel-heading 사용

제목 테스트 입니다

panel heading 테스트.
panel box.테스트
panel box.테스트

<div class="panel panel-default">
  <div class="panel-heading">
  <strong>제목 테스트 입니다</strong>
  </div>
  <div class="panel-body">
  panel heading 테스트.<br>panel box.테스트<br>panel box.테스트
  </div>
</div>

panel 응용

panel-footer 사용

footer에는 muted와 em을 사용 응용해서 사용할수 있다

panel 박스 테스트 합니다

pane 박스 테스트 합니다

[출처] http://kcw119.tistory.com

<div class="panel panel-default">
    <div class="panel-body">
       <p>panel 박스 테스트 합니다 </p> 
       <p>pane 박스 테스트 합니다</p>
    </div>
    <div class="panel-footer">
       <p class="text-muted"><em>[출처] <a href="http://kcw119.tistory.com" target="blank">http://kcw119.tistory.com</a></em></p>
    </div>
</div>

panel 응용

panel-info 사용

제목에는 아이콘을 사용,내용에는 ul목록도 사용하고 다양한 링크사용함

Link

• http://kcw119.tistory.com
• 욱이의 블로그로 가려면 여기를 클릭
• 욱이 블로그 바로가기

<div class="panel panel-info">
  <div class="panel-heading">
    <p  class="panel-title"><i class="icon-external-link"><strong>Link</strong></i></p>
  </div>
  <div class="panel-body">
   <ul>
     <li><a href="http://">http://kcw119.tistory.com</a></li>
     <li>욱이의 블로그로 가려면 <a href="#">여기를 클릭</a></li>
     <li>욱이 블로그 <a class="label label-info" href="http://"target="_blank">바로가기</a></li>
    </ul>  
  </div>
</div>