로그인 페이지

header

    <!--부트스트랩 css 추가 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <!--JQuery 추가 -->
    <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <!--폰트어섬추가 -->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

body

<div class="container" style="padding-top: 100px">
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <!-- 오른쪽 메뉴바 -->
                    <button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="#nav_menu" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span> 
                        <span class="icon-bar"></span> 
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">
                        bootstrap 강의
                    </a>
                </div>
                <div class="collapse navbar-collapse" id="nav_menu">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="">HTML</a>
                        </li>
                        <li>
                            <a href="">CSS</a>
                        </li>
                        <li>
                            <a href="">PYTHON</a>
                        </li>
                        <li>
                            <a href="">Javascript</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="col-md-4 col-md-offset-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    로그인
                </div>
                <div class="panel-body">
                    <input type="text" class="form-control" placeholder="ID">
                    <br />
                    <input type="text" class="form-control" placeholder="비밀번호">
                    <br />
                    <button class="btn btn-lg btn-success btn-block">로그인</button>
                    <br />
                    <!-- 폰트 어썸 아이콘 -->
                    <a href="#" class="btn btn-lg btn-primary btn-block">
                        <i class="fa fa-facebook" aria-hidden="true"></i> 페이스북 로그인
                    </a>
                </div>
            </div>
        </div>

    </div>

게시판

body

<div class="container" style="padding-top: 100px">
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <!-- 오른쪽 메뉴바 -->
                    <button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="#nav_menu" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span> 
                        <span class="icon-bar"></span> 
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">
                        bootstrap 강의
                    </a>
                </div>
                <div class="collapse navbar-collapse" id="nav_menu">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="">HTML</a>
                        </li>
                        <li>
                            <a href="">CSS</a>
                        </li>
                        <li>
                            <a href="">PYTHON</a>
                        </li>
                        <li>
                            <a href="">Javascript</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

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

            <div class="panel panel-default">
                <div class="panel-heading">
                    Board
                </div>
                <div class="panel-body">
                    <a href="">자유게시판</a><br />
                    <a href="">포럼</a><br />
                    <a href="">News</a><br />
                </div>
            </div>

        </div>

        <div class="col-sm-10">
            <table class="table table-bordered table-hover">
                <tr>
                    <th>제목</th>
                    <th>작성일</th>
                    <th>삭제</th>
                </tr>
                <tr>
                    <td>안녕하세요</td>
                    <td>2019-03-24</td>
                    <td>
                        <a href="#" class="btn btn-danger">삭제</a>
                    </td>
                </tr>
                <tr>
                    <td>안녕하세요</td>
                    <td>2019-03-24</td>
                    <td>
                        <a href="#" class="btn btn-danger">삭제</a>
                    </td>
                </tr>
                <tr>
                    <td>안녕하세요</td>
                    <td>2019-03-24</td>
                    <td>
                        <a href="#" class="btn btn-danger">삭제</a>
                    </td>
                </tr>
            </table>

            <nav class="text-center">
                <ul class="pagination">
                    <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                    </li>
                </ul>
            </nav>
            
            <a href="" class="btn btn-default">작성하기</a>
        </div>

    </div>

summernote

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>summernote</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

    <div class="container" style="padding-top:50px;">
        <textarea name="" id="myEditor" class="form-control" cols="30" rows="10"></textarea>

    </div>


<!-- 스타일관련 -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.6/summernote.css" rel="stylesheet">
<!-- 자바스크립트관련 -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.6/summernote.js"></script>
<!-- 한글관련 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.6/lang/summernote-ko-KR.min.js"></script>

<script>
$(document).ready(function(){

    $('#myEditor').summernote({
        lang: 'ko-KR',
        height: 300,
    });


});
</script>
    
    
</body>
</html>