JKUN

Welcome To The Jkun.net

블로그 포스트 검색결과


부트스트랩 에 해당되는 글 7개가 검색 되었습니다.

  1. 2016.06.19 [BootStrap 3] ScrollSpy
  2. 2016.06.19 [BootStrap 3] popover Example
  3. 2016.06.19 [BootStrap] Tooltip Styling
  4. 2014.10.28 부트스트랩 페이징 가운데 정렬(Center) (1)
  5. 2014.06.17 Metro UI CSS 2.0 BootStrap - Guide 1. Base CSS | 1. General CSS
  6. 2014.06.17 Metro UI CSS 2.0 BootStrap - Guide 1. Base CSS | Requirements
  7. 2014.03.14 메트로UI (MetroUI) 부트스트랩 (2)

Blog

[BootStrap 3] ScrollSpy

2016.06.19 18:19 Development/WebUI FrameWork | BootStrap


부트스트랩 스크롤 스파이 엘리먼트에 적용

링크 : http://tutsme-webdesign.info/bootstrap-3-scrollspy/

<body>
<div class="container">
    <nav id="target_nav" class="col-md-3">
        <ul class="nav list-group">
            <li class="list-group-item"><a href="#one">One</a></li>
            <li class="list-group-item"><a href="#two">Two</a></li>
            <li class="list-group-item"><a href="#three">Three</a></li>
            <li class="list-group-item"><a href="#four">Four</a></li>
        </ul>
    </nav>
    <div id="scroll-able" class="col-md-6">
        <section><h4 id="one">One</h4><p>Pellentesque habitant morbi tristique senectus et netus ... metus</p></section>
        <section><h4 id="two">Two</h4><p>Pellentesque habitant morbi tristique senectus et netus ... metus</p></section>
        <section><h4 id="three">Three</h4><p>Pellentesque habitant morbi tristique senectus et netus ... metus</p></section>
        <section><h4 id="four">Four</h4><p>Pellentesque habitant morbi tristique senectus et netus ... metus</p></section>
   </div>
</div>
 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script>
  $('div#scroll-able').scrollspy({ target: '#target_nav' });
</script>
</body>


저작자 표시
신고
현재 0 개의 댓글이 있습니다.
Comment

Blog

[BootStrap 3] popover Example

2016.06.19 18:16 Development/WebUI FrameWork | BootStrap


링크1 : http://www.w3schools.com/bootstrap/bootstrap_ref_js_popover.asp

링크2 : http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_popover_methods&stacked=h


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <style>
  a {
      font-size: 25px;
  }
  </style>
</head>
<body>

<div class="container">
  <h3>Popover Methods</h3>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Popover Example</a>
  <div>
    <p>Click on the buttons to manually control the popover above:</p>
    <button type="button" class="btn btn-primary">Show</button>
    <button type="button" class="btn btn-warning">Hide</button>
    <button type="button" class="btn btn-success">Toggle</button>
    <button type="button" class="btn btn-danger">Destroy</button>
  </div>
</div>

<script>
$(document).ready(function(){
    $(".btn-primary").click(function(){
        $("[data-toggle='popover']").popover('show');
    });
    $(".btn-warning").click(function(){
        $("[data-toggle='popover']").popover('hide');
    });
    $(".btn-success").click(function(){
        $("[data-toggle='popover']").popover('toggle');
    });
    $(".btn-danger").click(function(){
       $("[data-toggle='popover']").popover('destroy');
    });
});
</script>

</body>
</html>


저작자 표시
신고
현재 0 개의 댓글이 있습니다.
Comment

Blog

[BootStrap] Tooltip Styling

2016.06.19 18:06 Development/WebUI FrameWork | BootStrap


부트스트랩 툴팁에 대한 스타일링~


HTML

<a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom" class="red-tooltip">Tooltip on bottom</a>


CSS


.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
.red-tooltip + .tooltip > .tooltip-arrow { border-bottom-color:#f00; }

JS


$(document).ready(function(){
    $("a").tooltip();
});
저작자 표시
신고
현재 0 개의 댓글이 있습니다.
Comment

Blog

부트스트랩 페이징 가운데 정렬(Center)

2014.10.28 06:41 Development/WebUI FrameWork | BootStrap


부트스트랩에서 페이지네이션 목록을 가운데 정렬할때마다 좀 짜증나는데;;

구글링해보니 생각보다 간단했다.


부트스트랩에서 페이지네이션은 아래와 같은 코드로 되있을것이다.

<div class="pagination">
    <ul>
        <li class="first"><i class="icon-first-2"></i></li>
        <li class="prev"><i class="icon-previous"></i></li>
        <li>1</li>
        <li>2</li>
        <li class="active">3</li>
        <li class="spaces">...</li>
        <li class="disabled">4</li>
        <li>500</li>
        <li class="next"><i class="icon-next"></i></li>
        <li class="last"><i class="icon-last-2"></i></li>
    </ul>
</div>

암튼 그래가지고 저기에서 <ul> 요소에 display 속성을 inline-block 으로 해줌 생각보다 간단.^^

저작자 표시
신고
현재 1 개의 댓글이 있습니다.

ㅎㅎ 2015.01.29 10:40 신고

<div align="center">
하면 되지요 ^^


Comment

Blog

Metro UI CSS 2.0 BootStrap - Guide 1. Base CSS | 1. General CSS

2014.06.17 17:34 Development/WebUI FrameWork | BootStrap


Metro UI CSS 2.0 BootStrap Guide


Base CSS

General CSS


Global Styles


Colors

  • *-black
  • *-white
  • *-lime
  • *-green
  • *-emerald
  • *-teal
  • *-cyan
  • *-cobalt
  • *-indigo
  • *-violet
  • *-pink
  • *-magenta
  • *-crimson
  • *-red
  • *-orange
  • *-amber
  • *-yellow
  • *-brown
  • *-olive
  • *-steel
  • *-mauve
  • *-taupe
  • *-gray
  • *-dark
  • *-darker
  • *-transparent
  • *-darkBrown
  • *-darkCrimson
  • *-darkMagenta
  • *-darkIndigo
  • *-darkCyan
  • *-darkCobalt
  • *-darkTeal
  • *-darkEmerald
  • *-darkGreen
  • *-darkOrange
  • *-darkRed
  • *-darkPink
  • *-darkViolet
  • *-darkBlue
  • *-lightBlue
  • *-lightTeal
  • *-lightOlive
  • *-lightOrange
  • *-lightPink
  • *-lightRed
  • *-lightGreen

위 전역 색상 설정 클래스들을 사용하기에 규칙은 다음과 같습니다.


대상-컬러

대상-액션-컬러


대상

fg : 요소의 폰트 및 아이콘

bg : 요소의 배경

액션

hover : 마우스 오버시

active : 링크나 버튼에 대하여 실행 이벤트가 발생했을때

focus : 요소에 포커스가 발생했을때


해서 결과적으로는 녹색의 제목을 설정한다면 다음과 같다.

이 글은 제목 입니다.




저작자 표시
신고
현재 0 개의 댓글이 있습니다.
Comment

Blog

Metro UI CSS 2.0 BootStrap - Guide 1. Base CSS | Requirements

2014.06.17 17:19 Development/WebUI FrameWork | BootStrap


Metro UI CSS 2.0 BootStrap Guide

본문 : http://metroui.org.ua/


※ 가끔씩 여기 웹사이트가 에러날때는 식겁합니다. 열심히 보고 하는데, 찾을 수 없다고 할때가 가끔 있더군요.

해서 파일 다운로드는 및 가이드를 볼 수가 없게되면;; 어휴;;

이 부트스트랩 기반으로 개발된 웹서비스가.. 상상도 하기 싫군요.


해서 번역은 아니고 그냥 제가 가이드를 보면서 이해한 정도의 수준으로만 가이드 형식의 포스팅을 합니다.

캡쳐의 대장정이 될듯하네요. ㄷㄷㄷ;;



Base CSS

Requirements


Folder Structure - 폴더 구조


일단 기본적으로 빨간 밑줄 가있는 파일들은 모두 필요하다고 생각하시면 될 것 같습니다.


DOCTYPE - 문서형식

HTML 문서형식은 HTML5 의 문서 타입의 사용을 필요로 합니다.


<!DOCTYPE html>

<html>


Javascript - 자바스크립트

jQuery 2.0 플러그인과 jQuery UI 플러그인을 받아 적용시킵니다.


Namespace - 네임스페이스

BODY 요소에 metro 클래스를 추가해 주면 끝.

body class="metro"


저작자 표시
신고
현재 0 개의 댓글이 있습니다.
Comment

Blog

메트로UI (MetroUI) 부트스트랩

2014.03.14 12:40 Development/WebUI FrameWork | BootStrap


윈도우8 스타일의 웹사이트를 구현하려던 도중 메트로UI 도 부트스트랩이 있더라구요.

이미 많은 분들이 알고 사용하고 계시겠지만 꾸역꾸역 포스팅합니다. 

이미지를 클릭하시면 링크로 이동합니다.



상단의 네비게이션을 보면 다음과 같습니다.

  • Base CSS
    Requirements : 부트스트랩을 설치하고 웹페이지에 적용시키는 과정설명
    General CSS : Global 로 사용하는 스타일, 그리드 구성, 타이포그라피, 테이블, 폼, 버튼, 이미지
    Responsive : 부트스트랩은 반응형을 지원한다. 화면크기(스크린 사이즈)에 반응하는 크기등
    Icons : 개인적으로 이 부투스트랩을 사용하며, 제일 편하고 고마움을 느끼고 있는 이 아이콘들.
    빠른 속도로 UI 를 구성하기에 너무 편리하게 되어있습니다.
  • Components - 컴포넌트형식으로 모듈단으로 구성되어 있습니다. 여기 첫번째 메뉴에 나오는 타일.
    메트로의 꽃이라 할수 있는 타일과 다양한 컴포넌트들이 설명되있다.
  • Examples : 각각의 컴포넌트들을 구동시켜 예제로 표시되어있다. 근데;; 코드설명이 없어 자꾸 여기서
    요소검사기를 켜야해서 좀 짜증나기는 한다.
흠.. 더이상 설명은 힘드네. 다음 포스팅 부터는 차례대로 적용하는 과정을 포스팅하겠습니다.


저작자 표시
신고
현재 2 개의 댓글이 있습니다.

softsky 2014.03.18 14:26 신고

잘 사용하겠습니다. 감사합니다~


Comment