Tablet Layout

W tym krótkim artykule pokażę wam jak zrobić prosty Layout Tabletu z użyciem Bootstrapa CSS'a i odrobiny Java Script oraz JQuery, podgląd tego co będziemy robić możecie zobaczyć tutaj.

Przygotujmy sobie najperw przedpole, zacznijmy więc od pobrania paczki MDBBootstrap z ze strony MDB albo z tą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 inego całego kodu znajdującego się pomiędzy komenatarzami Start your project here

Trzecim naszym ruchem będzie utworzenie conteineru 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 divy 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 możliwość przesuwania innych elementów względem jego

  • width height szerokosć wysokość

  • margin margines

  • 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ę tapetę

Kolejnym krokoiem będzie stworzenie przycisku start i mikrofonu, stworzymy to poprzez używania atrybutu :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 braku jej element nie zostanie wyświetlony (w tym wypadku)

  • display: block element zostanie wyświetlony w bloku

  • 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

Chyba czas połączyć się do 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ę tka gdyż siatka Bootstrapowa dzieli dany element 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 bateri skorzystamy z ikon, do

<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ć wsmyknął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ło by chyba zainstalować parę aplikacji, no 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. Stwórzmy więc go!

<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 ustawien 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, a tak zacznie wyglądać po tym jak ustalimy pewne granice, a 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ęcia, poprzez te dwie klasy hoverable waves-effect, natomiast listę różnych innych ikon znajdziecie tu, pamiętajcie jednak też o tym, że domyśle 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ędzu 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>
  • justify-content-center wyśrodkowywuje zawartość siatki

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

    Na sam koniec zostały nam 2 dropbne 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;
}

    A co do tajemniczego ID to potrzebne ono 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ć ze zegar wyświetla już nie 12:00 a twoją godzinę! Małe ale cieszy prawda?

    I tą troszeczkę skomplikowaną funkcjią z zainicjalizowaniem w JQuerry udało ci się zrobić prosty Layout Tabletu GRATULACJIE!