Main

Dasar

Semua konten dari website atau aplikasimu letakkan dalam Main. Membuat Main kamu membutuhkan tag <main> dengan class .main, Jika kamu menggunakan Sidebar, maka kamu harus menambahkan class .main--ml-sidebar-width setelah class .main, agar lebar Main menyesuaikan dengan lebar Sidebar. Kemudian didalam Main kamu bisa meng-implementasikan Grid Sistem Bootstrap untuk membuat konten dari website atau aplikasi kamu, lihat dokumentasi grid sistem Bootstrap!. Letakkan Main setelah Sidebar.

Ini adalah code dasar untuk membuat Main
CopyHTML
<!-- navbar -->
<nav class="navbar justify-content-start navbar--white">
    <a class="navbar__sidebar-toggler" href="#"><span class="fa fa-bars"></span></a>
    <a class="navbar-brand ml-3" href="#">
        <img src="[host mu]/dist/img/Reza_Admin.svg" width="120" alt="logo reza">
    </a>
</nav>
<!-- sidebar -->
<aside class="sidebar">
    <ul class="sidebar__nav">
        <li class="sidebar__item sidebar__item--header">Dashboard</li>
        <li class="sidebar__item"><a href="#">
            <span class="fa fa-home"></span> Gambaran</a>
        </li>
        <li class="sidebar__item">
            <a href="#"><span class="fa fa-group"></span> Rencana Harian</a>
        </li>
        <li class="sidebar__item">
            <a href="#"><span class="fa fa-area-chart"></span> Kemajuan</a>
        </li>

        <li class="sidebar__item sidebar__item--header mt-3">Konten</li>
        <li class="sidebar__item sidebar__item--dropdown-active">
            <a class="sidebar__btn-dropdown" href="#">
                <span class="fa fa-file-text"></span> Artikel
            </a>
            <ul class="sidebar__dropdown sidebar__dropdown--show">
                <li class="sidebar__dropdown-item sidebar__dropdown-item--active"><a href="#">HTML</a></li>
                <li class="sidebar__dropdown-item"><a href="#">CSS</a></li>
            </ul>
        </li>
        <li class="sidebar__item">
            <a class="sidebar__btn-dropdown" href="#">
                <span class="fa fa-video-camera"></span> Video
            </a>
            <ul class="sidebar__dropdown">
                <li class="sidebar__dropdown-item"><a href="#">PHP</a></li>
                <li class="sidebar__dropdown-item"><a href="#">Javascript</a></li>
            </ul>
        </li>
    </ul>
</aside>
<!-- main -->
<main class="main main--ml-sidebar-width">
    <div class="row">
        <div class="col-12">
            <h5>Ini adalah code dasar untuk membuat Main</h5>
        </div>
    </div><!-- row -->
</main>

Header

Membuat Header kamu perlu membuat element didalam element <div class="row"> menggunakan tag <header> dengan class .main__header, dan jangan lupa untuk menambahkan class .col-12, serta tambahkan juga class .mb-2, untuk memberi jarak terhadap element dibawah header. Selanjutnya dalam tag <header> buat element menggunakan tag <div> dengan class .main__title, didalam Main Title kamu bisa menambahkan judul dari headernya, kamu bisa menggunakan tag <h1>, <h2>, dan seterusnya. Namun saya sarankan untuk memakai tag <h4>. Selain judul kamu juga bisa menambahkan Breadcrumb, caranya sama seperti dokumentasi breadcrumb Bootstrap. Letakkan breadcrumb di bawah judul.

Jika kamu butuh untuk menambahkan text tambahan pada header, didalam tag <header> buat element menggunakan tag <div> dengan class .main__text, didalam Main Text kamu bisa menggunakan tag <p> untuk membuat paragraf dan tag <a> untuk membuat link. Letakkan Main Text setelah Main Title.

Main

Membuat Main dengan header dan header text.

CopyHTML
<!-- navbar -->
<nav class="navbar justify-content-start navbar--white">
    <a class="navbar__sidebar-toggler" href="#"><span class="fa fa-bars"></span></a>
    <a class="navbar-brand ml-3" href="#">
        <img src="[host mu]/dist/img/Reza_Admin.svg" width="120" alt="logo reza">
    </a>
</nav>
<!-- sidebar -->
<aside class="sidebar">
    <ul class="sidebar__nav">
        <li class="sidebar__item sidebar__item--header">Dashboard</li>
        <li class="sidebar__item">
            <a href="#"><span class="fa fa-home"></span> Gambaran</a>
        </li>
        <li class="sidebar__item">
            <a href="#"><span class="fa fa-group"></span> Rencana Harian</a>
        </li>
        <li class="sidebar__item">
            <a href="#"><span class="fa fa-area-chart"></span> Kemajuan</a>
        </li>

        <li class="sidebar__item sidebar__item--header mt-3">Konten</li>
        <li class="sidebar__item sidebar__item--dropdown-active">
            <a class="sidebar__btn-dropdown" href="#">
                <span class="fa fa-file-text"></span> Artikel
            </a>
            <ul class="sidebar__dropdown sidebar__dropdown--show">
                <li class="sidebar__dropdown-item sidebar__dropdown-item--active"><a href="#">HTML</a></li>
                <li class="sidebar__dropdown-item"><a href="#">CSS</a></li>
            </ul>
        </li>
        <li class="sidebar__item">
            <a class="sidebar__btn-dropdown" href="#">
                <span class="fa fa-video-camera"></span> Video
            </a>
            <ul class="sidebar__dropdown">
                <li class="sidebar__dropdown-item"><a href="#">PHP</a></li>
                <li class="sidebar__dropdown-item"><a href="#">Javascript</a></li>
            </ul>
        </li>
    </ul>
</aside>
<!-- main -->
<main class="main main--ml-sidebar-width">
    <div class="row">
        <header class="main__header col-12 mb-2">
            <div class="main__title">
                <h4>Main</h4>
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">Main</li>
                </ul>
            </div>
            <div class="main__text">
                <p>Membuat <a href="#">Main</a> dengan header dan header text.</p>
            </div>              
        </header>
    </div><!-- row -->
</main>

Box

Box adalah sebuah kotak dengan background putih dan border, dimana kamu bisa meletakkan didalamnya seperti table, form dan lain-lain, sesuaikan dengan kebutuhan. Membuatnya kamu perlu membuat element menggunakan tag <div> atau <section> (disarankan) dengan class .main__box, jangan lupa letakkan Box didalam grid sistem Bootstrap dan letakkan Box setelah Header.

Main

Membuat Main dengan header dan header text.

Ini adalah contoh penggunaan box
CopyHTML
<!-- navbar -->
<nav class="navbar justify-content-start navbar--white">
    <a class="navbar__sidebar-toggler" href="#"><span class="fa fa-bars"></span></a>
    <a class="navbar-brand ml-3" href="#">
        <img src="[host mu]/dist/img/Reza_Admin.svg" width="120" alt="logo reza">
    </a>
</nav>
<!-- sidebar -->
<aside class="sidebar">
    <ul class="sidebar__nav">
        <li class="sidebar__item sidebar__item--header">Dashboard</li>
        <li class="sidebar__item">
            <a href="#"><span class="fa fa-home"></span> Gambaran</a>
        </li>
        <li class="sidebar__item">
            <a href="#"><span class="fa fa-group"></span> Rencana Harian</a>
        </li>
        <li class="sidebar__item">
            <a href="#"><span class="fa fa-area-chart"></span> Kemajuan</a>
        </li>

        <li class="sidebar__item sidebar__item--header mt-3">Konten</li>
        <li class="sidebar__item sidebar__item--dropdown-active">
            <a class="sidebar__btn-dropdown" href="#">
            <span class="fa fa-file-text"></span> Artikel
            </a>
            <ul class="sidebar__dropdown sidebar__dropdown--show">
                <li class="sidebar__dropdown-item sidebar__dropdown-item--active"><a href="#">HTML</a></li>
                <li class="sidebar__dropdown-item"><a href="#">CSS</a></li>
            </ul>
        </li>
        <li class="sidebar__item">
            <a class="sidebar__btn-dropdown" href="#">
                <span class="fa fa-video-camera"></span> Video
            </a>
            <ul class="sidebar__dropdown">
                <li class="sidebar__dropdown-item"><a href="#">PHP</a></li>
                <li class="sidebar__dropdown-item"><a href="#">Javascript</a></li>
            </ul>
        </li>
    </ul>
</aside>
<!-- main -->
<main class="main main--ml-sidebar-width">
    <div class="row">
        <header class="main__header col-12 mb-2">
            <div class="main__title">
            <h4>Main</h4>
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active">Main</li>
            </ul>
            </div>
            <div class="main__text">
                <p>Membuat <a href="#">Main</a> dengan header dan header text.</p>
            </div>              
        </header>
        <!-- main box -->
        <div class="col-12">
            <section class="main__box">
                <h5>Ini adalah contoh penggunaan box</h5>
            </section>
        </div>
    </div><!-- row -->
</main>