W tym krótkim artykule pokażę wam jak zrobić prosty layout tabletu z użyciem Bootstrapa, CSS'a i odrobiny JavaScript oraz jQuery. Podgląd tego, co będziemy robić możecie zobaczyć tutaj.

Przygotujmy sobie najperw przedpole - zacznijmy więc od pobrania paczki MDBootstrap ze strony MDB albo stąd. Po rozpakowaniu i otworzeniu jej w edytorze, będziemy zajmować się dwoma plikami:

• index.html
• css/style.css

Drugim krokiem będzie otwarcie pliku index.html i usunięcie z niego całego kodu znajdującego się pomiędzy komenatarzami Start your project here i End your project here.

Trzecim naszym ruchem będzie utworzenie containeru dla naszego tabletu

<!-- Start your project here-->
    <div style="container mt-5">
    </div> 
<!-- End your project here-->

Przyszedł czas na stworzenie samego tabletu. Będzie on składał się z 4 części: obudowy, ekranu, przycisku i mikrofonu. Zacznijmy więc od stworzenia obudowy z ekranem. Stwórzmy dwa elementy div w sobie o klasach .tablet .screen

<div style="container mt-5">
    <div class="tablet">
        <div class="screen">
        </div>
    </div>
</div>

Czas nadać temu jakieś kształty, dlatego w CSS-ie przypiszemy im takie wartości:

.tablet {
    position: relative;
    width: 1024px;
    height: 568px;
    margin: auto;
    border: 16px #000 solid;
    border-left-width: 60px;
    border-right-width: 60px;
    border-radius: 36px;
    top:-25px;
}

.screen{  
    position: relative;
    text-align: center;
    width:906px;
    height: 538px;
    background-color: #fff;
    background-image: url();
    background-repeat: no-repeat;
    background-size: cover;
}

• postion: relative odpowiada za możliwość przesunięcia elementu w dowolnym kierunku względem jego domyślego położenia i nadaje taką samą możliwość przesuwania innych elementów

• width:, height - szerokosć, wysokość

• margin - margines zewnętrzny

• border - właściwości obramowania

• top - odległość od górnej krawędzi

• text-algin: center - wyśrodkowanie tekstu

• background-color/image/repeat/size - kolor, obrazek, powtarzanie się i wielkość tła

Jako tapetę możecie wybrać dowolną rzecz, ja wybrałem tę:

Kolejnym krokoiem będzie stworzenie przycisku start i mikrofonu, stworzymy to poprzez użycie pseudoklasy :before i :after

.tablet:after {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    left: -3.5%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgb(141, 140, 140);
    border-radius: 50%;
}

.tablet:before {
    content: ' ';
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    right: -4.3%;
    transform: translate(-50%, -50%); 
    background: rgb(141, 140, 140);
    border-radius: 50%;
}

• content - ustala zawartość, gdyż przy jej braku element nie zostanie wyświetlony (w tym wypadku)

• display: block - element zostanie wyświetlony jako blok

• position: absolute - element zosataje dostosowany do innego elementu z klasą position: relative

• transform: translate - odpowiada za przesunięcie w pionie i poziomie

Tym sposobem otrzymaliśmy tablet:

Czas połączyć się do sieci WiFi i sprawdzić czy jest naładowany, nieprawdaż? Dlatego utwórzmy na górze biały pasek z ikoną WiFi, godziną i wskaźnikiem baterii. Zrobimy to poprzez używanie siatki Bootstrapowej w następujący sposób:

<div class="row text-white">
    <div class="col-4">
        <div class="wifi">
        </div>
    </div>
    <div class="col-4">
        <div>
        </div>
    </div>
    <div class="col-4">
    <div class="battery">
        </div>
    </div>
</div>
  

Udało nam się własnie stworzyć rząd, w którym znajują się równe 3 kolumny, stało się tak, gdyż siatka Bootstrapowa dzieli dany element na 12 równych kolumn, a my zadekralowaliśmy, iż chcemy mieć 3 kolumny na 4 szerokości (col-4) w rzędzie (row) z klasą dla WiFi po lewej oraz dla baterii po prawej. Teraz umieśćmy je już na właściwych miejscach, jako grafiki WiFi i baterii skorzystamy z ikon.

<div class="row text-white">
    <div class="col-4">
        <div class="wifi">
            <p>Tablet <i class="fas fa-wifi"></i></p>
        </div>
    </div>
    <div class="col-4">
        <p id="hour">12:00 am</p>
        <div>
        </div>
    </div>
    <div class="col-4">
        <div class="battery">
            <p>100% <i class="fas fa-battery-full"></i></p>
        </div>
    </div>
</div>

Jak mogliscie zauważyć wcisnąłem tam także id="hour" przy zegarze, będzie ono nam potrzebne na sam koniec, aby zrobić małą, aczkolwiek fajną rzezcz ;P

Skoro mamy już WiFi na tablecie, to wypadałoby zainstalować parę aplikacji. Niestety tutaj nie ma drogi na skróty, ale spokojnie - trudno nie będzie. Zacznijmy od stworzenia jednego kafelka aplikacji wraz z jego nazwą pod nim.

<div class="col-2">
    <div class="app">
        <i class="fas fa-3x fa-wrench center-icon"></i>
    </div>
    <div class="app-text">Settings</div>
</div>

Bez ustawień ani rusz, ale zanim zaczną one poprawnie działać trzeba je "ustawić", dlatego dodaliśmy klasę .center-icon aby wyśrodkować ikonę w pionie, a także klasę app i app-text żeby jakoś porządnie to wyglądało. Tak zacznie wyglądać po tym jak, ustalimy pewne granice - zrobimy to poprzez ustalenie ich w CSS-ie:

.app {
    width:80px;
    height:80px;
    border-radius: 25px;
}

.app-text {
    color:#fff;
    position: relative;
    margin-right: 30px;
}      

.center-icon {
    margin-top:16px;
}

Wygląda dobrze, tylko trochę ponuro- dlatego możemy zmienić jej kolor tła poprzez dodanie bootstrapowej klasy do elementu z klasą .app, listę kolorów znajdziecie tutaj. Jednocześnie możemy dodać do nich efekt podświetlenia po najechaniu i kliknięci, poprzez te dwie klasy .hoverable .waves-effect, natomiast listę różnych innych ikon znajdziecie tu. Pamiętajcie jednak też o tym, że domyślnie ikony są dużo mniejsze i aby zmienić ich rozmiar na taki jak powyżej, należy dodać do nich klasę .fa-3x. Skoro to już mamy ustalone - możemy działać dalej. Czas przygotować pole dla tych ikon, a zrobimy to w następujący sposób:

Zaczniemy od stworzenia klasy .apps-area oraz .app-row

.apps-area {
    position: relative;
    margin-left:50px;
    margin-right: 50px;
}    

.app-row {
    margin-bottom: 20px;
}

Gdy mamy już stworzone odpowiednie klasy, czas stworzyć resztę całej siatki. Będzie się ona składać z 3 rzędów po 6 aplikacji oraz 1 rzędu paska szybkiego wyboru.

<div class="apps-area">
    <div class="row app-row">
    </div>
    <div class="row app-row">              
    </div>
    <div class="row app-row">              
    </div>
    <div class="row app-row justify-content-center">
    </div>
</div>    

Teraz wystarczy już tylko przekopiować nasze ikony wraz z całym divem z klasą .col-2 parę razy do jednej z trzech lini i 3/4 razy do paska szybkiego wyboru . Po chwili lekkiej edycji powinniśmy otrzymać zbliony efekt:

Na sam koniec zostały nam dwie drobne rzeczy. Dodamy efekt zmiany kursora po najechaniu na dany kafelek oraz zrobimy coś z id="hour". Zacznijmy od efektu - wystarczy dodać atrybut :hover do klasy ikonki i zadeklarować zmianę kursora na inny:

.app:hover {
    cursor: pointer;
}

Co do tajemniczego ID, to potrzebne jest ono nam, aby nasz zegar poprawnie funkcjonował. Poniżej zamieszczam krótki kod, który należy wkleić na samym dole, między znacznikami script z podpisem Your Custom Script.

$(function() {
    startTime();
});
     
function startTime() {
    var today = new Date();

    var h = today.getHours();

    var m = today.getMinutes();

    m = checkTime(m);

    document.getElementById('hour').innerHTML = h + ":" + m;

    var t = setTimeout(startTime, 500);
    }
    
function checkTime(i) {
    if (i < 10) {i = "0" + i}
      
    return i;
}

Po przekopiowaniu jej w odpowiednie miejsce możesz zobaczyć, że zegar wyświetla już nie 12:00, a twoją aktualną godzinę! Małe, ale cieszy, prawda?

I tą troszeczkę skomplikowaną funkcją z inicjalizacją w jQuery udało ci się zrobić prosty layout tabletu, gratulacje!