PC Size
FastBoot v1.1
반응형 / 모바일, PC, 태블릿 겸용
수정사항
1. 다른글 보기 영역 표시 수정
2. 기타 잡 버그 수정
v1.0
Test Blog
Download
FastBoot_v.1.1.zip'반응형 티스토리 > FastBoot' 카테고리의 다른 글
| 반응형 스킨 FastBoot v1.3.5 공개 / 배포 (IE8 지원) (117) | 2014.03.12 |
|---|---|
| 우측 배찌 색깔 바꾸기 (6) | 2014.03.12 |
| [임시패치] FastBoot IE8 동작 개선 (18) | 2014.03.10 |
| FastBoot스킨 IE8 속도 빠르게 하기 / 플러그인 호환 문제 (10) | 2014.03.10 |
| FastBoot v1.3 반응형 스킨 블로그에 적용하기 (62) | 2014.03.08 |
| 티스토리 반응형 스킨 FastBoot v1.3 작업현황 (8) | 2014.03.06 |
| [티스토리 반응형 스킨] FastBoot v1.2 Specification / 배포 (19) | 2014.02.26 |
| [티스토리 반응형 스킨] FastBoot v1.1 배포 / 다운로드 (16) | 2014.02.19 |
| [티스토리 반응형스킨 배포] FastBoot v1.0 다운로드 (Bootstrap) (14) | 2014.02.15 |
| [티스토리 스킨] FastBoot Alpha 버전 완성 (16) | 2013.11.19 |
| [티스토리 스킨] 반응형 스킨 FastBoot(패스트부트) 제작 30% 완료 (0) | 2013.11.18 |
이 블로그에 적용시킨 반응형 스킨인 경우는 믹스업 추천 위젯이 특정 크기가 되면 없어지게 했네요. 여러 블로그를 다녔지만 그런 블로그를 보지 못 했거든요. 계속 수정되면 좋은 스킨이 될 것 같습니다.
자세히 보셨군요. ㅎㅎ
믹스업의 경우는 모바일에서 도저히 이쁘게 나오게 할 수 없어서 그렇게라도 했습니다.
저는 반응형 블로그를 추구한다면 없어져야 한다고 생각하거든요. 가끔 반응형 블로그에서 반응형이 안 되는 티에디션이나 위젯을 사용하는 것을 보면 그렇습니다.
그렇죠. 반응형이 안될꺼면 아예 쓰질 말아야죠. 제가 믹시를 뺀것도 같은 이유구요.. 반응형을 구현하려면 완벽하게 해야한다고 생각합니다.
안녕하세여 잘쓰고 있습니다
다름이 아니라 본문이랑.사이드바 수정은 어디서 잡아줘야하나여?^^
감사합니다. 도와드리고 싶은데 어떤걸 말씀하시는거죠? 내용이라면 skin.html에서 수정하시면 되는데요
본문영역이랑.사이드바 영역 넓히는 방법요~
스킨이 달라서 어디를 수정해야할지가 모르겠습니다...
아하.. 그 부분이시라면..
<div id="content" class="col-md-9 col-md-push-3">
<div id="sidebar" class="sidebar col-md-3 col-md-pull-9">
이 두 부분인데요..
Grid System이기 때문에 둘다 동시에 늘릴 수는 없구요,
하나가 늘어나면 다른 하나가 줄어들어야 합니다.
아마 화면 폭이 1280이상이신 넓은 모니터를 쓰고 계신 듯 한데..
이 스킨이 기본적으로 반응형이라서 모든 가로폭을 다 고려한 것이라서 최대값이 정해져 있습니다. 위에서 말씀드린 1280이 그 한계이고 그 이상으로 늘어나진 않습니다.
만약 사이드바를 더 넓히고 본문을 줄이고 싶으시다면 사이드바와 본문폭의 합이 12가 되게 하시면 됩니다. 무슨말이냐면..
<div id="content" class="col-md-9 col-md-push-3">
<div id="sidebar" class="sidebar col-md-3 col-md-pull-9">
에서 9+3=12죠?
8+4 역시 12이므로
<div id="content" class="col-md-8 col-md-push-4">
<div id="sidebar" class="sidebar col-md-4 col-md-pull-8">
이러면 본문이 줄어들고 사이드바가 커지구요
10+2역시 12이므로
<div id="content" class="col-md-10 col-md-push-2">
<div id="sidebar" class="sidebar col-md-2 col-md-pull-10">
이렇게 하시면 본문이 더 넓어지고 사이드바가 줄어듭니다.
아쉽게도 Bootstrap의 특성상 처음부터 유동형으로 제작하지 않았기 때문에 수정한다면 저 위의 두가지 경우의 정도로 수정이 가능하겠네요. 좀 더 와이드한 화면을 바라신 것 같은데 도움이 못되어 죄송합니다.
아하 좋은 정보 감사합니다
덕분에 수정이 잘되가고 있네여 마지막으로 질문점 하겠습니다 ㅠㅠ
사이드바 줄을 없애는 방법은 어떻게 하면될가여 ?
그리고 님 처럼 카운터를 하고싶은데 마지막조언점 부탁드릴게염
카운터는 다음버전 업할때 수정해서 올려드릴려고 했지만.. 소스는 아래와 같습니다.
1. skin.html
<s_sidebar_element>
<!-- 카운터 -->
<div class="panel panel-default">
<h4 class="panel-heading"><i class="fa fa-bar-chart-o"></i> Counter</h4>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="row">
<div class="col-xs-4 counter"><i class="fa fa-angle-right"></i> <span class="name">Today</span><br/><span class="count"></span></div>
<div class="col-xs-4 counter"><i class="fa fa-angle-right"></i> <span class="name">Yesterday</span><br/><span class="count"></span></div>
<div class="col-xs-4 counter"><i class="fa fa-angle-right"></i> <span class="name">Total</span><br/><span class="count"></span></div>
</div>
</li>
</ul>
</div>
</s_sidebar_element>
2. css
#sidebar .counter .count {
font-size:1.3em;
}
#sidebar .counter {
padding: 0;
text-align:center;
}
html은 카운터 부분 전체를 저렇게 덮어주시면 되구요, css는 위 부분을 추가하시면 됩니다.
아 그리고, 사이드바 줄은..
#sidebar .panel .list-group-flush .list-group-item {
border: none;
}
이렇게 추가하심 없어질 겁니다.
고맙습니다^^
설명해주시기도 힘들실텐데... 고생이 많으십니다
스킨 잘스도록 하겠습니다 꾸벅~~
근데 사이드바 줄을 추가시켜도 안없어집니다 ㅠㅠ
음.. 글들 사이에 줄 말씀하시는거 아닌가요?
CSS에 이런 부분 있죠 찾아보시면요
#sidebar .panel .list-group-flush .list-group-item {
padding: 0px 0px;
}
이 부분을
#sidebar .panel .list-group-flush .list-group-item {
padding: 0px 0px;
border: none;
}
이렇게 수정해보세요.
D컴퓨터님 블로그에서 해보니까 없어지는데요 ㅎㅎ..
흠 제가 못하는지 적용이 안되네여 그냥 사용해야게네여^^ㅋㅋ
ㅎㅎ.. 해보시다가 다른거 궁금하시면 또 놀러 오세요~~
네 알겠습니다 ㅎㅎ