Основен CSS

На врвот на скелето, основните HTML елементи се стилизирани и подобрени со проширливи класи за да обезбедат свеж, конзистентен изглед и чувство.

Наслови и текстуална копија

Типографска скала

Целата типографска мрежа се заснова на две Less променливи во нашата датотека variables.less: @baseFontSizeи @baseLineHeight. Првата е основната големина на фонтот што се користи насекаде, а втората е висината на основната линија.

Ги користиме тие променливи, и малку математика, за да создадеме маргини, додатоци и височини на линии од сите наши типови и многу повеќе.

Пример текст на телото

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultrices vehicula.

Копија на водечкото тело

Направете пасус да се истакне со додавање .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

h1. Заглавие 1

h2. Заглавие 2

h3. Заглавие 3

h4. Заглавие 4

h5. Заглавие 5
h6. Заглавие 6

Акцент, адреса и кратенка

Елемент Употреба Изборен
<strong> За нагласување на фрагмент од текст со важни Никој
<em> За нагласување на фрагмент од текст со стрес Никој
<abbr> Ги обвиткува кратенките и акронимите за да ја прикаже проширената верзија на лебди

Вклучете изборен titleатрибут за проширен текст

Користете .initialismкласа за кратенки со големи букви.
<address> За информации за контакт за неговиот најблизок предок или целото дело Зачувајте го форматирањето завршувајќи ги сите линии со<br>

Користење на акцент

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.

Забелешка: Слободно користете <b>и <i>во HTML5, но нивната употреба е малку променета. <b>има за цел да ги потенцира зборовите или фразите без да пренесе дополнителна важност, додека <i>е претежно за гласовни, технички термини итн.

Примери адреси

Еве два примери за тоа како <address>може да се користи ознаката:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Целосно име
[email protected]

Примери за кратенки

Кратенките со titleатрибут имаат светло испреплетена долна граница и покажувач за помош при лебдење. Ова им дава на корисниците дополнителни индикации дека нешто ќе се прикаже при лебдењето.

Додајте ја initialismкласата во кратенка за да ја зголемите хармонијата на типографската хармонија со тоа што ќе и дадете малку помала големина на текстот.

HTML е најдоброто нешто од исечениот леб.

Кратенка од зборот атрибут е attr .

Блокцитати

Елемент Употреба Изборен
<blockquote> Елемент на ниво на блок за цитирање содржина од друг извор

Додадете citeатрибут за изворната URL-адреса

Употреба .pull-leftи .pull-rightкласи за подвижни опции
<small> Изборен елемент за додавање на цитат за корисникот, обично автор со наслов на делото Ставете го <cite>околу насловот или името на изворот

За да вклучите блок цитат, завиткајте го <blockquote>кој било HTML како цитат. За директни цитати препорачуваме <p>.

Вклучете изборен <small>елемент за да го наведете вашиот извор и ќе добиете цртичка &mdash;пред него за стилски цели.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цел број posuere erat a ante venenatis. </p>
  3. <small> Некој познат </small>
  4. </blockquote>

Примери блок-цитати

Стандардните блок-цитати се стилизирани вака:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цел број posuere erat a ante venenatis.

Некој познат во Body of work

За да го поставите вашиот блок цитат надесно, додадете class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цел број posuere erat a ante venenatis.

Некој познат во Body of work

Списоци

Ненарачана

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Цел број molestie lorem at massa
  • Фацилиза во претиум нисл аликет
  • Нула волутпат аликвам велит
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Енеан седат амет ерат нунц
  • Eget porttitor lorem

Нестилизиран

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Цел број molestie lorem at massa
  • Фацилиза во претиум нисл аликет
  • Нула волутпат аликвам велит
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Енеан седат амет ерат нунц
  • Eget porttitor lorem

Нарачано

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Цел број molestie lorem at massa
  4. Фацилиза во претиум нисл аликет
  5. Нула волутпат аликвам велит
  6. Faucibus porta lacus fringilla vel
  7. Енеан седат амет ерат нунц
  8. Eget porttitor lorem

Опис

<dl>

Списоци со опис
Списокот со опис е совршен за дефинирање на поими.
Еуизмод
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Малесуада порта
Etiam porta sem malesuada magna mollis euismod.

Хоризонтален опис

<dl class="dl-horizontal">

Списоци со опис
Списокот со опис е совршен за дефинирање на поими.
Еуизмод
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Малесуада порта
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Главите горе! Списоците со хоризонтални описи ќе ги скратат термините кои се премногу долги за да се вклопат во поправката на левата колона text-overflow. Во потесни пристаништа за гледање, тие ќе се променат на стандардниот распоред на наредени распоред.

Во линија

Завиткајте ги вградените фрагменти од кодот со <code>.

  1. На пример , делот < code> </ code > треба да се завитка како внатрешен .

Основен блок

Користете <pre>за повеќе линии код. Не заборавајте да ги избегнете сите аголни загради во кодот за правилно прикажување.

<p>Примерок текст овде...</p>
  1. <пред>
  2. <p>Примерок текст овде...</p>
  3. </pre>

Забелешка: Не заборавајте да го чувате кодот во <pre>ознаките што е можно поблиску до лево; ќе ги прикаже сите јазичиња.

Опционално може да ја додадете .pre-scrollableкласата која ќе постави максимална висина од 350 пиксели и ќе обезбеди лента за лизгање со y-оска.

Google Prettify

Земете го истиот <pre>елемент и додадете две изборни класи за подобрено прикажување.

  1. <p> Примерок текст овде... </p>
  1. <pre class = "убав принт
  2. лини“ >
  3. <p>Примерок текст овде...</p>
  4. </pre>

Преземете го google-code-prettify и погледнете го readme за тоа како да го користите.

Обележување на табелата

Означете Опис
<table> Елемент за завиткување за прикажување на податоци во табеларен формат
<thead> Елемент на контејнер за редовите на заглавието на табелата ( <tr>) за означување на колоните на табелата
<tbody> Елемент на контејнер за редови на табелата ( <tr>) во телото на табелата
<tr> Елемент на контејнер за збир на ќелии на табелата ( <td>или <th>) што се појавуваат на еден ред
<td> Стандардна ќелија на табелата
<th> Специјална табела за етикети за колони (или ред, во зависност од опсегот и поставеноста)
Мора да се користи во<thead>
<caption> Опис или резиме на она што содржи табелата, особено корисно за читателите на екранот
  1. <табела>
  2. <глава>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

Опции за табели

Име Класа Опис
Стандардно Никој Нема стилови, само колони и редови
Основни .table Само хоризонтални линии меѓу редовите
Граничен .table-bordered Заокружува агли и додава надворешна граница
Зебра-лента .table-striped Додава светло сива боја на заднина на непарните редови (1, 3, 5, итн.)
Кондензиран .table-condensed Пресекува вертикална подлога на половина, од 8px до 4px, во сите елементи tdи thелементи

Примери за табели

1. Стандардни стилови на табели

Табелите се автоматски стилизирани со само неколку граници за да се обезбеди читливост и одржување на структурата. Со 2.0, .tableкласата е потребна.

  1. <table class = "table" >
  2. </table>
# Име Презиме Корисничко име
1 Означи Ото @mdo
2 Јаков Торнтон @масти
3 Лери птицата @twitter

2. Маса со пруги

Уживајте во вашите маси со додавање зебра-ленти - само додајте ја .table-stripedкласата.

Забелешка: Табелите со риги го користат :nth-childизбирачот CSS и не е достапен во IE7-IE8.

  1. <table class = "табела маса-риги" >
  2. </table>
# Име Презиме Корисничко име
1 Означи Ото @mdo
2 Јаков Торнтон @масти
3 Лери птицата @twitter

3. Ограничена маса

Додајте граници околу целата маса и заоблени агли за естетски цели.

  1. <table class = "табела граничи со маса" >
  2. </table>
# Име Презиме Корисничко име
1 Означи Ото @mdo
Означи Ото @getbootstrap
2 Јаков Торнтон @масти
3 Лери птицата @twitter

4. Кондензирана маса

Направете ги вашите табели покомпактни со додавање на .table-condensedкласата за да се преполови полнењето на ќелиите на табелата (од 8 px на 4 px).

  1. <table class = "table table-condensed" >
  2. </table>
# Име Презиме Корисничко име
1 Означи Ото @mdo
2 Јаков Торнтон @масти
3 Лери птицата @twitter

5. Комбинирајте ги сите!

Слободно комбинирајте која било од класите на табелата за да постигнете различен изглед со користење на која било од достапните класи.

  1. <table class = "table table-striped table-bordered table-condensed" >
  2. ...
  3. </table>
Целосно име
# Име Презиме Корисничко име
1 Означи Ото @mdo
2 Јаков Торнтон @масти
3 Лери птицата @twitter

Флексибилен HTML и CSS

Најдобриот дел за формите во Bootstrap е тоа што сите ваши влезови и контроли изгледаат одлично, без разлика како ќе ги изградите во вашата ознака. Не е потребен излишен HTML, но ние ги обезбедуваме шемите за оние на кои им е потребен.

Покомплицираните распореди доаѓаат со концизни и скалабилни класи за лесно стајлинг и врзување на настани, така што ќе бидете покриени на секој чекор.

Вклучени четири распореди

Bootstrap доаѓа со поддршка за четири типа распоред на форми:

  • Вертикално (стандардно)
  • Пребарување
  • Во линија
  • Хоризонтална

Различни типови распореди на формулари бараат некои промени за обележување, но самите контроли остануваат и се однесуваат исто.

Контролирајте ги состојбите и многу повеќе

Формите на Bootstrap вклучуваат стилови за сите основни контроли на формата како што се внесување, текстуална област и избор што би го очекувале. Но, исто така доаѓа со голем број прилагодени компоненти како што се додадени и предложени влезови и поддршка за списоци со полиња за избор.

Состојбите како грешка, предупредување и успех се вклучени за секој тип на контрола на формуларот. Вклучени се и стилови за оневозможени контроли.

Четири типа на форми

Bootstrap обезбедува едноставно обележување и стилови за четири стилови на вообичаени веб-форми.

Име Класа Опис
Вертикално (стандардно) .form-vertical (Не е потребно) Наредени, лево порамнети етикети над контролите
Во линија .form-inline Лево порамнети етикети и контроли со вграден блок за компактен стил
Пребарување .form-search Екстра-заоблен внес на текст за типична естетика за пребарување
Хоризонтална .form-horizontal Пловете лево, десно порамнети етикети на истата линија како контролите

Примери на форми кои користат само контроли за формулари, без дополнително обележување

Основна форма

Паметни и лесни стандардни поставки без дополнителна ознака.

Пример текст за помош на ниво на блок овде.

  1. <form class = „добро“ >
  2. <label> Име на етикетата </label>
  3. <input type = "text" class = "span3" placeholder = "Напишете нешто..." >
  4. <span class = "help-block" > Пример текст за помош на ниво на блок овде. </span>
  5. <label class = "проверка" >
  6. <input type = "checkbox" > Проверете ме
  7. </label>
  8. <button type = "submit" class = "btn" > Поднеси </button>
  9. </form>

Формулар за пребарување

Додадете .form-searchво формата и .search-queryво input.

  1. <form class = "барај форма-пребарување" >
  2. <input type = "text" class = "input-medium search-query" >
  3. <button type = "submit" class = "btn" > Барај </button>
  4. </form>

Вградена форма

Додадете .form-inlineза префинетост на вертикалното порамнување и растојанието на контролите на формата.

  1. <form class = "well form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "Email" >
  3. <input type = "password" class = "input-small" placeholder = "Лозинка" >
  4. <label class = "проверка" >
  5. <input type = "checkbox" > Запомни ме
  6. </label>
  7. <button type = "submit" class = "btn" > Најавете се </button>
  8. </form>

Хоризонтални форми

На десната страна се прикажани сите стандардни контроли за формулари што ги поддржуваме. Еве ја листата со точки:

  • внесување текст (текст, лозинка, е-пошта, итн.)
  • поле за избор
  • радио
  • изберете
  • повеќекратен избор
  • внесување датотека
  • текстуална област

Покрај текстот во слободна форма, секој HTML5 текст заснован на внесување изгледа вака.

Пример за обележување

Со оглед на горенаведениот распоред на формата на пример, тука е ознаката поврзана со првата влезна и контролна група. Сите класи .control-group, .control-label, и .controlsсе потребни за стилизирање.

  1. <form class = „форма-хоризонтална“ >
  2. <сет на полиња>
  3. <legend> Текст на легендата </legend>
  4. <div class = "контролна група" >
  5. <label class = "control-label" for = "input01" > Внесување текст </label>
  6. <div class = "контроли" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Текст за помош за поддршка </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Контролни состојби на формата

Bootstrap содржи стилови за фокусирани и disabledсостојби поддржани од прелистувачот. Го отстрануваме стандардниот Webkit outlineи применуваме a box-shadowна негово место за :focus.


Потврда на формуларот

Вклучува и стилови за валидација за грешки, предупредувања и успех. За користење, додајте ја класата на грешка во околината .control-group.

  1. <сет на полиња
  2. class = "грешка во контролната група" >
  3. </fieldset>
Некоја вредност овде
Можеби нешто тргна наопаку
Поправете ја грешката
Ууууу!
Ууууу!

Проширување на контролите на формуларот

Подгответе и прикачете влезови

Влезните групи - со дополнет или претходно поставен текст - обезбедуваат лесен начин да се даде повеќе контекст за вашите влезови. Одлични примери го вклучуваат знакот @ за кориснички имиња на Твитер или $ за финансии.


Поле за избор и радија

До верзијата 1.4, Bootstrap бараше дополнително обележување околу полињата за избирање и радија за да ги наредат. Сега, едноставно е да се повтори она <label class="checkbox">што го обвива <input type="checkbox">.

Вградените полиња за избор и радија се исто така поддржани. Само додајте .inlineна било кој .checkboxили .radioи ќе завршиш.


Вметнати форми и прикачете/закачете

За да користите prepend или додавање влезови во вградена форма, задолжително поставете ги .add-onи inputна иста линија, без празни места.


Формирајте текст за помош

За да додадете текст за помош за внесувањата на вашата форма, вклучете текст <span class="help-inline">за помош или блок за текст за помош со <p class="help-block">после влезниот елемент.

Користете ги истите .span*класи од мрежниот систем за влезни големини.

Можете исто така да користите статични класи кои не се пресликуваат на мрежата, не се прилагодуваат на одговорните стилови на CSS или сметка за различни типови на контроли (на пример, inputнаспроти select).

@

Еве некој текст за помош

.00
Еве повеќе текст за помош
$ .00

Забелешка: Етикетите ги опкружуваат сите опции за многу поголеми области за кликнување и поупотреблива форма.

Копче класа = "" Опис
btn Стандардно сиво копче со градиент
btn btn-primary Обезбедува дополнителна визуелна тежина и го идентификува примарното дејство во збир на копчиња
btn btn-info Се користи како алтернатива на стандардните стилови
btn btn-success Укажува на успешна или позитивна акција
btn btn-warning Укажува дека треба да се внимава со оваа акција
btn btn-danger Укажува на опасно или потенцијално негативно дејство
btn btn-inverse Алтернативно темно сиво копче, не врзано за семантичко дејство или употреба

Копчиња за дејства

Како конвенција, копчињата треба да се користат само за дејства додека хиперврските треба да се користат за објекти. На пример, „Преземи“ треба да биде копче додека „неодамнешната активност“ треба да биде врска.

Стиловите на копчињата може да се применат на било што со .btnпримена на класата. Сепак, обично ќе сакате да ги примените овие само на <a>и <button>елементи.

Компатибилност со вкрстени прелистувачи

IE9 не ги отсекува градиентите на заднината на заоблените агли, па затоа го отстрануваме. Поврзано, IE9 ги оневозможува оневозможените buttonелементи, прикажувајќи го текстот сив со непријатна текстуална сенка што не можеме да ја поправиме.

Повеќе големини

Дали сакате поголеми или помали копчиња? Додадете .btn-large, .btn-small, или .btn-miniза две дополнителни големини.


Состојба со инвалидитет

За оневозможени копчиња, додадете ја .disabledкласата на врските и disabledатрибутот за <button>елементите.

Примарна врска Врска

Главите горе! Овде користиме .disabledкако услужна класа, слична на заедничката .activeкласа, така што не е потребен префикс.

Една класа, повеќе ознаки

Користете ја .btnкласата на <a>, <button>, или <input>елемент.

Врска
  1. <a class = "btn" href = "" > Врска </a>
  2. <button class = "btn" type = "поднеси" >
  3. Копче
  4. </button>
  5. <влезна класа = "btn" тип = "копче"
  6. вредност = „Влез“ >
  7. <внеси класа = "btn" тип = "поднеси"
  8. вредност = "Поднеси" >

Како најдобра практика, обидете се да го совпаднете елементот за вашиот контекст за да обезбедите совпаѓање на прикажување меѓу прелистувачите. Ако имате input, користете го <input type="submit">за вашето копче.

  • икона-стакло
  • икона-музика
  • пребарување на икони
  • икона-плик
  • икона-срце
  • икона-ѕвезда
  • икона-ѕвезда-празна
  • икона-корисник
  • икона-филм
  • икона-та-голема
  • икона-та
  • икона-та листа
  • икона-ок
  • икона-отстрани
  • икона-зумирање
  • икона-зумирање
  • исклучување на иконата
  • икона-сигнал
  • икона-запчаник
  • икона-ѓубре
  • икона-дома
  • икона-датотека
  • икона-време
  • икона-пат
  • икона-преземи-алт
  • преземање на икони
  • икона-подигање
  • икона-инбокс
  • икона-игра-круг
  • икона-повтори
  • освежување на иконите
  • icon-list-alt
  • икона-заклучување
  • икона-знаме
  • икона-слушалки
  • исклучување на јачината на иконата
  • икона-намалување на јачината на звукот
  • зголемување на јачината на иконата
  • икона-qcode
  • икона-баркод
  • икона-ознака
  • икони-ознаки
  • икона-книга
  • икона-обележувач
  • печатење на икони
  • икона-камера
  • икона-фонт
  • задебелена икона
  • икона-курзив
  • икона-текст-висина
  • икона-текст-ширина
  • икона-порамни-лево
  • икона-порамнување-центар
  • икона-порамни-десно
  • икона-порамни-оправда
  • листа на икони
  • икона-вовлекување-лево
  • икона-вовлекување-десно
  • икона-facetime-видео
  • икона-слика
  • икона-молив
  • икона-мапа-маркер
  • икона-прилагоди
  • икона-нијанса
  • икона-уредување
  • икона-споделување
  • проверка на иконите
  • икона-поместување
  • икона-чекор-назад
  • икона-брзо-назад
  • икона-наназад
  • играње со икони
  • икона-пауза
  • икона-стоп
  • икона-напред
  • икона-брзо напред
  • икона-чекор-напред
  • исфрлање на иконата
  • икона-шеврон-лево
  • икона-шеврон-десно
  • икона-плус-знак
  • икона-минус-знак
  • икона-отстрани-знак
  • икона-во ред
  • икона-прашање-знак
  • икона-инфо-знак
  • икона-скриншот
  • икона-отстрани-круг
  • икона-ok-круг
  • икона-забрана-круг
  • икона-стрелка-лево
  • икона-стрелка-десно
  • икона-стрелка нагоре
  • икона-стрелка-надолу
  • икона-сподели-алт
  • icon-size-full
  • икона-промени големина-мала
  • икона-плус
  • икона-минус
  • икона-ѕвездичка
  • икона-извичник-знак
  • икона-подарок
  • икона-лист
  • икона-оган
  • икона-отворени очи
  • икона-затвори очи
  • икона-предупредувачки знак
  • икона-рамнина
  • икона-календар
  • икона-случајно
  • икона-коментар
  • икона-магнет
  • икона-шеврон-ап
  • икона-шеврон-долу
  • икона-ретвит
  • икона-количка
  • икона-папка-затвори
  • икона-папка-отвори
  • икона-промена на големина-вертикална
  • icon-size-horizontal
  • икона-HDD
  • икона-bullhorn
  • икона-ѕвонче
  • икона-сертификат
  • икона-палци нагоре
  • икона-палци-надолу
  • икона-рака-десно
  • икона-рака-лево
  • икона-рака нагоре
  • икона-рака надолу
  • икона-круг-стрелка-десно
  • икона-круг-стрелка-лево
  • икона-круг-стрелка-нагоре
  • икона-круг-стрелка-надолу
  • икона-глобус
  • икона-клуч
  • икони-задачи
  • икона-филтер
  • икона-актовка
  • икона на цел екран

Изграден како спрајт

Наместо секоја икона да биде дополнително барање, ние ги составивме во sprite - куп слики во една датотека што користи CSS за позиционирање на сликите со background-position. Ова е истиот метод што го користиме на Twitter.com и добро функционираше кај нас.

Сите класи на икони имаат префикс .icon-за соодветно именско растојание и опсег, слично како и нашите други компоненти. Ова ќе помогне да се избегнат конфликти со други алатки.

Glyphicons ни дозволи да го користиме сетот Halflings во нашиот комплет алатки со отворен код сè додека обезбедуваме врска и кредит овде во документите. Ве молиме размислете да го сторите истото во вашите проекти.

Како да се користи

Bootstrap користи <i>ознака за сите икони, но тие немаат класа на букви - само споделен префикс. За да го користите, ставете го следниов код речиси насекаде:

  1. <i class = "icon-search" </i>

Достапни се и стилови за превртени (бели) икони, подготвени со една дополнителна класа:

  1. <i class = "icon-search icon-white" ></i>

Има 140 класи од кои можете да изберете за вашите икони. Само додадете <i>ознака со вистинските класи и ќе бидете подготвени. Целосната листа можете да ја најдете во sprites.less или токму овде во овој документ.

Главите горе! Кога користите покрај низи текст, како во копчињата или на навигациските врски, погрижете се да оставите празно место по <i>ознаката за правилно растојание.

Случаи за употреба

Иконите се одлични, но каде би ги користел? Еве неколку идеи:

  • Како визуелни елементи за навигација на вашата странична лента
  • За чисто навигација управувана од икони
  • За копчињата да помогнат да се пренесе значењето на дејството
  • Со линкови за споделување контекст на дестинацијата на корисникот

Во суштина, секаде каде што можете да ставите <i>ознака, можете да ставите икона.

Примери

Користете ги во копчиња, групи на копчиња за лента со алатки, навигација или претходно поставени внесувања.