Bootstrap 4 - 04.1: Component

Bootstrap 4 - 04.1: Component

loading....

Sekarang kita memasukin tutorial bootstrap 4 bagian 4. Pada tutorial bagian 4 ini kita akan belajar tentang component component yang ada di bootstrap 4.  Pembahasan tentang component bootstrap 4 ini mungkin akan di bagi menjadi beberapa bagian. Ok, sekarang kita mulai saja ke pembahasan nya.

  1. Alert
    <div class="alert alert-primary" role="alert">
      Contoh Alert
    </div>​
    Komponen ​Alert ini dapat di gunakan mempinyai beberapa jenis yang dari masing masing jenis nya akan menampilkan tampilan yang berbeda beda berikut ini jenis jenis komponen alert
    1. alert-secondary
    2. alert-success
    3. alert-danger
    4. alert-warning
    5. alert-info
    6. alert-light
    7. alert-dark

    Penggunaan nya cukup dengan mengganti alert-primary pada contoh diatas.

  2. Badges
    <h2>Rumah Code <span class="badge badge-secondary">^_^</span></h2>
    <button type="button" class="btn btn-primary">
      Rumah Code <span class="badge badge-light">^_^</span>
    </button>​

    Rumah Code ^_^

    <span class="badge badge-primary">Primary</span>
    <span class="badge badge-secondary">Secondary</span>
    <span class="badge badge-success">Success</span>
    <span class="badge badge-danger">Danger</span>
    <span class="badge badge-warning">Warning</span>
    <span class="badge badge-info">Info</span>
    <span class="badge badge-light">Light</span>
    <span class="badge badge-dark">Dark</span>
    Primary Secondary Success Danger Warning Info Light Dark

    Jika ingin menmpilkan badge dengan sisi nya rounded bisa menggunakan .badge-pill selain itu badge juga dapat di implementasikan untuk link berikut ini contoh nya

    <span class="badge badge-pill badge-primary">Contoh Badge-pill</span>
    <a href="#" class="badge badge-primary">Contoh Link Badge</a>
    Contoh Badge-pill Contoh Link Badge
  3. Breadcrumb biasanya di gunakan untuk navigasi
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="https://www.rumahcode.org/">Rumah Code</a></li>
        <li class="breadcrumb-item"><a href="https://www.rumahcode.org/blog">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Bootstrap 4 - 04.1: Component</li>
      </ol>
    </nav>​
  4. Buttons
    <button type="button" class="btn btn-primary">Button</button>
    <a class="btn btn-secondary" href="#" role="button">Link</a>
    <button type="button" class="btn btn-outline-success">Outline Buttons</button>
    <button type="button" class="btn btn-danger btn-lg">btn-lg</button>
    <button type="button" class="btn btn-warning btn-sm">btn-sm</button>
    <button type="button" class="btn btn-info btn-lg btn-block">btn-lg btn-block</button>
    <a href="#" class="btn btn-primary btn-sm active" role="button" aria-pressed="true">btn-sm active</a>
    <button type="button" class="btn btn-light btn-lg" disabled>Disabled Button</button>
    <button type="button" class="btn btn-dark" data-toggle="button" aria-pressed="false" autocomplete="off">
       data-toggle
    </button>
    <button type="button" class="btn btn-link">Link</button>​
    Link btn-sm active
  5. Button group
    <div class="btn-toolbar mb-3" role="toolbar" aria-label="Contoh Button Group">
      <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary">1</button>
        <button type="button" class="btn btn-secondary">2</button>
      </div>
      <div class="btn-group" role="group">
        <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Next
        </button>
        <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
          <a class="dropdown-item" href="#">3</a>
          <a class="dropdown-item" href="#">4</a>
        </div>
      </div>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text" id="btnGroupAddon">@</div>
        </div>
        <input type="text" class="form-control" placeholder="Input group example" aria-label="Rumah Code" aria-describedby="btnGroupAddon">
      </div>
    </div>

Lanjut ke Bootstrap 4 - 04.2: Component

Artikel Menarik Lainnya
Bootstrap, Bootstrap 4

loading...