Bootstrap Snippets

Makale İçerik Listesi

Homer Bootstrap 4.6 Overrides

Bootstrap 4.6 üzerine override olarak yaptığım stillendirmeler 

.breadcrumb-container {
    background-color:#e9ecef;
}
.breadcrumb {
    padding-right: 0;
    padding-left: 0;
    margin-bottom: 0;
}
.grid-container {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 1rem;
}

Modals

<!-- {{RESOURCE_MODAL_TRIGGER}} -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#{{MODAL_ID}}">
    {{BUTON_LABEL}}
</button>

<!-- {{RESOURCE_MODAL}} -->
<div class="modal fade" id="{{MODAL_ID}}" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="post"  action="{{ route('POST_ROUTE') }}">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">{{TITLE}}</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{CANCEL_BUTON}}</button>
                    <button type="submit" class="btn btn-primary">{{SAVE_BUTON}}</button>
                </div>
            </form>
        </div>
    </div>
</div>

Modal'ı Javascript ile açmak istersen 

window.addEventListener('keydown', (e) => {
    if (e.shiftKey && e.key == 'N') {
        $('#MODAL_ID').modal('show')
    }
})

Bootstrap doc - link

Modal açıldığında ayrıca belli bir field focuslansın istersen 

$('#myModal').on('shown.bs.modal', function () {
  $('#myModal #myInput').trigger('focus')
})

Form Elements

  1. Simple Text Field - Bootstrap Form 
    <div class="form-group">
    <label for="{{FIELD_ID}}">{{FIELD_LABEL}}</label>
    <input type="text|email|number|tel"
           class="form-control"
           id="{{FIELD_ID}}"
           name="{{FIELD_NAME}}"
           placeholder="ör. {{PLACEHOLDER_TEXT}}">
    <small class="form-text text-muted">{{SMALL_TEXT}}</small>
</div>
  2. Textarea  
    <div class="form-group">
    <label for="description">Açıklama</label>
    <textarea class="form-control" 
              id="description" 
              name="description" 
              rows="3"></textarea>
</div>

Flash Message

  1. Controllerdan aşağıdaki gibi bir mesaj döner  
    public function store(Request $request)
{
    ...
    return back()->with('message', '<strong>' . $request->title . '</strong> alanı başarıyla oluşturuldu.');
    // veya
    return redirect()->route('dashboard')->with('message', '<strong>' . $request->title . '</strong> alanı başarıyla oluşturuldu.');
}
  2. Bunu ön tarafta Boostrap Alert karşılar  
    @if (session('message'))
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
        {!! session('message')  !!}
        <button type="button" class="close" data-dismiss="alert">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif

Breadcrumbs

  1. Breadcrumb componentine ek olarak bir breadcrumb container yaptım... stil override'ı en üstte.  
    <nav class="breadcrumb-container">
    <div class="container">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Panel</a></li>
            <li class="breadcrumb-item"><a href="#">Alanlar</a></li>
            <li class="breadcrumb-item active">{{ $project->title }}</li>
        </ol>
    </div>
</nav>

Card

  1. Bootstrap Card - link  
    <div class="card">
    <div class="card-body">
        <h5 class="card-title">{{TITLE}}</h5>
        <p class="card-text">{{DESCRIPTION}}</p>
    </div>
</div>
  2. Daha güzel kart 
    <div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Lists

  1. As links  
    <div class="list-group">
    <a href="{{ route('ROUTE_LINK') }}"
       class="list-group-item list-group-item-action">
        {{ ROUTE_LABEL }}
    </a>
</div>
  2. Sağ tarafında sayı olan liste 
    <ul class="list-group">
  @foreach($books as $book)
  <li class="list-group-item d-flex justify-content-between align-items-center">
    {{ $book->title }}
    <span class="badge badge-primary badge-pill">{{ count($book->articles) }}</span>
  </li>
  @endforeach
</ul>
  3. İkisini birleştir  
    <div class="list-group">
  @foreach($books as $book)
  <a href="{{ route('booklink', $book) }}"
        class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
    {{ $book->title }}
    <span class="badge badge-primary badge-pill">{{ count($book->articles) }}</span>
  </a>
  @endforeach
</div>

Tabs

  1. Tab yapısı  
    <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item" role="presentation">
        <a class="nav-link active"
           data-toggle="tab"
           href="#{{TAB1_ID}}"
           role="tab">{{TAB1_LABEL}}</a>
    </li>
    <li class="nav-item" role="presentation">
        <a class="nav-link"
           data-toggle="tab"
           href="#{{TAB2_ID}}"
           role="tab">{{TAB2_LABEL}}</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane py-2 show active" id="{{TAB1_ID}}">
        {{TAB1_CONTENT}}
    </div>
    <div class="tab-pane py-2" id="{{TAB2_ID}}">
        {{TAB2_CONTENT}}
    </div>
</div>

Progress Bar

<div class="progress">
    <div class="progress-bar {{bg-success|warning|danger`}}" role="progressbar" style="width: 25%">%25</div>
</div>

Bootstrap doc - link

Width'i küçültmek istersen 

<div class="progress" style="height: 5px;">
  <div class="progress-bar" style="width: 25%;"></div>
</div>

Navbar

  1. En basitinden  
    <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
    <div class="container">
        <a class="navbar-brand" href="{{ url('/') }}">
            {{ env('APP_NAME', 'DEFAULT APP NAME') }}
        </a>
        <button class="navbar-toggler"
                type="button"
                data-toggle="collapse"
                data-target="#navbarSupportedContent">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <!-- Left Side Of Navbar -->
            <ul class="navbar-nav mr-auto">

            </ul>

            <!-- Right Side Of Navbar -->
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a href="{{ route('ROUTE_NAME') }}" class="nav-link">
                        ROUTE
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Jumbotron

  1. Fluid olan  
    <div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
    <a class="btn btn-primary" href="#" role="button">Learn more</a>
  </div>
</div>

Badge

<span class="badge badge-primary|secondary|success|danger">Primary</span>

Tables

  1. En Basit haliyle  
    <table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    @foreach($datapoints as $datapoint)
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    @endforeach
  </tbody>
</table>
  2. Başlığı koyu renkte yapmak için 
    <thead class="thead-dark">

    başlığı açık renkte yapmak için 

    <thead class="thead-light">
  3. Satırların renklerini bir düz/bir koyu yapmak için  
    <table class="table table-striped">
  4. Mouse ile üzerine gelince renklensin istersen  
    <table class="table table-hover">
  5. Küçük tablo için  
    <table class="table table-sm">
  6. Satırı veya hücreyi renklendirmek için  
    <!-- On rows -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>
  
  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>
  7. Responsive table yapmak için  
    <div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
  8. Referans - https://getbootstrap.com/docs/4.5/content/tables/