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

이 페이지에서 적는 글은 전에 적었던 2015/12/15 - 부트스트랩 토글,감추고 보이기 1과 비슷한 것을 설명할 것입니다. 그것과 차이라면 아래 클릭하세요. 버튼을 누르면 아이콘이 변하게 하는 것입니다. 아래 클릭하세요. 버튼을 클릭한다면 아이콘이 변하면서 숨겨진 문장이 보인다는 것을 확인할 수 있습니다. 

웬만하면 직접 해봐야 바로 이해할 수 있습니다. 귀찮다고 넘어가지 마세요. 전에 전었던 것은 아이콘이 변하지 않았거든요. 그러니 전에 적었던 글을 읽지 않았다면 읽어 보세요.

지혜는 붙잡아 그러므로 거선의 현저하게 교향악이다. 이 원대하고, 몸이 불어 그들은 것이다. 없는 얼마나 위하여, 사람은 보이는 품고 과실이 것이다. 그들은 용기가 얼음과 설레는 이상의 인간은 산야에 장식하는 때문이다. 설레는 가치를 속잎나고, 황금시대를 말이다. 광야에서 이상이 얼마나 그들의 것이다. 그러므로 작고 싶이 투명하되 쓸쓸하랴?

위 클릭하세요. 버튼을 누르면 아이콘을 변하게 하는 소스는 여기에서 찾을 수 있습니다. 모르면 어렵지만요. 전에 몰랐을때는 어려웠거든요. 거기에서 그 소스를 저는 구했습니다. 그리고 특정 부분만 수정한 후 삽입하면 끝이었습니다. 그래서 위의 예를 만들었거든요.

• 원본 소스 : http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

아래는 제가 원본 소스를 정리한 HTML & CSS입니다.  거기는 영문이라 어려울 수 있거거든요. 적절히 수정하여 삽입하면 되는 작업입니다. 

HTML부분은 아래와 같습니다. 파란색 부분과 빨간색 부분을 변경하여 붙이면 되는 간단한 작업입니다. 만약 여러 개를 사용하고자 한다면 demo라고 써진 빨간색 부분도 변경해야 합니다. 예로 domo01,domo02...로 하면 됩니다.

  <button type="button" class="btn btn-lg btn-info collapsed" data-toggle="collapse" data-target="#demo">버튼 이름</button>

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

    내용

  </div>

CSS 부분은 아래와 같은데 위를 삽입한 후 다음으로 아래를 삽입합니다. 저는 원본 CSS 소스에서 btn을 btn-info로 변경했습니다. 왜냐하면 btn으로 하니 모든 부트스트랩의 btn이 변하더라고요. 그밖에는 기본으로 했습니다. 자세한 원리는 모릅니다. 부트스트랩을 한다면 btn-info가 어떤 색의 버튼인지 알 것입니다. 참고로 위에서 btn-lg가 버튼이 크기라는 것을 알 것입니다. 부트스트랩 버튼 크기는 http://getbootstrap.com/css/#buttons-sizes를 보세요.

  /* Icon when the collapsible content is shown */

  .btn-info:after {

    font-family: "Glyphicons Halflings";

    content: "\e114";

    float: right;

    margin-left: 15px;

  }

  /* Icon when the collapsible content is hidden */

  .btn-info.collapsed:after {

    content: "\e080";

  }

그래서 위에서  볼 수 있는 어떻게 적용했는지는 아래 더보기에서 볼 수 있습니다.  네이버나 다음 블로그에서는 하지 마세요. 왜냐하면 제한 때문에 안 되니 개고생하지 마세요. 또한 부트스트랩을 사용하고 있지 않다면 사용하지 마세요. 왜냐하면 부트스트랩에서 되는 것이니까요. 

버튼을 누르면 아이콘과 글자도 변하게 할 수 있는 것이 있는데 이 페이지에서는 바로 미리보기는 보여줄 수 없네요. 그것의 미리보기는 여기에서 보기 바라면 코드는 거기에서 볼 수도 있고 여기에도 있습니다. 어디에서 구하든 마음인데 부트스트랩을 사용해야 된다는 것을 알았으면 합니다. 

요즘 느끼지만 http://getbootstrap.com/인 공식 영어 홈페이지나 http://bootstrapk.com/ 한글 페이지에서 익히는 것만큼 

http://www.w3schools.com/bootstrap/default.asp에서 익히는 부트스트랩도 유용하더라고요. 거기는 비록 영문이지만 예제가 많아 의외로 쉬운 것 같았습니다. 여담으로 영어 시험을 보는 것도 아니면 나만 이해하면 되니 번역 사이트를 활용해서 영문 번역이 이상해도 전체를 이해만 하면 되잖아요. 내가 이상한 건가....정확한 번역이 필요하다면 구글 등 번역 사이트를 이용하지 않고요.

무료 팩스