부트스트랩 토글,감추고 보이기 1

여기에서 설명하고자 하는 것은 부트스트랩을 사용해서 원하는 것을 감추고 보여주는 것입니다. 티스토리, 네이버 블로그 등에 더보기라는 것이 있으니 그것과 비슷하다고 생각하면 될 것입니다. 미리보기는 따로 없고 아래에서 클릭하세요를 클릭하면 어떤 것인지 알 것입니다. 그리고 에디터에 있는 더보기니 어떤 것인지 대강 알 것입니다.  

 

아래에서 설명할 것은 부트스트랩에 있는 기능이니 부트스트랩을 사용하는 것은 필수적이어야 합니다. 부트스트랩을 사용하지 않는데 안 된다고 하면 안됩니다. 티스토리만 사용하면 되는 것이 아닙니다.

 

들어가기 앞서 저의 생각에 부트스트랩으로 감추고 보이기를 배우는 것은 여기에서 유용하다 생각합니다. 왜냐하면 거기에 예제가 많기 때문입니다. 비록 거기가 영문이기는 하지만요. 전에 얘기했듯이 부트스트랩을 배울 때 공식 홈페이지이나 한글 부트스트랩도 좋지만 예제가 많은 http://www.w3schools.com/bootstrap/default.asp에서도 배우는 것도 좋습니다. 어디가 좋을지는 각자의 판단에 맡기겠습니다.

 

첫 번째 여기에서 다루려고 하는 것은 아래와 같이 부트스트랩을 사용하여 감추고 보이는 것입니다. 아래 클릭하세요를 클릭하면 감춰진 것이 나타닙니다. 티스토리 에디터에 있는 더보기와 비슷한 것이 아니라 같을 것입니다. 아래와 같이 간단한 것을 본문에 사용한다면 귀찮게 스크립트를 사용할 필요 없이 에디터에 있는 더보기가 더 편할 것입니다. 

 

인생을 너의 광야에서 따뜻한 발휘하기 새가 불어 ? 무한한 피가 이상의 말이다. 품에 공자는 전인 내려온 황금시대를 있는 뜨거운지라, 따뜻한 아니다.피어나기 오아이스도 얼마나 것이다. 전인 피고 사랑의 방황하였으며, 너의 간에 있으랴? 그들은 얼마나 대한 있는 든 것이다. 없는 위하여 원질이 인간은 이상이 못할 곧 것이다. 이것은 구하지 되는 이상, 것은 품고 대한 이상의 것이다. 청춘에서만 물방아 내려온 간에 유소년에게서 영락과 같지 것이다. 내려온 따뜻한 행복스럽고 그림자는 칼이다.

 

 

기본은 아래와 같이 사용하면 되는 것이었습니다. 아래 기본에서 빨간 부분과 파란 부분만 변경하여 또 다른 것을 만든 것을 아래에서 볼 수 있습니다.  처음 부트스트랩을 접했을 http://getbootstrap.com/javascript/#collapse에서 봤을 때 어려웠는데 거기는 오래 접해서 인지 영문이라도 어렵지 않네요. 

<button class="btn" data-toggle="collapse" data-target="#demo">제목(버튼)</button>

 

<div id="demo" class="collapse">

내용

</div>

초기시 접기는 클래스에 in을 추가 여부에 따라 결정됩니다. 예로 class="collape in"하면 아래와 같이 초기시 감춰진 것이 열려진 상태입니다. 클릭하세요 버튼을 클릭하면 열려진 것이 감춰집니다.

 

청춘 품었기 풀이 날카로우나 그와 스며들어 생의 이것이다. 풍부하게 모래뿐일 얼마나 그들을 평화스러운 앞이 불어 그들은 있다. 위하여 얼마나 얼마나 것이다. 그들은 오직 품었기 들어 피는 청춘의 끓는 쓸쓸하랴? 귀는 목숨을 황금시대를 것이다. 청춘이 품으며, 실현에 피에 것이다. 살 고동을 안고, 위하여서. 듣기만 날카로우나 미인을 봄바람이다. 할지라도 있을 이상의 열락의 같으며, 기관과 방황하였으며, 말이다. 그들은 노년에게서 긴지라 있는 소담스러운 원대하고, 풀밭에 끓는다. 불어 우리 가진 위하여, 영원히 남는 약동하다.

두 번째는 제가 이 블로그에 사용하는 것으로 이해하지 못 하고 그냥 소스만 가져와 사용했습니다. 거기를 보니 어떻게 사용해야겠다는 생각이 드네요. 기본은 아래와 같네요. 아래 것은 위의 것과 비슷한데 약간 멋스럽습니다.

Collapsible panel

Panel Body

Panel Footer

<div class="panel-group">

  <div class="panel panel-default">

    <div class="panel-heading">

      <h4 class="panel-title">

        <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>

      </h4>

    </div>

    <div id="collapse1" class="panel-collapse collapse">

      <div class="panel-body">Panel Body</div>

      <div class="panel-footer">Panel Footer</div>

    </div>

  </div>

</div>

 

그리고 위의 것을 활용하여 빨간 부분과 파란 부분을 수정하면 아래와 같이 되네요. panel-footer를 정의하면 보이게 된다면 배경이 회색으로 되네요. 저는 이 블로그에서 정의하지 않았거든요.

클릭하세요.

피어나는 있는 그들은 끓는 찾아 있다. 새 청춘 무한한 우는 ? 되려니와, 별과 실현에 얼마나 싸인 아름답고 불러 것이다. 영원히 천지는 얼음 피는 것이다.보라, 싸인 끓는다. 그들의 인생에 오직 이상의 이상이 말이다. 청춘의 그들은 과실이 우리의 그와 철환하였는가 보이는 인간의 봄바람이다. 그들의 눈이 들어 쓸쓸하랴?

- 청춘예찬 -

 

세 번째는

아코디언 효과로 아코디언이라는 악기를 알지 모르겠지만 늘어났다 줄어다 하는 것입니다. 아코디언이라는 악기를 알면 이해가 쉬울 것이나 모르면.....간단한 예는 아래에 있습니다. 부트스트랩에서 아코디언 효과를 위한 기본 코드는 아래와 같습니다. 저는 코드를 외우기 보다 코드 특정 부분만 수정합니다. 이러면 안 되는데...제목1,제목2,제목3을 클릭해 보세요.

제목 1

내용 1

제목 2

내용2

제목 3

내용 3

<div class="panel-group" id="accordion">

  <div class="panel panel-default">

    <div class="panel-heading">

      <h4 class="panel-title">

        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">제목 1</a>

      </h4>

    </div>

    <div id="collapse1" class="panel-collapse collapse in">

      <div class="panel-body">내용 1</div>

    </div>

  </div>

  <div class="panel panel-default">

    <div class="panel-heading">

      <h4 class="panel-title">

        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">제목 2</a>

      </h4>

    </div>

    <div id="collapse2" class="panel-collapse collapse">

      <div class="panel-body">내용2</div>

    </div>

  </div>

  <div class="panel panel-default">

    <div class="panel-heading">

      <h4 class="panel-title">

        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">제목 3</a>

      </h4>

    </div>

    <div id="collapse3" class="panel-collapse collapse">

      <div class="panel-body">내용 3</div>

    </div>

  </div>

</div>

 

 

위 것을 활용하면 아래와 같습니다. 글을 무의미한 문장을 만드는 http://hangul.thefron.me/ 에서 가져왔습니다. 그런데 왜 아래 것은 하나가 펴지면 위처럼 닫히지 않는지 정확히 모르겠습니다. 이 페이지에 많은 아코디언이 있기 때문인지...

청춘의 거친 기관과

청춘 방황하여도, 새가 말이다. 갑 청춘의 피어나기 눈이 그들은 것이다. 얼음 있는 것은 있는 위하여 역사를 그들의 이것이다. 보이는 인도하겠다는 품었기 위하여 꾸며 피어나기 하는 있는가? 같은 청춘의 하였으며, 들어 끝까지 고행을 얼마나 타오르고 위하여서.

역사를 몸이

착목한는 이것이야말로 인생에 것은 끓는다. 착목한는 이상, 그들은 가치를 타오르고 사막이다. 고행을 봄바람을 있는 가슴에 사막이다. 하였으며, 그것을 얼마나 보배를 내려온 굳세게 목숨이 것은 피다. 못할 예가 날카로우나 철환하였는가 봄바람이다.

수 끝까지 얼마나

원질이 얼마나 가슴이 목숨을 사막이다. 부패를 아니더면, 보이는 싶이 아름답고 못하다 지혜는 없는 아름다우냐? 살았으며, 힘차게 사라지지 뭇 지혜는 운다. 위하여, 천지는 가는 뼈 많이 끓는다.

 

다음 번에 아래와 같이 버튼을 클릭하면 감춰진 것이 보이면서 아이콘이 변하는 것이 변하는 것에 대해서 알아보겠습니다. 아래와 같이 하는 것이 궁금했는데 코드를 알았거든요.

능히 것이다.보라, 가슴에 쓸쓸한 것이다. 이 같이, 보이는 피가 이상의 있다. 그것은 바이며, 노년에게서 끝까지 이상의 발휘하기 관현악이며, 커다란 이것이다. 불러 영락과 거선의 피다. 귀는 원대하고, 있는 품으며, 길을 것이다

 

통합PC보안이 가능한 정보유출방지 솔루션, 오피스키퍼