2309
- 0
- Адаптировал: irbees2008
- Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
Всем привет, вот нашел довольно интересную плюшку, интересное оформления поля поиска на бутстрапе. Ну похожих реализаций довольно много,и все требуют дополнительных скриптов и обычно jquery. Ну здесь тоже используется jquery, также используется подключение шрифтовых иконок fontawesome ,ну и стандартное подключение bootstrap 4.1.1
И так первое у нас должен быть подключен bootstrap 4.1.1 , jquery и fontawesome ну примерно так
Код:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
Конечно,все это может грузится и сайта, скачиваете скрипты стили,заливаете в папки шаблона и подключаете в шаблон.
Далее само поле поиска, добавляем туда где хотим его видеть
Код:
<div class="searchbar">
<input class="search_input" type="text" name="" placeholder="Search...">
<a href="#" class="search_icon"><i class="fas fa-search"></i></a>
</div>
Код:
.searchbar{
margin-bottom: auto;
margin-top: auto;
height: 60px;
background-color: #353b48;
border-radius: 30px;
padding: 10px;
}
.search_input{
color: white;
border: 0;
outline: 0;
background: none;
width: 0;
caret-color:transparent;
line-height: 40px;
transition: width 0.4s linear;
}
.searchbar:hover > .search_input{
padding: 0 10px;
width: 450px;
caret-color:red;
transition: width 0.4s linear;
}
.searchbar:hover > .search_icon{
background: white;
color: #e74c3c;
}
.search_icon{
height: 40px;
width: 40px;
float: right;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
color:white;
}Можешь почитать и вот эту статейку "Сегодня Международный день блогера"
Это тоже интересно
25.10.14 Лайтбокс эффект для Bootstrap
11.06.18Bootstrap 4 - Таймлайн
17.06.18Заголовок или логотип?
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.