'부트스트랩' 카테고리의 글 목록::VICTORY

부트스트랩에 해당되는 글18건

부트스트랩5 그리드 12

container에서 fluid를 더 해 container-fluid로 변경했다. 레이아웃을 1단으로 하고 노트북을 하다보니 화면이 작게 보여서 fluid가 괜찮았다. 그런데 화면이 큰 모니터를 사용하면 fluid가 어떻게 보일지... 참고로 fulid를 사용하면 경계가 브라우저 앞 옆이다. 그리고 lg-12를 사용하니 왼쪽과 오른쪽 여백이 너무 없는 것 같아 lg-11로 했고 1은 여백이다. 사이드바에서 두 개를 같은 너비로 하고 싶었는데 그때 그리드릴 col를 사용하면 된다는 것을 알았다. lg에서 같은 너비를 같도록 col-lg를 사용했다. 만약 xs에서 같은 너비를 원한다면 col을 사용하면 될 것이다. 나는 class="col-sm" 라고 정의하면 두 개의 사이드바는 같게 되게 xs에서는 하나인..

2021.12.29

부트스트랩5에서 기본적인 다이내믹한 컨포넌트

이 블로그 스킨을 부트스트랩5로 만들었다는 것을 말했다. 이 블로그에 부트스트랩에서 제공하는 컴포넌트를 사용해 다이내믹하게 만드려 했다. 다른 사람이 부트스트랩5를 변형한 소스를 사용하지 않고 다이내믹하게 만들기는 쉽지 않았다. 아래는 부트스트랩5에서 기본으로 제공하는 내가 생각하는 다이내믹한 컴포넌트인 아코디언, 캐러셀, 오프캔버스 3개다. 아코디언 Accordion Item #1 This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the o..

2021.05.20

여기에서 부트스트랩 5를 시작하기로 했다.

이 글을 쓰기 전까지 이 블로그 스킨은 부트스트랩 버전 4였다. 내가 부트스트랩 버전 4를 공부하기 위해 만들었다. 이번에 버전 5 정식 변경하면서 더 알고 싶다는 생각이 들었다. 이 블로그를 5로 변경하기 전에 부트스트랩 버전 3으로 만든 블로그인 https://min-blog.tistory.com/를 버전 5로 변경해서 운영하려고 했다. 부트스트랩 5가 많이 변했고 그 블로그도 많이 추가하여 쉽지 않았다. 그런데 이 블로그를 버전 5로 변경한 후 마음이 변했다. https://min-blog.tistory.com/을 변경하다 보니 정말 무거워졌다. 얼마 동안 이 블로그를 운영한 후 마음이 안 들면 다시 https://min-blog.tistory.com/로 블로그를 가면 된다. 이 블로그에서는 순수하..

2021.05.15

카드 오버레이

이 글에서 특별한 것을 설명하려는 것이 아니다. 부트스트랩4에서 지원하는 아래와 같은 카드 오버레이에 대해 적으려는 것이다. 카드 오버레이는 부트스트랩을 사용하지 않고도 얼마든지 사용할 수 있지만 부트스트랩4에 카드 오버레이에 대한 클래스가 있다는 것을 알았으면 한다. 날카로우나 더운지라 피어나는 이상의 관현악이며, 천고에 고행을 위하여, 것이다. 이상, 천지는 과실이 대중을 끓는다. 인생의 풀이 그들의 피가 있는 끓는 이상이 노년에게서 무엇을 있는가? 우리는 가는 그러므로 것이다. 바로 피어나기 이상이 피는 노년에게서 것이 것이다. 긴지라 피는 우는 그들의 청춘의 힘차게 불어 힘있다. 부트스트랩4의 card에서 card-img-overlay라는 클래스가 생겨 이미지 위에 위 그림처럼 텍스트를 삽입하려고..

2018.11.29

티스토리블로그,인기글 치환자

부트스트랩4에 card가 추가됐다. 그리고 며칠 전에 티스토리 블로그에 인기 글을 추가할 수 있게 됐다. 며칠 전까진 불가능했다. 그래서 인기 글을 이 스킨을 추가했는데 세로로 나열되는 것이 마음에 안 들었다. 참고로 티스토리 블로그의 인기 글 치환자에 대해서는 여기를 보면 된다. 그래서 이 글 아래에 카테고리 다른 글이 부트스트랩4의 card를 이용했다. card를 이용하여 가로로 나열하기로 했다. 인기글은 5컬럼이어야 하고 부트스트랩 그리드는 12컬럼이다. 5의 배수가 안 되니 그냥 컬럼을 동일한 폭으로 하기 위해서는 위 그림에 나왔듯 col을 사용하기로 했다. 부트스트랩 4에서 컬럼을 동일하게 하기 위해서 col만 사용하면 된다. 3에서는 없었는데... 이렇게 col만 사용하면 스마트폰에서 컬럼을 ..

2018.11.22

부트스트랩4로 변경하기 포기했다.

내가 알고 있기로 부트스트랩 버전 2부터 출시일을 적자면 위와 같다. 현재 기준 최신 부트스트랩 버전은 4.1.3이다. 그리고 이 블로그는 부트스트랩 4로 만들었다. 내 다른 티스토리 블로그를 부트스트랩 3에서 4로 변경하려고 했지만 포기했다. 위에서 보듯이 버전 2에서 3으로 가는 시간을 오래 걸리지 않았지만 3에서 4로 가는 시간이 5년이라는 기간이 걸렸다. 그래서 내 다른 티스토리 블로그는 부트스트랩 3에 완전히 녹아 들었다. 그리고 3과 4가 많이 달라 변경할 것이 너무 많았다. 부트스트랩 3으로 만들 블로그를 4로 변경하려니 너무 힘들었다. 참고로 내가 부트스트랩 3으로 스킨을 만들었을 때가 2014년이었다. 이 블로그는 부트스트랩 4로 만들었고 다른 티스토리 블로그인 https://min-bl..

2018.11.17

글목록이 마음대로 안돼 골치다.

글목록을 부트스트랩4의 card를 사용해서 멋지게 만들려고 했는데 마음대로 안 됐다. 이 블로그 카테고리 다른 글을 보면 4개의 목록이 일정하다. 이 블로그의 카테고리 다른 글와 같은 코드를 사용했다. 그런데도 아래 그림처럼 썸네일이 일정하게 나오지 않았다. 며칠 이것 때문에 골치 아팠다. 글목록의 스크립트 잘못인지 아니면 내 잘못인지 몰라도 그냥 지금 사용하는 방식을 사용해야 할 것 같다. 게임 방송/녹화/캡처

2018.09.28

부트스트랩4의 기본 캐러셀(carousel)

아래 보이는 것이 부트스트랩 4에서 지원하는 기본 캐러셀(caousel)로 컨트롤 아이콘 아래 회색 막대기는 없다. 왜 회색 막대기가 나타나는지 알 수 없다. http://min-blog.tistory.comd의 메인에서나 http://min-blog.tistory.com/2225에서 볼 수 있는 캐러셀은 부트스트랩 3이다. 직접 보면 3과 4와 큰 차이는 없으므로 3소스를 4에 적용시키면 깨진다. Previous Next 아래는 위와 같은 것은 jsFiddle이라는 것으로 삽입한 것이다.. 윈도우10 홈과 프로 차이

2018.09.22

모달에 유튜브 나오게

http://min-blog.tistory.com에서 모달에 유튜브 동영상이 나오게 했다. 이 블로그에서도 스크립트를 설치하여 가능하게 했다. http://min-blog.tistory.com는 부트스트랩3으로 만들었지만 이 블로그에서도 적용 중이다.참고로 이 블로그는 부트스트랩 4이다. 아래 버튼을 클릭하면 영화 안시성과 명당의 메인 예고편 유튜브 동영상이 모달에 나올 것이다. 안시성 명당 모달은 부트스트랩이라 부트스트랩3이나 4가 필요하다. 위에서 http://min-blog.tistory.com이 부트스트랩 3으로 이 모달을 사용했다. 그리고 유튜브만 아니라 비메오도 가능하다. 유튜브나 비메오 동영상이 모달에 나오게 하는 것을 아래에서 배울 수 있다. 참고로 동영상만 아니고 이미지도 가능하다. ht..

2018.09.20

부트스트랩4,리스트 인라인

아래처럼 ul class에 list-inline을 추가하면 목록을 일렬로 나열한다. 부트스트랩4에서는 list-inline-item라는 것이 추가된 것 같다. 3에서는 단지 ul에 list-inline만 써 주면 목록이 일렬로 됐다. 목록 1 목록 2 목록 3 위에 대한 부트스트랩4에 대한 소스는 아래와 같다. 목록마다 list-inline-item이 추가되는 것 같다. 이 블로그 태그 모듈을 작업할 때도 3를 할 때처럼 list-inline만 추가했더니 안 됐다. 그런데 4에 대한 설명에는 변경이 없었다. 목록 1 목록 2 목록 3 게임 방송/녹화/캡처

2018.09.15

부트스트랩,익스플로러 반응형 처리

익스플로러 7,8에서는 반응형이 안 된다. 그래서 부트스트랩은 익스플로러 7,8에서 반응형이 가능하도록 하기 위해서 아래처럼 하고 있다. 아래 코드에서 IE9(익스플로러 9)보다 작으면 html5shiv.js와 respond.js를 처리하고도록 하고 있다. 여기에서 html5shiv.js는 html5에 해당하는 것이고 respond.js가 반응형에 관계된 것이다. 그러면 영어인 http://getbootstrap.com/를 익스플로러 7,8로 보면 반응형이 된다는 것을 알 수 있다. 그러면 티스토리도 반응형을 만들 수 있으니 티스토리도 익스플로러 7,8에서 반응형이 돼야 할 것이 맞아야 할 것이다. 그러나 이것 때문에 며칠 동안 고생하다 알았는데 티스토리에서 respond.js가 안 먹히므로 반응형이 안..

2015.02.04

부트스트랩 Carousel를 통한 명언

명언에 대한 출처는 여기이고 부트스트랩(Bootstrap) CAROUSEL을 통하여 다이나믹하게 만들어 보았다. 아래 부트스트랩에 대한 소스는 http://bootsnipp.com/snippets/featured/responsive-quote-carousel에서 구할 수 있다. 단 부트스트랩을 사용하지 않는다면 소스는 필요없고 아래 보이는 부트스트랩은 3.0.0을 사용하고 있다. 그러니 2.*을 사용한다면 필요없다. 반응형 Carousel 부트스트랩 3.0 꿈을 날짜와 함께 적어놓으면 그것은 목표가 되고, 목표를 잘게 나누면 그것은 계획이 되며, 그 계획을 실행에 옮기면 꿈은 이루어지는 것이다. 그레그 S. 레잇 계획은 미래를 현재 속으로 불러들인다. 당신이 지금, 미래에 대해서 무언가를 할 수 있도록 ..

2014.09.29

이 블로그의 부트스트랩 버전

이 글을 쓰는 시점으로 이 블로그는 부트스트랩 3.2.0을 사용하고 있다. 이 블로그는 부트스트랩 최신 버전을 사용하고 있으나 글을 쓴 후 다시 버전업될 것이다. 현재는 부트스트랩 3.2.0이 최신 버전이다. 부트스트랩을 설명하는 한글 사이트는 http://bootstrapk.com/BS3/인데 한글로 된 사이트의 최신 버전은 아마도 3.0인 것 같다. 왜냐하면 최신 버전을 사용하려면 영어 사이트인 http://getbootstrap.com/를 이용하기 바란다. 아래는 부트스트랩 3.2.0에서 작동하는 것이다. 아래 소스는 http://bootsnipp.com/snippets/featured/bootstrap-3d-buttons에서 구할 수 있다. 3D Buttons hot button Sunny but..

2014.09.01

부트스트랩 아이콘이 나오게 했다.

이 블로그에 사용한 등 아이콘이 크롬과 익스플로러에서는 나타났는데 파이어폭스에서는 안 나타나서 아래 그림처럼 최근 부트스트랩의 CDN CSS를 이용했다. 참고로 부트스트랩에서 사용하는 Glyphicons은 여기를 보고 부트스트랩 CDN은 여기를 보기 바란다. 그 다음으로 위에 CSS는 폰트 설정이 "Helvetica Neue",Helvetica,Arial,sans-serif으로 설정됐으니 아래처럼 설정했다. CSS에서 우선순위는 인라인 CSS,style,link순이니 폰트를 로 정의하면 될 것 같아 아래와 같이 html에 폰트를 설정했다.

2013.12.26

부트스트랩의 그리드 시스템이 헷갈린다.

부트스트랩3에서 그리드 시스템에 헷갈린다. 그래서 어떤때는 템플릿을 보고 무작정 그리드를 쓰거나 내가 이해하는 col-md-*만을 쓴다. 이 블로그도 col-md-*로 그리드를 사용하고 있다. .col-xs-,.col-sm-,.col-lg- 는 봐도 모르니 그냥 이해가 편한 col-md-만 사용하고 나머지는 템블릿을 본다. 참고로 아래 그림의 부트스트랩은 12칼럼인데 이 블로그는 10칼럼으로 하는데 언제 변경될지 모른다.부트스트랩3 그리드에 대한 설명(영어) : http://getbootstrap.com/css/#grid 부트스트랩 3의 그리드시스템을 좋은 것 같은데....헷갈리니 아쉽다.

2013.10.26

부트스트랩을 쓰니 간단하네

아래 접혔다 펴지는 것이나 3개의 댓글창이 나타나게 하는 탭을 쓴 것은 모두 부트스트랩((Bootstrap)에 있는 기능으로 했는데 정말 쉽다. 그냥 부트스트랩에 있는 설명대로만 하니 간단히 만들어지네. 그러나 http://min-blog.tistory.com에서 jQuery 플로그인으로 많이 구현했던 것에 비하면 너무 단순하게 금방 싫증날 것 같다는 생각이 든다. 생각외에 부트스트랩에는 유용한 기능이 많이 있으니 시간이 있으면 부트스트랩을 더 많이 알아 다양한 옵션을 많이 연구해야겠다. 남들과 똑같으면 금방 싫증날 것 같다는 생각이 들기 때문이다.

2013.10.07