• 회원가입
  • 로그인
  • 구글아이디로 로그인

[theme] BS4 - Template (BS템플릿)

 

 

<!DOCTYPE html>

<html lang="ko">

<head>

    <title>Bootstrap 4 예제</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

    <style>

    .fakeimg {height: 200px;  background: #aaa; }

    </style>

</head>

<body>


<div class="jumbotron text-center" style="margin-bottom:0">

    <h1>홈짱닷컴 Homzzang.com</h1>

    <p>초보탈출은 홈짱닷컴에서~!</p> 

</div>


<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

    <a class="navbar-brand" href="#">홈</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#hzmenu"><span class="navbar-toggler-icon"></span></button>

    <div class="collapse navbar-collapse" id="hzmenu">

        <ul class="navbar-nav">

            <li class="nav-item"><a class="nav-link" href="#">코딩언어</a> </li>

            <li class="nav-item"><a class="nav-link" href="#">그누보드</a></li>

            <li class="nav-item"><a class="nav-link" href="#">서버관리</a></li>    

        </ul>

    </div>  

</nav>


<div class="container" style="margin-top:30px">

    <div class="row">

        <div class="col-sm-4">

            <h2>프로필</h2>

            <h5>사진</h5>

            <div class="fakeimg">사진 자리</div>

            <p>홈페이지 제작관리</p>

            <h3>사이드 메뉴</h3>

            <p>열심히 공부 ^!~</p>

            <ul class="nav nav-pills flex-column">

                <li class="nav-item"><a class="nav-link active" href="#">HTML</a></li>

                <li class="nav-item"><a class="nav-link" href="#">CSS</a></li>

                <li class="nav-item"><a class="nav-link" href="#">JS</a></li>

                <li class="nav-item"><a class="nav-link disabled" href="#">정회원</a></li>

            </ul>

            <hr class="d-sm-none">

        </div>

        <div class="col-sm-8">

            <h2>강의 소개</h2>

            <h5>코딩언어</h5>

            <div class="fakeimg">사진자리</div>

            <p>HTML CSS JS JQUERY</p>

            <p>PHP SQL BS</p>

            <br>


            <h5>그누보드</h5>

            <div class="fakeimg">Fake Image</div>

            <p>그누보드 영카트 원본</p>

            <p>그누보드 빌더 테마 스킨</p>

        </div>

    </div>

</div>


<div class="jumbotron text-center" style="margin-bottom:0">

    <p>Since 2012</p>

</div>


</body>

</html>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
basic BS4 - HOME (BS소개)
basic BS4 - Start (BS시작) - BS4다운 / BS4CDN / BS4구문
basic BS4 - Container (BS컨테이너) - 박스형 vs 와이드형 (= .container vs. .co…
basic BS4 - Grid (BS그리드)
basic BS4 - Text/Typography (BS글자 = BS텍스트)
basic BS4 - Color (BS색깔 = BS색상) - BS글자색 + BS배경색
basic BS4 - Table (BS테이블) - 테이블테두리 + 테이블배경색 + 반응형테이블
basic BS4 - Image (BS이미지) - 이미지모양 + 이미지정렬 + 반응형이미지
basic BS4 - Jumbotron (BS점보트론) - 박스형 vs 와이드형
basic BS4 - Alert (BS경고 = BS얼럿 = BS경보) - 배경색 + 글자색 + 링크색 + 닫기 + 애니…
basic BS4 - Button (BS버튼) - 버튼색깔 + 버튼크기 + 버튼활성화 + 버튼비활성화
basic BS4 - Button Group (BS버튼그룹)
basic BS4 - Badge (BS배지)
basic BS4 - Progress Bar (BS진행바 = BS진도바 = BS프로그레스바)
basic BS4 - Spinner (BS스피너 = BS회전 = BS로더)
basic BS4 - Pagination (BS페이지매기기 = BS페이지번호 = BS페이징 = BS패지네이션) + BS…
basic BS4 - List Group (BS리스트그룹)
basic BS4 - Card (BS카드) - Well (BS웰) + Panel (BS패널) + Thumbnail (B…
basic BS4 - Dropdown (BS드롭다운/BS드롭업 = BS드랍다운/BS드랍업)
basic BS4 - Collapse (BS접기 = BS컬랩스 = BS토글)
basic BS4 - Nav (네브) - 간단메뉴 + 일반탭 + 알약탭
basic BS4 - Navbar (메뉴바) - 네비게이션 메뉴바 (= 네브바 = 네비바) ※ BS4분기점
basic BS4 - Form (BS폼양식)
basic BS4 - Input (BS입력 = BS인풋)
basic BS4 - Input Group (BS입력그룹 = BS인풋그룹)
basic BS4 - Custom Form (BS커스텀폼)
basic BS4 - Carousel (BS캐러셀)
basic BS4 - Modal (BS모달)
basic BS4 - Tooltip (BS툴팁 = BS말풍선 허버형)
basic BS4 - Popover (BS팝오버) ★ - 클릭형말풍선
basic BS4 - Toast (BS토스트) - 순간말풍선 (= 팝업상자 = 짧은경고창 = 스낵바)
basic BS4 - Scrollspy (BS스크롤스파이) - 원페이지메뉴링크 (= 내부링크)
basic BS4 - Utilities (BS유틸클래스 + BS4추가클래스) ★★★★★
basic BS4 - Flex (BS플렉스박스) ★★★★★
basic BS4 - Icon (BS아이콘)
basic BS4 - Media Object (BS미디어객체) - 썸네일형, 요약형
basic BS4 - Filter (필터링) ★ - 테이블필터링 + 리스트필터링 + 드롭다운필터링 + div안 텍스트필…
grid BS4 - Grid (BS그리드) - 반응형 레이아웃 ★★★
grid BS4 - Grid Stacked-to-horizontal (BS그리드 수직정렬 → 수평정렬)
grid BS4 - Grid Extra Small (BS그리드 초소형기기) - .col-숫자, .col 클래스
grid BS4 - Grid Small (BS그리드 소형기기) - .col-sm-숫자, .col-sm 클래스
grid BS4 - Grid Medium (BS그리드 중형기기) - .col-md-숫자, .col-md 클래스
grid BS4 - Grid Large (BS그리드 대형기기) - .col-lg-숫자, .col-lg 클래스
grid BS4 - Grid Extra Large (BS그리드 초대형기기) - .col-xl-숫자, .col-xl 클…
grid BS4 - Grid Example (BS그리드 예제) ★
theme BS4 - Template (BS템플릿)
BS_bookmark BS4 - BS메가메뉴
BS_bookmark BS4 - Masonry (메이슨리) 갤러리
목록
찾아주셔서 감사합니다. Since 2012