부트스트랩 사용법

주의!

여기는 하냥위키를 더 예쁘게 사용할 수 있는 더 복잡한 툴을 소개합니다! 여기 있는걸 몰라도 충분히 문서를 수정하고 다룰수 있습니다!

부트스트랩이라고 부르는 문법을 이용해 위키를 깔끔하게 작성할 수 있다.
사용하는 방법은 아래의 예제를 참고하여 원하는 문구를 작성하고 편집기에 넣으면 끝이다.
자세한 문법은 링크를 참고하자.

여기서는 주로 사용되는 것만 간단히 적도록 하겠다.

더 예쁜 알림 : Callout

참고

이것은 주로 사용되는 알림입니다.

참고

이것은 긍정적인 의미로 사용되는 알림입니다.

What good is a new-born baby?

갓 태어난 아기가 무슨 쓸모가 있겠습니까?
- 마이클 패러데이, 새로 발견한 전기가 대체 무슨 쓸모가 있느냐는 빅토리아 시대 사람들의 말에

주의!

이것은 신체적/정신적 손해를 가져올 수 있음을 알립니다.

경고!

이것은 신체적/정신적 손상를 가져올 수 있음을 알립니다.
<callout type="primary" icon="true" title="참고"> 이것은 주로 사용되는 알림입니다. </callout>
<callout type="success" icon="true" title="참고"> 이것은 긍정적인 의미로 사용되는 알림입니다. </callout>
<callout type="info" icon="true" title="What good is a new-born baby?"> 
갓 태어난 아기가 무슨 쓸모가 있겠습니까?
- 마이클 패러데이, 새로 발견한 전기가 대체 무슨 쓸모가 있느냐는 빅토리아 시대 사람들의 말에</callout>
<callout type="warning" icon="true" title="주의!"> 이것은 신체적/정신적 손해를 가져올 수 있음을 알립니다. </callout>
<callout type="danger" icon="true" title="경고!"> 이것은 신체적/정신적 손상를 가져올 수 있음을 알립니다. </callout>

알림표지를 만듭니다. icon 부분에 어떤 값을 넣느냐에 따라, 다른 아이콘이 뜨며, alert 부분에 danger나 success를 대신 넣으면, 다양한 알림을 만들 수 있습니다.

<alert type="success" icon="glyphicon glyphicon-user" dismiss="true">
**Well done!** You successfully read this important alert message.
</alert>

모바일에서 접속했는지, 컴퓨터에서 접속했는지에 따라 글이나 그림을 어떻게 배치할지 조종할 수 있다.
합이 12가 되면 한 줄을 만든다.
xs는 모바일,lg는 데스크톱 환경에서의 설정을 가리킨다.

아래의 예제는 모바일에서는 한 기둥으로 보이고, 데스크톱에서는 세 개의 기둥으로 나뉘어 보입니다!

나가거든
쓸쓸한 달빛 아래 내 그림자 하나 생기거든
그땐 말해볼까요 이 마음 들어나 주라고
문득 새벽을 알리는 그 바람 하나가 지나거든
그저 한숨쉬듯 물어볼까요 나는 왜 살고 있는지
나 슬퍼도 살아야 하네 나 슬퍼서 살아야 하네
이 삶이 다하고 나야 알텐데
내가 이 세상을 다녀간 그 이유
나 가고 기억하는 이
나 슬픔까지도 사랑했다 말해주길
흩어진 노을처럼 내 아픈 기억도 바래지면
그땐 웃어질까요 이 마음 그리운 옛 일로
저기 홀로 선 별 하나 나의 외로움을 아는 건지
차마 날 두고는 떠나지 못해 밤새 그 자리에만
<grid>
<col lg = "12"> 나가거든 </col>
<col lg = "12" xs="12">  </col>
<col lg = "4" xs="12"> 
쓸쓸한 달빛 아래 내 그림자 하나 생기거든
그땐 말해볼까요 이 마음 들어나 주라고
문득 새벽을 알리는 그 바람 하나가 지나거든
그저 한숨쉬듯 물어볼까요 나는 왜 살고 있는지</col>
<col lg = "4" xs="12"> 
나 슬퍼도 살아야 하네 나 슬퍼서 살아야 하네
이 삶이 다하고 나야 알텐데 
내가 이 세상을 다녀간 그 이유 
나 가고 기억하는 이
나 슬픔까지도 사랑했다 말해주길 </col>
<col lg = "4" xs="12"> 
흩어진 노을처럼 내 아픈 기억도 바래지면 
그땐 웃어질까요 이 마음 그리운 옛 일로 
저기 홀로 선 별 하나 나의 외로움을 아는 건지 
차마 날 두고는 떠나지 못해 밤새 그 자리에만 </col>
</grid>

만약 그대로 따라했는데도 그리드가 잘 안된다면 </grid>앞에 엔터를 추가해보세요.
<grid> <col>...</col></grid> 
<grid> 
<col>
...
</col>
</grid> 

This is a simple hero unit, a simple jumbotron-style
component for calling extra attention to featured
content or information.

<jumbotron>
===== Hello, world! =====

This is a simple hero unit, a simple jumbotron-style 
component for calling extra attention to featured
content or information.
</jumbotron>
<nav>
  * [[:start|홈]]
  * [[하냥위키_탄생배경|하냥위키 탄생배경]]
  * [[하냥위키_사용법|하냥위키 사용법]]
  * [[playground:playground]]
  * DokuWiki
    * [[:wiki:welcome]]
    * [[:wiki:syntax]]
</nav>

Lorem ipsum

<tooltip title="Sample Text">Lorem ipsum</tooltip>
<list-group>
  * [[playground:playground|Cras justo odio]]
  * Dapibus ac facilisis in <badge>2</badge>
  * Morbi leo risus <badge>1</badge>
</list-group>

여기에 버튼 이름을

<btn type="primary" size="lg" modal="modal-large">여기에 버튼 이름을</btn>
 
<modal id="modal-large" title="모덜 제목">
=== 내용내용 ===
 
내용을 적습니다. [...]
</modal>

진행바를 생성합니다.
bar value는 100중에 얼마나 진행시켰는지, type은 색을 어떻게 지정할지, striped는 줄무늬 여부, animate는 애니메이션 여부, showvalue는 진행바에 값의 크기를 띄울지 결정합니다.

45%
<progress>
<bar value="45" type="info" striped="true" animate="true" showvalue="true"></bar>
</progress>

다른 문장과 섞이지 않게, 인용문을 쓰고 싶을때 사용한다.

Look, I'm in a well!

 <well>Look, I'm in a well!</well> 

클릭하면 설명이 튀어나오도록 만든다.

버튼 제목

<popover title="Popover 제목" content="짜잔, 내가 나왔다."><btn type="danger" size="lg">버튼 제목</btn></popover>

누르면 내용이 펼쳐지는 버튼을 만든다.

Click Me


Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<button collapse="foo">Click Me</button>
 
<collapse id="foo" collapsed="true"><well>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</well></collapse>

일일히 아이콘을 올릴필요없이, 어느 디바이스에서도 또렷이 나오는 아이콘을 코드 한 줄로 소환(?)할 수 있다.
그 코드는 다음과 같다.

 {{icon>아이콘 이름}} 

예제

 {{icon>home}} 

아이콘 아이콘 이름 부트스트랩과 함께 쓸때의 이름
home fa fa-home
check fa fa-check
quote-left fa fa-quote-left
quote-right fa fa-quote-right
plus fa fa-plus
close fa fa-times
warning fa fa-exclamation-triangle

부트스트랩은 대부분 <ㅁㅁㅁㅁ ㅁㅁㅁ=“ㅁㅁㅁ”…>로 시작한다. 이때, 이 < >안에 icon=“아이콘 이름”을 넣으면 된다.

예제

 <alert type="info" dismiss="true" icon="fa fa-check-circle">icon의 이름은 [[http://fontawesome.io/icons/#web-application|링크]]에서 알 수 있다.</alert> 
  • 소개/하냥위키_작성방법/완벽메뉴얼.txt
  • 마지막으로 수정됨: 2017/08/22 13:41
  • 저자 tanukimong