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>
.justify-content-center
- wyśrodkowywuje zawartość siatki
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!