Wprowadzenie

Posted 3 lata ago / Bez kategorii

1 Cel mini tutoriala
Celem tego mini kursu jest przykładowy pokaz tworzenia dedykowanej strony dla klienta w WordPressie w oparciu o framework Bootstrapa 3. Motyw nie jest przenośny co oznacza że nie można go przenieść do dowolnej instalacji WordPressa bez importowania bazy danych lub pliku xml za pomocą narzędzi importu WP.

2.Uwaga!
Kod nie będzie omawiany w całości ze względu na jego obszerność. Nie wstawiam również linka dla downloadu całego kodu. Tutorial jest poświecony w dużej mierze Bootstrapowi więc po podstawowe matriały dotyczące wiedzy na temat tworzenia templatek WP odsyłam do Tworzenie templatek WP. Niektóre fragmentu kodu są oparte na wtyczkach ( google maps) które omawiam w ty kursie „TUTAJ LINK”. Sekcja formularza kontaktowego również jest zamodelowana i nie można z niej wysylać emaili ze względów bezpieczeństwa;).

3.Czym jest Bootstrap?
Bootstrap jest frameworkiem Definicja Wikipedi Bootstrap ułatwiającym tworzenie nowoczesnych stron www.

4.Po co stosować Bootstrap?
Bootstrap jest niezwykle popularnym frameworkiem. Główną zaletą jest jego reponsywność. Co to jest responsywność link. Zaoszczędzisz również wiele czasu na pisanie styli css oraz skryptów js/jquery.

Instalacja

Posted 3 lata ago / Bez kategorii

Aby zainstalować Bootstrap 3 posłużymy się plikiem functions.php oraz header.
1. Plik header- tutaj kod( zainsatlowa c wtyczke do prezentacjikodu!!!)

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

2. Plik functions –

function load_styles_and_scripts() {

//serwer lokalny style css
wp_enqueue_style(
‚main-styles’,
get_template_directory_uri().’/style.css’
);

//loading bootstrap js poprawne
wp_enqueue_script(
‚bootstrap-js’,
‚http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js’

);

}

add_action(‚wp_enqueue_scripts’, ‚load_styles_and_scripts’);

function skrypt(){

wp_register_script(
‚photo-gallery’,
get_template_directory_uri() . ‚/js/photo-gallery.js’
);
wp_enqueue_script(‚photo-gallery’);
}
add_action(‚wp_enqueue_scripts’, ‚skrypt’); 

Początkowo chciałem wszystsko wrzucić do pliku functions.php jednak stronka nie działała prawidłowo, zdecydowałem się więc na zapis jak powyżej. Cyfry będą oznaczać numer linijki.
Plik header:
1. Podłączenie styli Bootstrap za pomocą serwera CDN.
2. Podłączenie obsługi ajax oraz jquery za pomocą serwerów google.

Plik functions.php
6-7 Podłączenie pliku ze stylami, są to style nadpisane(overwrite).
12-16 Podłączenie obsługi javascript za pomocą serwerów CDN
23-31 Podłączenie skryptu obsługi galerii. Jest to dodatkowa funkcjonalność na rzecz tej konkretnej strony i nie jest wymagana:)

Uwaga!!!
Naturalnie wszystkie style Bootstrapa , obsługe js, można zainstalować „lokalnie” na swoim serwerze, ściągając odpowiednie pliki. Odpowiednie linki podaje na koniec tutoriala.

Szkielet ogólny Bootstrap – wprowadzenie

Posted 3 lata ago / Bez kategorii

Ogólna budowa layoutu strony www opartej na Bootstrap składa się z kontenerów( container), wierszy(row) oraz ( kolumn). Wygląd poszczególnych elementów jest kształtowany poprzez wbudowane klasy css oraz identyfikatory( te z kolei często korelują z js).
Nasz przykład będzie sie składał z czterech responsywnych kolumn.
Pierwsza bedzie zawierała obrazek,druga tablice, trzecia paragraf tekstu, czwarta tekstw nagłówku oraz eleemnt etykiety bootstrapa osadzony w tagu span. Kolumny posiadają swoje określone szerokości. Maksymalna to 12 i oznacza że zajmuje szerokość całego pojemnika( wiersza w jakiej się znajduje).Cala szerokość kontenera jest dzielona przez 12 np. 4 oznacza szerokość 4/12 kontenera czyli 1/3. Aby zachować ładnie do siebie przylegające kolumny należy ustawiać ich szerokość tak aby iloraz liczby kolumn przez szerokość lub suma szerkości kolumn zawsze wynosiła 12.
Sposób responsywnego ułożenia kolumn w naszym przykładzie:
laptopy i duże monitory- wszytskie cztery kolumny są ułożone obok siebie, szerokość w px zmienia się wraz ze zmiana szerokości ekranu urządzenia.
małe laptopy, netbooki- kolumny układają sie parami: po dwie jedne po drugimi:)
smartfony, telefony komórkowe- kolumny układją się w słup jedna pod drugą.
Objaśnienie rozdzielczości kolumn i przykładowe szerokości:
col-md-3 kolumna która poniżej rozdzielczości 992px (mały netbook) schowa się pod sąsiednia kolumnę, jej szerokość 3 jednostki (szerokość 3 kolumn)
col-sm-6 kolumna która poniżej rozdzielczości 768px (tablet) schowa się pod sąsiednia kolumnę, jej szerokość 6
col-xs-12 kolumna będzie płynnie zmieniała swoją szerokość przy rozdzileczościach mniejszych niż 768px (smartfon , telefon komórkowy), jej szerokość 12 jednostek (cała szerokość wiersza). Jest jeszcze lg ale może byc zastąpiony md.

<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<a href="#" class="thumbnail">
<img src="https://placehold.it/200×200" alt="…">
</a>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Imię</th>
<th>Nazwisko</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jan</td>
<td>Kowalski</td>
</tr>
<tr>
<td>2</td>
<td>Jakub</td>
<td>Nowak</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<p class="text-left">Tekst wyrównany do lewej.</p>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<h2>Przykładowy tekst <span class="label label-default">Etykieta</span></h2>
</div>
</div>
</div>

1.Kontener- główny pojemnik na nasz kontent
2.Wiersz- to w nim przechowywane są kolumny
3.Definicja pierwszej z czterech kolumn. Zachowanie kolumny zostało określone dla trzech typów urządzeń o różnej rozdzielczości
9.Tabela
32. Wyrównanie tekstu do prawej.
35. Domyślna etykieta Bootstrapa.

plik header i menu nawigacji

<pre><header>
<div class=”container”>
<div class=”row”>
<div class=”col-md-12″>

<nav class=”navbar navbar-inverse navbar-fixed-top” role=”navigation”>

<div class=”container-fluid”>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”#myNavbar”>

<span class=”sr-only”>Nawigacja strony</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<?php if (is_home() || is_front_page()) {?><!–jesli strona jest domowa lub frontowa–>
<h1 id=”site-title”>
<a href=”<?php echo home_url();?>” title=”<?php bloginfo( ‚name’ ); ?>”><!–zwrocenie nazwy szablonu i adresu–>
<?php bloginfo( ‚name’ ); ?>
</a>
</h1>
<?php } else {?><!–dla rozroznienia wygladu naglowka na stronie glownej i stron wpisow–>
<h1 id=”site-title”>
<a href=”<?php echo home_url(); ?>” title=”<?php bloginfo( ‚name’ ); ?>”>
<?php bloginfo( ‚name’ ); ?>
</a>
</h1>

<?php }?>
<h6 id=”site-description” style=”color:white;”>
<?php bloginfo( ‚description’ );?><!–wyswietlenie opisu strony–>
</h6>
</div>

<div id=”myNavbar” class=”collapse navbar-collapse”>
<?php
wp_nav_menu( array(
‚menu’ => ‚main-nav’,
//’menu_class’ => ‚nav navbar-nav navbar-right’,klasa ul menu
‚menu_class’ => ‚nav navbar-nav’,//ul

‚depth’ => 2,
// ‚link_before’ => ‚<b>’,
// ‚link_after’ => ‚</b>’,
‚walker’ => new BootstrapNavMenuWalker()
));
?>
</div>

</div>
</nav>

</div>
</div>
</div>
</header> </pre>

klasa BootstrapNavMenuWalker

Posted 3 lata ago / Bez kategorii

class BootstrapNavMenuWalker extends Walker_Nav_Menu {
/*

function start_lvl( &$output, $depth )- odpowiada za generowania tagu ul, przyjmuje parametry:referencje zmiennej output która będzie generować kod wyjściowy ( praca na oryginale obiektu a nie jego kopii) , depth – oznacza ilość zagnieżdżeń elementów ul (submenu)
*/
function start_lvl( &$output, $depth ) {

$indent = str_repeat( "\t", $depth );
$submenu = ($depth > 0) ? ‚ sub-menu’ : ”;
$output .= "\n$indent<ul class=\"dropdown-menu$submenu depth_$depth\">\n";

}
/*
 function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 )
start_el – odpowiada za generowanie elementów li a span po elemencie ul. Parametry: output- kod wyjściowy, item-pozycja w menu, depth ilość zagnieżdżeń ( domyślnie zero) , args jako tablica odpowiada za nazewnictwo klas, id ktore bedzie wspołtworzylo nazy klas poszczególnych elementów

*/
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

$indent = ( $depth ) ? str_repeat( "\t", $depth ) : ”;

$li_attributes = ”;
$class_names = $value = ”;

$classes = empty( $item->classes ) ? array() : (array) $item->classes;

// managing divider: add divider class to an element to get a divider before it.
$divider_class_position = array_search(‚divider’, $classes);
if($divider_class_position !== false){
$output .= "<li class=\"divider\"></li>\n";
unset($classes[$divider_class_position]);
}

$classes[] = ($args->has_children) ? ‚dropdown’ : ”;
$classes[] = ($item->current || $item->current_item_ancestor) ? ‚active’ : ”;
$classes[] = ‚menu-item-‚ . $item->ID;
if($depth && $args->has_children){
$classes[] = ‚dropdown-submenu’;
}

$class_names = join( ‚ ‚, apply_filters( ‚nav_menu_css_class’, array_filter( $classes ), $item, $args ) );
$class_names = ‚ class="’ . esc_attr( $class_names ) . ‚"’;

$id = apply_filters( ‚nav_menu_item_id’, ‚menu-item-‚. $item->ID, $item, $args );
$id = strlen( $id ) ? ‚ id="’ . esc_attr( $id ) . ‚"’ : ”;

$output .= $indent . ‚<li’ . $id . $value . $class_names . $li_attributes . ‚>’;

$attributes = ! empty( $item->attr_title ) ? ‚ title="’ . esc_attr( $item->attr_title ) .’"’ : ”;
$attributes .= ! empty( $item->target ) ? ‚ target="’ . esc_attr( $item->target ) .’"’ : ”;
$attributes .= ! empty( $item->xfn ) ? ‚ rel="’ . esc_attr( $item->xfn ) .’"’ : ”;
$attributes .= ! empty( $item->url ) ? ‚ href="’ . esc_attr( $item->url ) .’"’ : ”;
$attributes .= ($args->has_children) ? ‚ class="dropdown-toggle" data-toggle="dropdown"’ : ”;

$item_output = $args->before;
$item_output .= ‚<a’. $attributes .’>’;
$item_output .= $args->link_before . apply_filters( ‚the_title’, $item->title, $item->ID ) . $args->link_after;
$item_output .= ($depth == 0 && $args->has_children) ? ‚ <b class="caret"></b></a>’ : ‚</a>’;
$item_output .= $args->after;

$output .= apply_filters( ‚walker_nav_menu_start_el’, $item_output, $item, $depth, $args );
}

function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
//v($element);
if ( !$element )
return;

$id_field = $this->db_fields[‚id’];

//display this element
if ( is_array( $args[0] ) )
$args[0][‚has_children’] = ! empty( $children_elements[$element->$id_field] );
else if ( is_object( $args[0] ) )
$args[0]->has_children = ! empty( $children_elements[$element->$id_field] );
$cb_args = array_merge( array(&$output, $element, $depth), $args);
call_user_func_array(array(&$this, ‚start_el’), $cb_args);

$id = $element->$id_field;

// descend only when the depth is right and there are childrens for this element
if ( ($max_depth == 0 || $max_depth > $depth+1 ) && isset( $children_elements[$id]) ) {

foreach( $children_elements[ $id ] as $child ){

if ( !isset($newlevel) ) {
$newlevel = true;
//start the child delimiter
$cb_args = array_merge( array(&$output, $depth), $args);
call_user_func_array(array(&$this, ‚start_lvl’), $cb_args);
}
$this->display_element( $child, $children_elements, $max_depth, $depth + 1, $args, $output );
}
unset( $children_elements[ $id ] );
}

if ( isset($newlevel) && $newlevel ){
//end the child delimiter
$cb_args = array_merge( array(&$output, $depth), $args);
call_user_func_array(array(&$this, ‚end_lvl’), $cb_args);
}

//end this element
$cb_args = array_merge( array(&$output, $element, $depth), $args);
call_user_func_array(array(&$this, ‚end_el’), $cb_args);

}

}

jumbotron

Posted 3 lata ago / Bez kategorii

Co to jest jumbotron?
Jumbotron jest częścią składową Bootstrap, jego głównym zadaniem jest skupienie uwagi na danej akcji mającej miejsce na stronie. Na naszej stronie jest to przycisk „przepis dnia” wraz z podłączonym do niego łączem prowadzącym do treści tego przepisu.

<div class="jumbotron">
<div id="home" class="home">
<div class="text-vcenter">

<div class="classname">
<h1 style="color:orange;">Przepisy kulinarne oraz restauracje</h1>
</div>
<div class="classname">
<h3>Przepis dnia</h3>
</div>
<?php $the_slug = ‚receptura-nr1’;
$przepisy = new WP_Query(array(
‚post_type’ => ‚receptury’,
‚name’ =>$the_slug,
‚posts_per_page’ => 1)); ?>
<?php while($przepisy->have_posts()): $przepisy->the_post();?>
<a href="<?php the_permalink();?>" class="btn btn-default btn-lg classname">Sprawdz go</a>
<?php endwhile; ?>
</div>
</div>
</div> 

carousel- karuzela czyli slider

Posted 3 lata ago / Bez kategorii

Czym jest karuzela w Bootstrap?
Karuzela jest inaczej sliderem wbudowanym w ten framework. Można w niej prezentować treści w postaci tekstów i obrazów.

 <div id="myCarousel" class="carousel slide"><!–musi byc taka klasa aby karuzela byla responsywna–>
<ol class="carousel-indicators">
<li data-target="#myCarousel” data-slide-to="0" class=""></li>
<li class="active" data-target="#myCarousel" data-slide-to="1"></li>
<li class=”” data-target="#myCarousel" data-slide-to="2"></li>
</ol>

<div class="carousel-inner">
<?php $i=1;
$restauracje = new WP_Query(array(
‚post_type’ => ‚restauracje’,
‚posts_per_page’ => 6)); ?>
<?php while($restauracje->have_posts()): $restauracje->the_post();
if($i == 1){?>
<div class="item active">
<?php the_post_thumbnail(‚medium’);?>
<div class="carousel-caption">
<h2 class="text-primary"><?php the_title();?></h2>
<?php the_excerpt();?>

</div>
</div><!–item active–>
<?php }
else { ?>
<div class="item">
<?php the_post_thumbnail(‚medium’);?>
<div class="carousel-caption">
<h2 class="text-primary"><?php the_title();?></h2>
<?php the_excerpt();?>

</div>
</div><!–item–>
<?php }
$i++; endwhile;
wp_reset_postdata();
?>
</div><!– carousel inner–>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<i class="fa fa-angle-left fa-2x"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<i class="fa fa-angle-right fa-2x"></i></a>
</div>

segment restauracje

Posted 3 lata ago / Bez kategorii

kod restauracje

<div class="container mar-top-20">
<div class="panel panel-info">
<div class="panel-heading text-center text-primary grid__item color-2">
<a class="link link–surinami" href="<?php echo get_post_type_archive_link( ‚restauracje’ ); ?>"><span data-letters-l="Restau" data-letters-r="racje">Restauracje</span></a></div>

<div class="panel-body">

<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<?php $the_slug=’restauracja-nr1′;
$restauracje = new WP_Query(array(
‚post_type’ => ‚restauracje’,
‚name’ =>$the_slug,
‚posts_per_page’ => 1)); ?>
<?php while($restauracje->have_posts()): $restauracje->the_post();?>
<h3 class="panel-title"> <a href="<?php the_permalink(); ?>"><strong><?php the_title(); ?> </strong></a></h3>
</div>
<div class="panel-body">
<!– ostatnio dodany post –>

<div class="media ">
<div class="view view-eighth">
<a class="pull-left " href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail(‚thumbnail’);
}
?>
<div class="mask">
<h2><?php the_title(); ?></h2>
<p> <?php the_excerpt(); ?></p>
</div>
</div>
</a>
<div class="media-body">

<small><?php the_time(‚j F, Y’); ?></small>
<?php the_excerpt(); ?>

<a href="<?php the_permalink(); ?>" class="btn btn-info">Czytaj więcej!</a>

</div>
</div>
<hr>
<?php endwhile; ?> <!–koniec petli dla restauracji–>
</div>
</div>
</div>
<!–AKTUALNOSCI PRAWA–>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<?php $the_slug=’restauracja-nr2′;
$restauracje = new WP_Query(array(
‚post_type’ => ‚restauracje’,
‚name’ =>$the_slug,
‚posts_per_page’ => 1)); ?>
<?php while($restauracje->have_posts()): $restauracje->the_post();?>
<h3 class="panel-title"> <a href="<?php the_permalink(); ?>"><strong><?php the_title(); ?> </strong></a></h3>
</div>
<div class="panel-body">
<!– ostatnio dodany post –>

<div class="media ">
<div class="view view-eighth">
<a class="pull-left " href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail(‚thumbnail’);
}
?>
<div class="mask">
<h2><?php the_title(); ?></h2>
<p> <?php the_excerpt(); ?></p>
</div>
</div>
</a>
<div class="media-body">

<small><?php the_time(‚j F, Y’); ?></small>
<?php the_excerpt(); ?>

<a href="<?php the_permalink(); ?>" class="btn btn-info">Czytaj więcej!</a>

</div>
</div>
<hr>
<?php endwhile; ?> <!–koniec petli dla restauracji–>
</div>
</div>
</div>

<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<?php $the_slug=’restauracja-nr3-2′;
$restauracje = new WP_Query(array(
‚post_type’ => ‚restauracje’,
‚name’ =>$the_slug,
‚posts_per_page’ => 1)); ?>
<?php while($restauracje->have_posts()): $restauracje->the_post();?>
<h3 class="panel-title"> <a href="<?php the_permalink(); ?>"><strong><?php the_title(); ?> </strong></a></h3>
</div>
<div class="panel-body">
<!– ostatnio dodany post –>

<div class="media ">
<div class="view view-eighth">
<a class="pull-left " href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail(‚thumbnail’);
}
?>
<div class="mask">
<h2><?php the_title(); ?></h2>
<p> <?php the_excerpt(); ?></p>
</div>
</div>
</a>
<div class="media-body">

<small><?php the_time(‚j F, Y’); ?></small>
<?php the_excerpt(); ?>

<a href="<?php the_permalink(); ?>" class="btn btn-info">Czytaj więcej!</a>

</div>
</div>
<hr>
<?php endwhile; ?> <!–koniec petli dla restauracji–>
</div>
</div>
</div>
</div>
</div>
</div> 

Posted 3 lata ago / Bez kategorii

Kod dla tej sekcji jest zbieżny z sąsiadującymi sekcjami. Sama mapa wyświetla się za pomocą wtyczki którą przerobiłem na wersje z interfejsem dla usera z wersji Simple Google Maps Shortcode Pipina Wiliamsa. Wtyczkę tą opiszę w dziale poświęconym wtyczkom.

formularz kontaktowy

Posted 3 lata ago / Bez kategorii

<div class=”panel panel-info”>
<div class=”panel-heading text-center text-primary grid__item color-2″><span class=”link link–surinami”data-letters-l=”Formu” data-letters-r=”larz”>Formularz</span></div>
<div class=”panel-body”>

<?php echo $response; ?>
<form id=”my-contact-form” action=”<?php the_permalink(); ?>” method=”post” class=”form-horizontal role=”form”>

<fieldset>
<legend>Please fill in this form to contact us</legend>
<div class=”form-group”>
<label for=”name” class=”col-sm-4 control-label”>Your name <sup class=”text-danger”>* </sup>: </label>
<div class=”col-sm-8″>

<?php /*kodowanie znakow html tj <> na & itd zapobiega wstrzykiwaniu zlosliwego kodu,(wbud wp)*/?>

<input type=”text” name=”message_name” value=”<?php echo esc_attr($_POST[‚message_name’]); ?>”
required=”required” class=”form-control” >

</div>

</div>

<div class=”form-group”>

<label for=”message_email” class=”col-sm-4 control-label”>Your email <sup class=”text-danger”>* </sup>: </label>
<div class=”col-sm-8″>

<input type=”text” name=”message_email” value=”<?php echo esc_attr($_POST[‚message_email’]); ?>”required=”required” class=”form-control”>

</div>
</div>

<div class=”form-group”>

<label for=”message_text” class=”col-sm-4 control-label”>Your message <sup class=”text-danger”>* </sup>: </label>
<div class=”col-sm-8″>

<?php /*usuwa szkodliwe znaki */?>
<textarea type=”text” name=”message_text” cols=”30″ rows=”4″ required=”required” class=”form-control”>
<?php echo esc_textarea($_POST[‚message_text’]);?>

</textarea>

</div>
</div>

<div class=”form-group”>

<p><label for=”message_human”>Human Verification: <span>*</span> <br><input type=”text” style=”width: 60px;” name=”message_human”> + 3 = 5</label></p>
<input type=”hidden” name=”submitted” value=”1″>
<p><input type=”submit”></p>
</div>
</fieldset>
</form>

</div>
</div>
</div>

</div>

widget

Posted 3 lata ago / Bez kategorii

Widget jest częścią dotyczącą pluginów. Tworzenie przykładowe tworzenie widgetu omówię w dziale poświęconym pluginom.

Ciekawe i pożyteczne linki

Posted 3 lata ago / Bez kategorii

1. Codex WP-link oficjalnego serwisu poświeconego WP

2.Tutorial Allessandro Castellani – podstawy tworzenia templatek WP. Dość dobry materiał pokazujący jak stworzyć pierwszy prosty motyw WP. Filmy tutoriala są w języku angielskim, potrzebna conajmniej podstawowa znajomość php i css.

3.Tutorial Allessandro Castelani- Tutorial na yt na temat tworzenia złożonego komercyjnego motywu WP opartego na Bootstrap.

4.Polski tutorial poświęcony tworzeniu przy użyciu Bootstrapa.W jednym z działów jest część dotycząca tworzenia motywów WP w oparciu o Bootstrap.

5. Oficjalna strona frameworka Bootstrap.