Bootstrap 3 – custom menu, fixed bottom, header, back to top

В програмирането има едно правило, което перефразирано гласи да не търсиш топлата вода всеки път. За това качвам няколко базови кода за Bootstrap 3, които съм писал или копирал и променял. Помогнал съм си леко с Less за някои стилове.

Custom menu
Нищо ново. Добавено е само малко CSS-кодиране на менюто, което се предлага стандартно с Bootstrap.

Bootstrap 3- custom menu

Bootstrap 3- custom menu

Демо

Header
Напаснал съм отделните слоеве с помощта на Boostrap стиловете col-*-push и col-*-pull, така че да има приличен респонзив.

Bootstrap 3- header

Bootstrap 3- header

Bootstrap 3- header

Демо

Fixed bottom
Фиксиран фуутер за мобилни устройства – особено полезно при писане на мобилно приложение, базирано на HTML.

Bootstrap 3- fixed bottom

Bootstrap 3- fixed bottom

Демо

Back to top бутон
Клиентите често искат подобна опция. Кода е няколко реда и има и малко JavaScript, освен CSS-а.

Bootstrap 3- back to top

Демо

Допълнително в архива съм добавил и Bootstrap 3 – login form.

Изтегляне на кода: header_menu_fixed-bottom_back-to-top_login-form.zip

===============
Добавям и още 2 вертикални менюта

Bootstrap 3 – Drop Down menu – only CSS
Bootstrap 3 - CSS Drop Down menu - CSS_only
Демо
Изтегляне

Bootstrap 3 – Drop Down menu – CSS and JavaScript
Bootstrap 3 - CSS Drop Down menu - CSS and JS
Демо
Изтегляне

Benjie S5 – бюджетен HiFi mp3-player

BENJIE S5 8G APE/FLAC/WAV High Sound Quality Entry-level Lossless Music Player
Тази малка джаджка Benjie S5 ми носи много радост вече няколко месеца и с удоволствие ще и отделя няколко реда. Това е китайски бюджетен HiFi mp3 плеър от нисък клас за около $20, който обаче е сериозен конкурент на доста по-скъпи модели. Benjie S5 е копие 1:1 на друг китайски плеър AGptek M20. Не знам каква е идеята на китайците да продават едно устройство под 2 марки, но може би така печелят повече. Убеден съм, че и вътрешностите и функциите ще са еднакви.
Характеристиките на устройството са следните.

Описание

  • Entry-level Lossless
  • Professional sound quality
  • Blind-operation
  • 1mm рамка
  • Вградена 8G памет (TF card: Max 64GB)
  • 1 inch дисплей
  • Метално тяло
  • FM радио
  • Folder Plays
  • HD запис
  • EBook
  • Song Lyrics

Спецификации

  • Модел: BENJIE S5
  • Тяло: метално
  • MP3 bit rates: 8-320Kbps
  • Плейбек: около 58 часа непрекъснат плейбек
  • Bit rate на запис: 5-384Kbps
  • Поддържани формати: MP3 / APE /FLAC/ WAV/ WMA/OGG
  • USB свързване: Efficient 2.0USB
  • Живот на батерията при запис: 30 часа непрекъснат запис
  • Вградена батерия: lithium polymer
  • Формат на записа: MP3, WAV
  • Чип: Action 2127s
  • Изход на слушалки: 16-128??
  • Тип на дисплея: OLED
  • Размер на екрана: 1 inch
  • Размери: 7.5×3.1×0.9cm
  • Микрофон: dual microphone stereo surround
  • Тегло: 51g

Качеството на звука е доста добро. Определено превъзхожда останалите ми mp3 плеъри (Sansa Clip/ Sansa Zip) и телефони (Moto G, Xiaomi Mi 3). FM хваща отлично, дори и със скапани слушалки. Поддържа Folder View и има четец на текст. Размера е прилично малък и се побира в малкото джобе на дънките. Естествено има и недостатъци, които много ме дразнят.

Турбо недостатъци

  • Не поддържа потребителски EQ
  • Не записва радио
  • Липсва клип за закачане на джоба

Моята бройка я закупих от някаква промоция март месец на Gearbest за $19.40. В момента гледам, че е на цена от $23.55 с безплатна доставка. Това също е добра цена за този плеър.
В момента ползвам плеъра със супер ефтини китайски слушалки QianYun Qian25 клонинг на Sennheiser MX500.
BENJIE S5 8G APE/FLAC/WAV High Sound Quality Entry-level Lossless Music Player
Слушалките определено си заслужават парите от $5-$6. До скоро го ползвах с AKG нещо си, но китайчетата победиха в почти равностойна битка. До такава степен ми харесаха, че се колебая да поръчам и следващия модел Qian39 или още по добре Qian69. Вариант е да инвестирам още малко и да си взема TY Hi-Z HP150 за които пишат наистина много хубави неща в ревютата. Просто напоследък европейските и американски производители зарязаха производството на качествени earbuds слушалки. Почти няма избор или цените са отврат, а качеството посредствено. И какво остава на старите олд-скуул типчета, като мен, освен да прегърнат радушно предложенията на братчетата китайци. А те наистина правят уникални копия на AKG и Sennheiser.

За добиване на представа малко снимки на Benjie S5 в комбинация с популярни модели слушалки и усилватели за mp3 плеъри:
BENJIE S5 Entry-level Lossless Music Player

BENJIE S5 Entry-level Lossless Music Player

BENJIE S5 Entry-level Lossless Music Player

BENJIE S5 Entry-level Lossless Music Player

Сравнение с други плеъри:

BENJIE S5 Entry-level Lossless Music Player

Bootstrap 3 – Login form

Bootstrap 3 - Login Form
От известно време се каня да променя логин формата за админ панела на проектите, които правя. Направих една форма, която не знам дали ще ползвам, но ще ми е полезна като отправна точка. За да си помогна за стиловете използвах Less (език за стилови множества или CSS) и GUI-то SimpLESS – портабъл е и работи доста леко за разлика от други подобни.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
// 		MIXINS
//  ==========================================
.rounded-corners (@radius1: 5px, @radius2: 5px, @radius3: 5px, @radius4: 5px) { 
	-webkit-border-radius: @radius1 @radius2 @radius3 @radius4; 
	-moz-border-radius: @radius1 @radius2 @radius3 @radius4; 
	-ms-border-radius: @radius1 @radius2 @radius3 @radius4; 
	-o-border-radius: @radius1 @radius2 @radius3 @radius4; 
	border-radius: @radius1 @radius2 @radius3 @radius4; 
}
 
.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
	-webkit-box-shadow:	@x @y @blur @spread rgba(0, 0, 0, @alpha);
	-moz-box-shadow:	@x @y @blur @spread rgba(0, 0, 0, @alpha);
	box-shadow:		@x @y @blur @spread rgba(0, 0, 0, @alpha);
}
 
.gradient (@startColor: #eee, @endColor: white) {
	background-color: @startColor;
	background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
	background: -webkit-linear-gradient(top, @startColor, @endColor);
	background: -moz-linear-gradient(top, @startColor, @endColor);
	background: -ms-linear-gradient(top, @startColor, @endColor);
	background: -o-linear-gradient(top, @startColor, @endColor);
}
 
 
 
// 		Colors
//  ==========================================
@silver_light: #edf1f2;
@silver_white: #f7f8fa;
@silver_dark: #eef7fc;
@silver_border: #c3d5d9;
@grey: #8f8f8f;
@blue_dark: #76ccea;
@blue_light: #badff2;
 
 
// 		Styles
//  ==========================================
body {
	background-color: @silver_light;
}
 
.container.lf{
	width: 322px;
	color: @grey;
	a {color: @grey;}
 
		.logf {
			margin-top: 50px;
			.rounded-corners(5px, 5px, 5px, 5px);
			.drop-shadow(0px, 0px, 6px, 2px, 0.05);
		}
 
		.lfhead, .lfbody, .lffooter{
			border: 1px solid @silver_border;
			background-color: @silver_white;
			min-height: 20px;
			// line-height: 15px;
		}
 
		.lfhead {
			border-bottom: 0;
			.rounded-corners(5px, 5px, 0, 0);
		}
 
		.lfbody {
			border-top: 0;
			border-bottom: 0;
 
			.input-group-addon {
				color: @grey;
			}
			 .form-control:focus {
			 	.drop-shadow(0px, 0px, 6px, 2px, 0.05);
			 	border-color: @blue_dark;
			 }
		}
 
		.lffooter {
			background-color: @silver_dark;
			.rounded-corners(0, 0, 5px, 5px);
			padding-top: 16px;
 
			.text-left {
				padding-top: 8px;
			}
 
			label {
				font-weight: normal;
				color: @grey;
			}
 
			input[type='button'], input[type='reset'], input[type='submit'] {
				.rounded-corners(18px, 18px, 18px, 18px);
				border-color: @blue_dark;
				.gradient(@blue_light, @blue_dark);
				font-weight: bold;
				.drop-shadow(0px, 1px, 2px, 1px, 0.10);
				text-shadow: 1px 1px @blue_dark;
 
				&:hover {
					.gradient(@blue_dark, @blue_light);
				}
			}
		}
 
	.lflinks {
		padding-top: 8px;
	}
 
}

HTML кода:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div class="container lf">
   <div class="row logf text-center">
      <form action="" method="post" >
         <div class="col-xs-12 lfhead">
         </div>
         <div class="col-xs-12 lfbody">
            <div class="form-group">
               <div class="input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                  <input id="email" type="email" class="form-control" name="email" value="" tabindex="1" placeholder="Email Address">
               </div>
            </div>
            <div class="form-group">
               <div class="input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                  <input id="password" type="password" class="form-control" name="password" value="" tabindex="2" placeholder="Password">                    
               </div>
            </div>
         </div>
         <div class="col-xs-12 lffooter">
            <div class="col-xs-6">
               <div class="form-group text-left">
                  <input type="checkbox" tabindex="3" class="" name="remember" id="remember">
                  <label for="remember"> Remember Me</label>
               </div>
            </div>
            <div class="col-xs-6">
               <div class="form-group text-right">
                  <input type="submit" name="login-submit" tabindex="4" class="btn btn-primary" value="Login">
               </div>
            </div>
         </div>
      </form>
   </div>
   <div class="row lflinks">
      <div class="col-xs-6 text-left"><a href="">Register</a></div>
      <div class="col-xs-6 text-right"><a href="">Forgot password</a></div>
   </div>
</div>

Останалото форматиране си идва от Bootstrap 3.
Демо на страницата: BS3 Login Form
Download: bs3-login_form.zip

Макро на семенца от глухарче и водни капки

Gallery

This gallery contains 4 photos.

Фото експеримент с макро пръстени – 5cm. Тяло – Samsung NX3000 Обектив – Asahi Pentax M 1:1.7 50mm Бленда – 2.8-4.5 Адаптер за обектива – някакъв китайски PK-NX Постановка – на терасата с камъни и глухарчета, които домъкнахме с дъщеря … Continue reading

Банско 2017, хотел Регнум

Gallery

This gallery contains 60 photos.

Това лято през август посетихме Банско. И почивката ни съвпадна с Банско Джаз Фест. Банско + джаз = идеална комбинация! А за доброто ни настроение допълнително се погрижиха домакините от хотел Регнум – един наистина чудесен хотел с доста удобства, … Continue reading