├── README.md ├── css ├── bootstrap.css ├── ct-navbar.css └── pe-icon-7-stroke.css ├── fonts ├── FontAwesome.otf ├── Pe-icon-7-stroke.eot ├── Pe-icon-7-stroke.svg ├── Pe-icon-7-stroke.ttf ├── Pe-icon-7-stroke.woff ├── fontawesome-webfont.eot ├── fontawesome-webfont.svg ├── fontawesome-webfont.ttf └── fontawesome-webfont.woff ├── images └── bg.jpg ├── index.html └── js ├── bootstrap.js ├── ct-navbar.js └── jquery-1.10.2.js /README.md: -------------------------------------------------------------------------------- 1 | bootstrap-navbar-with-icons 2 | =========================== 3 | 4 | Boostrap navigation with icons 5 | 6 | More details here http://www.creative-tim.com/product/navbar-with-icons 7 | -------------------------------------------------------------------------------- /css/ct-navbar.css: -------------------------------------------------------------------------------- 1 | body{ 2 | 3 | } 4 | .form-control::-moz-placeholder{ 5 | color: #DDDDDD; 6 | opacity: 1; 7 | } 8 | .form-control:-moz-placeholder{ 9 | color: #DDDDDD; 10 | opacity: 1; 11 | } 12 | .form-control::-webkit-input-placeholder{ 13 | color: #DDDDDD; 14 | opacity: 1; 15 | } 16 | .form-control:-ms-input-placeholder{ 17 | color: #DDDDDD; 18 | opacity: 1; 19 | } 20 | /* General overwrite */ 21 | a{ 22 | color: #2C93FF; 23 | } 24 | a:hover, a:focus { 25 | color: #1084FF; 26 | } 27 | a:focus, a:active, 28 | button::-moz-focus-inner, 29 | input[type="reset"]::-moz-focus-inner, 30 | input[type="button"]::-moz-focus-inner, 31 | input[type="submit"]::-moz-focus-inner, 32 | select::-moz-focus-inner, 33 | input[type="file"] > input[type="button"]::-moz-focus-inner { 34 | outline : 0; 35 | } 36 | 37 | /* Font Smoothing */ 38 | 39 | h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .navbar, .brand{ 40 | -moz-osx-font-smoothing: grayscale; 41 | -webkit-font-smoothing: antialiased; 42 | } 43 | 44 | /* Typography */ 45 | 46 | h1, .h1, h2, .h2, h3, .h3, h4, .h4{ 47 | font-weight: 400; 48 | margin: 30px 0 15px; 49 | } 50 | 51 | h1, .h1 { 52 | font-size: 52px; 53 | } 54 | h2, .h2{ 55 | font-size: 36px; 56 | } 57 | h3, .h3{ 58 | font-size: 28px; 59 | margin: 20px 0 10px; 60 | } 61 | h4, .h4{ 62 | font-size: 22px; 63 | } 64 | h5, .h5 { 65 | font-size: 16px; 66 | } 67 | h6, .h6{ 68 | font-size: 14px; 69 | font-weight: bold; 70 | text-transform: uppercase; 71 | } 72 | p{ 73 | font-size: 16px; 74 | line-height: 1.6180em; 75 | } 76 | h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small { 77 | color: #999999; 78 | font-weight: 300; 79 | line-height: 1; 80 | } 81 | h1 small, h2 small, h3 small, h1 .small, h2 .small, h3 .small { 82 | font-size: 60%; 83 | } 84 | h1 .subtitle{ 85 | display: block; 86 | font-family: 'Grand Hotel',cursive; 87 | line-height: 40px; 88 | margin: 15px 0 30px; 89 | 90 | } 91 | 92 | 93 | /* Animations */ 94 | .form-control, .input-group-addon{ 95 | -webkit-transition: all 300ms linear; 96 | -moz-transition: all 300ms linear; 97 | -o-transition: all 300ms linear; 98 | -ms-transition: all 300ms linear; 99 | transition: all 300ms linear; 100 | } 101 | 102 | /* Inputs */ 103 | .form-control { 104 | background-color: #FFFFFF; 105 | border: 1px solid #E3E3E3; 106 | border-radius: 4px; 107 | box-shadow: none; 108 | color: #444444; 109 | height: 38px; 110 | padding: 6px 16px; 111 | } 112 | .form-control:focus { 113 | background-color: #FFFFFF; 114 | border: 1px solid #9A9A9A; 115 | box-shadow: none; 116 | outline: 0 none; 117 | } 118 | 119 | /* Navigation Bar */ 120 | .navbar{ 121 | border: 0 none; 122 | transition: all 0.4s; 123 | -webkit-transition: all 0.4s; 124 | font-size: 14px; 125 | } 126 | .navbar-default { 127 | background-color: #D9D9D9; 128 | 129 | } 130 | .navbar .navbar-brand { 131 | font-weight: 600; 132 | margin-top: 13px; 133 | margin-bottom: 13px; 134 | font-size: 20px; 135 | } 136 | .navbar-nav > li > a { 137 | margin: 6px 3px; 138 | padding: 6px 7px; 139 | text-align: center; 140 | min-width: 70px; 141 | } 142 | .navbar-nav > li > a [class^="fa"]{ 143 | font-size: 18px; 144 | } 145 | .navbar-brand{ 146 | padding: 20px 15px; 147 | } 148 | .navbar .navbar-nav [class^="pe"]{ 149 | font-size: 32px; 150 | position: relative; 151 | } 152 | .navbar .navbar-nav p{ 153 | margin: 5px 0 0; 154 | font-size: 14px; 155 | } 156 | .navbar .btn{ 157 | margin-top: 8px; 158 | margin-bottom: 8px; 159 | } 160 | .navbar-default:not(.navbar-transparent) { 161 | background-color: rgba(255, 255, 255, 0.96); 162 | border-bottom: 1px solid rgba(0, 0, 0, 0.1); 163 | } 164 | .navbar-transparent{ 165 | padding-top: 15px; 166 | background-color: rgba(0,0,0,.0); 167 | } 168 | .navbar-transparent .navbar-brand, [class*="navbar-ct"] .navbar-brand{ 169 | color: #FFFFFF; 170 | opacity: 0.95; 171 | } 172 | .navbar-transparent .navbar-brand:hover, .navbar-transparent .navbar-brand:focus { 173 | background-color: rgba(0, 0, 0, 0); 174 | color: #5E5E5E; 175 | } 176 | .navbar-transparent .nav .caret{ 177 | border-bottom-color: #FFFFFF; 178 | border-top-color: #FFFFFF; 179 | } 180 | .navbar-transparent .navbar-nav > li > a, [class*="navbar-ct"] .navbar-nav > li > a{ 181 | color: #FFFFFF; 182 | border-color: #FFFFFF; 183 | text-align: center; 184 | } 185 | .navbar-transparent .navbar-nav > li > a{ 186 | text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45); 187 | } 188 | 189 | .navbar-transparent .navbar-brand:hover, .navbar-transparent .navbar-brand:focus, [class*="navbar-ct"] .navbar-brand:hover, [class*="navbar-ct"] .navbar-brand:focus { 190 | background-color: rgba(0, 0, 0, 0); 191 | color: #FFFFFF; 192 | 193 | } 194 | .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { 195 | background-color: rgba(43, 43, 43, 0.1); 196 | border-radius: 4px; 197 | color: #555555; 198 | opacity: 1; 199 | } 200 | .navbar-default .navbar-nav > .dropdown > a:hover .caret, .navbar-default .navbar-nav > .dropdown > a:focus .caret { 201 | border-bottom-color: #2C93FF; 202 | border-top-color: #2C93FF; 203 | } 204 | .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus{ 205 | background-color: rgba(255, 255, 255, 0); 206 | color: #2C93FF; 207 | } 208 | .navbar-transparent .navbar-nav > .active > a, .navbar-transparent .navbar-nav > .active > a:hover, .navbar-transparent .navbar-nav > .active > a:focus, .navbar-transparent .navbar-nav > li > a:hover, .navbar-transparent .navbar-nav > li > a:focus, [class*="navbar-ct"] .navbar-nav > .active > a, [class*="navbar-ct"] .navbar-nav > .active > a:hover, [class*="navbar-ct"] .navbar-nav > .active > a:focus, [class*="navbar-ct"] .navbar-nav > li > a:hover, [class*="navbar-ct"] .navbar-nav > li > a:focus { 209 | background-color: rgba(255, 255, 255, 0.2); 210 | border-radius: 4px; 211 | color: #FFFFFF; 212 | opacity: 1; 213 | } 214 | .navbar-transparent .navbar-nav > .dropdown > a .caret, [class*="navbar-ct"] .navbar-nav > .dropdown > a .caret{ 215 | border-bottom-color: #FFFFFF; 216 | border-top-color: #FFFFFF; 217 | } 218 | .navbar-transparent .navbar-nav > .dropdown > a:hover .caret, .navbar-transparent .navbar-nav > .dropdown > a:focus .caret { 219 | border-bottom-color: #FFFFFF; 220 | border-top-color: #FFFFFF; 221 | } 222 | .navbar-transparent .navbar-nav > .open > a, .navbar-transparent .navbar-nav > .open > a:hover, .navbar-transparent .navbar-nav > .open > a:focus { 223 | background-color: rgba(255, 255, 255, 0); 224 | color: #FFFFFF; 225 | opacity: 1; 226 | } 227 | .navbar .label{ 228 | background-color: #FF4C40; 229 | position: absolute; 230 | right: -10px; 231 | top: 0px; 232 | font-size: 10px; 233 | font-family: "Helvetica Neue"; 234 | text-shadow: none; 235 | } 236 | [class*="navbar-ct"] .label{ 237 | background-color: #FFFFFF; 238 | color: #FF4C40; 239 | } 240 | .navbar-default:not(.navbar-transparent) .btn-default:hover{ 241 | color: #2C93FF; 242 | border-color: #2C93FF; 243 | } 244 | .navbar-transparent .btn-default, [class*="navbar-ct"] .btn-default{ 245 | color: #FFFFFF; 246 | border-color: #FFFFFF; 247 | } 248 | [class*="navbar-ct"] .btn-default.btn-fill{ 249 | color: #777777; 250 | background-color: #FFFFFF; 251 | opacity: 0.9; 252 | } 253 | [class*="navbar-ct"] .btn-default.btn-fill:hover, [class*="navbar-ct"] .btn-default.btn-fill:focus, [class*="navbar-ct"] .btn-default.btn-fill:active, [class*="navbar-ct"] .btn-default.btn-fill.active, [class*="navbar-ct"] .open .dropdown-toggle.btn-fill.btn-default{ 254 | border-color: #FFFFFF; 255 | opacity: 1; 256 | } 257 | .navbar-form{ 258 | box-shadow: none; 259 | } 260 | .navbar-form .form-control{ 261 | background-color: rgba(244, 244, 244, 0); 262 | border-radius: 0; 263 | border:0; 264 | height: 22px; 265 | padding: 0; 266 | font-size: 20px; 267 | line-height: 20px; 268 | color: #777777; 269 | } 270 | .navbar-transparent .navbar-form .form-control, [class*="navbar-ct"] .navbar-form .form-control{ 271 | color: #FFFFFF; 272 | border: 0; 273 | /* border-bottom: 1px solid rgba(255,255,255,.6); */ 274 | } 275 | .navbar:not(.navbar-transparent).navbar-ct-blue{ 276 | background-color: #34ACDC; 277 | background-color: rgba(52, 172, 220, 0.98); 278 | } 279 | .navbar:not(.navbar-transparent).navbar-ct-azzure{ 280 | background-color: #5BCAFF; 281 | background-color: rgba(91, 203, 255, 0.98); 282 | } 283 | .navbar:not(.navbar-transparent).navbar-ct-green{ 284 | background-color: #4cd964; 285 | background-color: rgba(76, 217, 98, 0.98); 286 | } 287 | .navbar:not(.navbar-transparent).navbar-ct-orange{ 288 | background-color: #FF9500; 289 | background-color: rgba(255, 152, 0, 0.97); 290 | } 291 | .navbar:not(.navbar-transparent).navbar-ct-red{ 292 | background-color: #FF4C40; 293 | background-color: rgba(255, 76, 64, 0.98); 294 | } 295 | 296 | .dropdown-menu > li > a { 297 | padding: 8px 20px; 298 | color: #333333; 299 | } 300 | .dropdown-menu > li:first-child > a{ 301 | border-radius: 10px 10px 0 0; 302 | } 303 | .dropdown-menu > li:last-child > a{ 304 | border-bottom: 0 none; 305 | border-radius: 0 0 10px 10px; 306 | } 307 | .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { 308 | background-color: #F5F5F5; 309 | color: #333333; 310 | opacity: 1; 311 | text-decoration: none; 312 | } 313 | .navbar-toggle{ 314 | margin-bottom: 27px; 315 | margin-top: 27px; 316 | border: 0; 317 | } 318 | .navbar-toggle .icon-bar { 319 | background-color: #FFFFFF; 320 | } 321 | .navbar-collapse, .navbar-form { 322 | border-color: rgba(0, 0, 0, 0); 323 | } 324 | .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { 325 | background-color: rgba(0,0,0,0); 326 | } 327 | .navbar-brand-logo{ 328 | padding: 0; 329 | } 330 | .navbar-brand-logo .logo{ 331 | border: 1px solid #333333; 332 | border-radius: 50%; 333 | float: left; 334 | overflow: hidden; 335 | width: 60px; 336 | } 337 | .navbar .navbar-brand-logo .brand{ 338 | color: #FFFFFF; 339 | float: left; 340 | font-size: 18px; 341 | font-weight: 400; 342 | line-height: 20px; 343 | margin-left: 10px; 344 | margin-top: 10px; 345 | width: 60px; 346 | } 347 | .navbar-default .navbar-brand-logo .brand{ 348 | color: #555; 349 | } 350 | @media (min-width: 768px){ 351 | .navbar-form { 352 | margin-bottom: 31px; 353 | margin-top: 31px; 354 | padding-left: 5px; 355 | padding-right: 5px; 356 | } 357 | .navbar-search-form{ 358 | display: none; 359 | } 360 | .navbar-nav > li > .dropdown-menu, .dropdown-menu{ 361 | display: block; 362 | margin: 0 -60% 0; 363 | padding: 0; 364 | z-index: 9000; 365 | position: absolute; 366 | -webkit-border-radius: 10px; 367 | box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125); 368 | border-radius: 10px; 369 | -webkit-box-sizing: border-box; 370 | -moz-box-sizing: border-box; 371 | box-sizing: border-box; 372 | opacity: 0; 373 | -ms-filter: "alpha(opacity=0)"; 374 | -webkit-filter: alpha(opacity=0); 375 | -moz-filter: alpha(opacity=0); 376 | -ms-filter: alpha(opacity=0); 377 | -o-filter: alpha(opacity=0); 378 | filter: alpha(opacity=0); 379 | -webkit-transform: scale(0); 380 | -moz-transform: scale(0); 381 | -o-transform: scale(0); 382 | -ms-transform: scale(0); 383 | transform: scale(0); 384 | -webkit-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1); 385 | -moz-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1); 386 | -o-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1); 387 | -ms-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1); 388 | transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1); 389 | 390 | } 391 | .navbar-nav > li.open > .dropdown-menu, .open .dropdown-menu{ 392 | -webkit-transform-origin: 29px -50px; 393 | -moz-transform-origin: 29px -50px; 394 | -o-transform-origin: 29px -50px; 395 | -ms-transform-origin: 29px -50px; 396 | transform-origin: 29px -50px; 397 | -webkit-transform: scale(1); 398 | -moz-transform: scale(1); 399 | -o-transform: scale(1); 400 | -ms-transform: scale(1); 401 | transform: scale(1); 402 | opacity: 1; 403 | -ms-filter: none; 404 | -webkit-filter: none; 405 | -moz-filter: none; 406 | -ms-filter: none; 407 | -o-filter: none; 408 | filter: none; 409 | } 410 | .dropdown-menu:before{ 411 | border-bottom: 11px solid rgba(0, 0, 0, 0.2); 412 | border-left: 11px solid rgba(0, 0, 0, 0); 413 | border-right: 11px solid rgba(0, 0, 0, 0); 414 | content: ""; 415 | display: inline-block; 416 | position: absolute; 417 | left: 100%; 418 | margin-left: -60%; 419 | top: -11px; 420 | } 421 | .dropdown-menu:after { 422 | border-bottom: 11px solid #FFFFFF; 423 | border-left: 11px solid rgba(0, 0, 0, 0); 424 | border-right: 11px solid rgba(0, 0, 0, 0); 425 | content: ""; 426 | display: inline-block; 427 | position: absolute; 428 | left: 100%; 429 | margin-left: -60%; 430 | top: -10px; 431 | } 432 | } 433 | 434 | @media (max-width: 768px){ 435 | .navbar-transparent{ 436 | padding-top: 15px; 437 | background-color: rgba(0, 0, 0, 0.45); 438 | } 439 | .navbar-transparent .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-transparent .navbar-nav .open .dropdown-menu > li > a:focus, .navbar-transparent .dropdown-menu > li > a:hover, .navbar-transparent .dropdown-menu > li > a:focus, [class*="navbar-ct"] .dropdown-menu > li > a:hover, [class*="navbar-ct"] .dropdown-menu > li > a:focus{ 440 | color: #FFFFFF; 441 | background-color: rgba(0,0,0,0); 442 | opacity: 1; 443 | } 444 | .navbar-transparent .navbar-nav .open .dropdown-menu > li > a, [class*="navbar-ct"] .dropdown-menu > li > a { 445 | color: #FFFFFF; 446 | opacity: 0.8; 447 | } 448 | .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { 449 | background-color: rgba(0,0,0,0); 450 | border-color: #428BCA; 451 | } 452 | .navbar-collapse{ 453 | text-align: center; 454 | } 455 | .navbar-collapse .navbar-form { 456 | width: 170px; 457 | margin: 0 auto; 458 | } 459 | 460 | } 461 | 462 | 463 | .blurred-container{ 464 | position:relative; 465 | width:100%; 466 | height:540px; 467 | top:0; 468 | left:0; 469 | } 470 | .blurred-container > .img-src{ 471 | position:fixed; 472 | width:100%; 473 | height:540px; 474 | background-repeat:no-repeat; 475 | background-size:cover; 476 | background-position: center center; 477 | } 478 | .blur{ 479 | opacity:0; 480 | } 481 | 482 | @media (max-width: 991px){ 483 | .img-src{ 484 | /* 485 | background-size: 100%; 486 | background-position: top; 487 | */ 488 | } 489 | } 490 | .main{ 491 | background-color: #FFFFFF; 492 | position: relative; 493 | } 494 | h4{ 495 | line-height: 1.4em; 496 | } 497 | .space-200{ 498 | height: 200px; 499 | 500 | } 501 | 502 | -------------------------------------------------------------------------------- /css/pe-icon-7-stroke.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Pe-icon-7-stroke'; 3 | src:url('../fonts/Pe-icon-7-stroke.eot?-2irksn'); 4 | src:url('../fonts/Pe-icon-7-stroke.eot?#iefix-2irksn') format('embedded-opentype'), 5 | url('../fonts/Pe-icon-7-stroke.woff?-2irksn') format('woff'), 6 | url('../fonts/Pe-icon-7-stroke.ttf?-2irksn') format('truetype'), 7 | url('../fonts/Pe-icon-7-stroke.svg?-2irksn#Pe-icon-7-stroke') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | [class^="pe-7s-"], [class*=" pe-7s-"] { 13 | display: inline-block; 14 | font-family: 'Pe-icon-7-stroke'; 15 | speak: none; 16 | font-style: normal; 17 | font-weight: normal; 18 | font-variant: normal; 19 | text-transform: none; 20 | line-height: 1; 21 | 22 | /* Better Font Rendering =========== */ 23 | -webkit-font-smoothing: antialiased; 24 | -moz-osx-font-smoothing: grayscale; 25 | } 26 | 27 | .pe-7s-cloud-upload:before { 28 | content: "\e68a"; 29 | } 30 | .pe-7s-cash:before { 31 | content: "\e68c"; 32 | } 33 | .pe-7s-close:before { 34 | content: "\e680"; 35 | } 36 | .pe-7s-bluetooth:before { 37 | content: "\e68d"; 38 | } 39 | .pe-7s-cloud-download:before { 40 | content: "\e68b"; 41 | } 42 | .pe-7s-way:before { 43 | content: "\e68e"; 44 | } 45 | .pe-7s-close-circle:before { 46 | content: "\e681"; 47 | } 48 | .pe-7s-id:before { 49 | content: "\e68f"; 50 | } 51 | .pe-7s-angle-up:before { 52 | content: "\e682"; 53 | } 54 | .pe-7s-wristwatch:before { 55 | content: "\e690"; 56 | } 57 | .pe-7s-angle-up-circle:before { 58 | content: "\e683"; 59 | } 60 | .pe-7s-world:before { 61 | content: "\e691"; 62 | } 63 | .pe-7s-angle-right:before { 64 | content: "\e684"; 65 | } 66 | .pe-7s-volume:before { 67 | content: "\e692"; 68 | } 69 | .pe-7s-angle-right-circle:before { 70 | content: "\e685"; 71 | } 72 | .pe-7s-users:before { 73 | content: "\e693"; 74 | } 75 | .pe-7s-angle-left:before { 76 | content: "\e686"; 77 | } 78 | .pe-7s-user-female:before { 79 | content: "\e694"; 80 | } 81 | .pe-7s-angle-left-circle:before { 82 | content: "\e687"; 83 | } 84 | .pe-7s-up-arrow:before { 85 | content: "\e695"; 86 | } 87 | .pe-7s-angle-down:before { 88 | content: "\e688"; 89 | } 90 | .pe-7s-switch:before { 91 | content: "\e696"; 92 | } 93 | .pe-7s-angle-down-circle:before { 94 | content: "\e689"; 95 | } 96 | .pe-7s-scissors:before { 97 | content: "\e697"; 98 | } 99 | .pe-7s-wallet:before { 100 | content: "\e600"; 101 | } 102 | .pe-7s-safe:before { 103 | content: "\e698"; 104 | } 105 | .pe-7s-volume2:before { 106 | content: "\e601"; 107 | } 108 | .pe-7s-volume1:before { 109 | content: "\e602"; 110 | } 111 | .pe-7s-voicemail:before { 112 | content: "\e603"; 113 | } 114 | .pe-7s-video:before { 115 | content: "\e604"; 116 | } 117 | .pe-7s-user:before { 118 | content: "\e605"; 119 | } 120 | .pe-7s-upload:before { 121 | content: "\e606"; 122 | } 123 | .pe-7s-unlock:before { 124 | content: "\e607"; 125 | } 126 | .pe-7s-umbrella:before { 127 | content: "\e608"; 128 | } 129 | .pe-7s-trash:before { 130 | content: "\e609"; 131 | } 132 | .pe-7s-tools:before { 133 | content: "\e60a"; 134 | } 135 | .pe-7s-timer:before { 136 | content: "\e60b"; 137 | } 138 | .pe-7s-ticket:before { 139 | content: "\e60c"; 140 | } 141 | .pe-7s-target:before { 142 | content: "\e60d"; 143 | } 144 | .pe-7s-sun:before { 145 | content: "\e60e"; 146 | } 147 | .pe-7s-study:before { 148 | content: "\e60f"; 149 | } 150 | .pe-7s-stopwatch:before { 151 | content: "\e610"; 152 | } 153 | .pe-7s-star:before { 154 | content: "\e611"; 155 | } 156 | .pe-7s-speaker:before { 157 | content: "\e612"; 158 | } 159 | .pe-7s-signal:before { 160 | content: "\e613"; 161 | } 162 | .pe-7s-shuffle:before { 163 | content: "\e614"; 164 | } 165 | .pe-7s-shopbag:before { 166 | content: "\e615"; 167 | } 168 | .pe-7s-share:before { 169 | content: "\e616"; 170 | } 171 | .pe-7s-server:before { 172 | content: "\e617"; 173 | } 174 | .pe-7s-search:before { 175 | content: "\e618"; 176 | } 177 | .pe-7s-film:before { 178 | content: "\e6a5"; 179 | } 180 | .pe-7s-science:before { 181 | content: "\e619"; 182 | } 183 | .pe-7s-disk:before { 184 | content: "\e6a6"; 185 | } 186 | .pe-7s-ribbon:before { 187 | content: "\e61a"; 188 | } 189 | .pe-7s-repeat:before { 190 | content: "\e61b"; 191 | } 192 | .pe-7s-refresh:before { 193 | content: "\e61c"; 194 | } 195 | .pe-7s-add-user:before { 196 | content: "\e6a9"; 197 | } 198 | .pe-7s-refresh-cloud:before { 199 | content: "\e61d"; 200 | } 201 | .pe-7s-paperclip:before { 202 | content: "\e69c"; 203 | } 204 | .pe-7s-radio:before { 205 | content: "\e61e"; 206 | } 207 | .pe-7s-note2:before { 208 | content: "\e69d"; 209 | } 210 | .pe-7s-print:before { 211 | content: "\e61f"; 212 | } 213 | .pe-7s-network:before { 214 | content: "\e69e"; 215 | } 216 | .pe-7s-prev:before { 217 | content: "\e620"; 218 | } 219 | .pe-7s-mute:before { 220 | content: "\e69f"; 221 | } 222 | .pe-7s-power:before { 223 | content: "\e621"; 224 | } 225 | .pe-7s-medal:before { 226 | content: "\e6a0"; 227 | } 228 | .pe-7s-portfolio:before { 229 | content: "\e622"; 230 | } 231 | .pe-7s-like2:before { 232 | content: "\e6a1"; 233 | } 234 | .pe-7s-plus:before { 235 | content: "\e623"; 236 | } 237 | .pe-7s-left-arrow:before { 238 | content: "\e6a2"; 239 | } 240 | .pe-7s-play:before { 241 | content: "\e624"; 242 | } 243 | .pe-7s-key:before { 244 | content: "\e6a3"; 245 | } 246 | .pe-7s-plane:before { 247 | content: "\e625"; 248 | } 249 | .pe-7s-joy:before { 250 | content: "\e6a4"; 251 | } 252 | .pe-7s-photo-gallery:before { 253 | content: "\e626"; 254 | } 255 | .pe-7s-pin:before { 256 | content: "\e69b"; 257 | } 258 | .pe-7s-phone:before { 259 | content: "\e627"; 260 | } 261 | .pe-7s-plug:before { 262 | content: "\e69a"; 263 | } 264 | .pe-7s-pen:before { 265 | content: "\e628"; 266 | } 267 | .pe-7s-right-arrow:before { 268 | content: "\e699"; 269 | } 270 | .pe-7s-paper-plane:before { 271 | content: "\e629"; 272 | } 273 | .pe-7s-delete-user:before { 274 | content: "\e6a7"; 275 | } 276 | .pe-7s-paint:before { 277 | content: "\e62a"; 278 | } 279 | .pe-7s-bottom-arrow:before { 280 | content: "\e6a8"; 281 | } 282 | .pe-7s-notebook:before { 283 | content: "\e62b"; 284 | } 285 | .pe-7s-note:before { 286 | content: "\e62c"; 287 | } 288 | .pe-7s-next:before { 289 | content: "\e62d"; 290 | } 291 | .pe-7s-news-paper:before { 292 | content: "\e62e"; 293 | } 294 | .pe-7s-musiclist:before { 295 | content: "\e62f"; 296 | } 297 | .pe-7s-music:before { 298 | content: "\e630"; 299 | } 300 | .pe-7s-mouse:before { 301 | content: "\e631"; 302 | } 303 | .pe-7s-more:before { 304 | content: "\e632"; 305 | } 306 | .pe-7s-moon:before { 307 | content: "\e633"; 308 | } 309 | .pe-7s-monitor:before { 310 | content: "\e634"; 311 | } 312 | .pe-7s-micro:before { 313 | content: "\e635"; 314 | } 315 | .pe-7s-menu:before { 316 | content: "\e636"; 317 | } 318 | .pe-7s-map:before { 319 | content: "\e637"; 320 | } 321 | .pe-7s-map-marker:before { 322 | content: "\e638"; 323 | } 324 | .pe-7s-mail:before { 325 | content: "\e639"; 326 | } 327 | .pe-7s-mail-open:before { 328 | content: "\e63a"; 329 | } 330 | .pe-7s-mail-open-file:before { 331 | content: "\e63b"; 332 | } 333 | .pe-7s-magnet:before { 334 | content: "\e63c"; 335 | } 336 | .pe-7s-loop:before { 337 | content: "\e63d"; 338 | } 339 | .pe-7s-look:before { 340 | content: "\e63e"; 341 | } 342 | .pe-7s-lock:before { 343 | content: "\e63f"; 344 | } 345 | .pe-7s-lintern:before { 346 | content: "\e640"; 347 | } 348 | .pe-7s-link:before { 349 | content: "\e641"; 350 | } 351 | .pe-7s-like:before { 352 | content: "\e642"; 353 | } 354 | .pe-7s-light:before { 355 | content: "\e643"; 356 | } 357 | .pe-7s-less:before { 358 | content: "\e644"; 359 | } 360 | .pe-7s-keypad:before { 361 | content: "\e645"; 362 | } 363 | .pe-7s-junk:before { 364 | content: "\e646"; 365 | } 366 | .pe-7s-info:before { 367 | content: "\e647"; 368 | } 369 | .pe-7s-home:before { 370 | content: "\e648"; 371 | } 372 | .pe-7s-help2:before { 373 | content: "\e649"; 374 | } 375 | .pe-7s-help1:before { 376 | content: "\e64a"; 377 | } 378 | .pe-7s-graph3:before { 379 | content: "\e64b"; 380 | } 381 | .pe-7s-graph2:before { 382 | content: "\e64c"; 383 | } 384 | .pe-7s-graph1:before { 385 | content: "\e64d"; 386 | } 387 | .pe-7s-graph:before { 388 | content: "\e64e"; 389 | } 390 | .pe-7s-global:before { 391 | content: "\e64f"; 392 | } 393 | .pe-7s-gleam:before { 394 | content: "\e650"; 395 | } 396 | .pe-7s-glasses:before { 397 | content: "\e651"; 398 | } 399 | .pe-7s-gift:before { 400 | content: "\e652"; 401 | } 402 | .pe-7s-folder:before { 403 | content: "\e653"; 404 | } 405 | .pe-7s-flag:before { 406 | content: "\e654"; 407 | } 408 | .pe-7s-filter:before { 409 | content: "\e655"; 410 | } 411 | .pe-7s-file:before { 412 | content: "\e656"; 413 | } 414 | .pe-7s-expand1:before { 415 | content: "\e657"; 416 | } 417 | .pe-7s-exapnd2:before { 418 | content: "\e658"; 419 | } 420 | .pe-7s-edit:before { 421 | content: "\e659"; 422 | } 423 | .pe-7s-drop:before { 424 | content: "\e65a"; 425 | } 426 | .pe-7s-drawer:before { 427 | content: "\e65b"; 428 | } 429 | .pe-7s-download:before { 430 | content: "\e65c"; 431 | } 432 | .pe-7s-display2:before { 433 | content: "\e65d"; 434 | } 435 | .pe-7s-display1:before { 436 | content: "\e65e"; 437 | } 438 | .pe-7s-diskette:before { 439 | content: "\e65f"; 440 | } 441 | .pe-7s-date:before { 442 | content: "\e660"; 443 | } 444 | .pe-7s-cup:before { 445 | content: "\e661"; 446 | } 447 | .pe-7s-culture:before { 448 | content: "\e662"; 449 | } 450 | .pe-7s-crop:before { 451 | content: "\e663"; 452 | } 453 | .pe-7s-credit:before { 454 | content: "\e664"; 455 | } 456 | .pe-7s-copy-file:before { 457 | content: "\e665"; 458 | } 459 | .pe-7s-config:before { 460 | content: "\e666"; 461 | } 462 | .pe-7s-compass:before { 463 | content: "\e667"; 464 | } 465 | .pe-7s-comment:before { 466 | content: "\e668"; 467 | } 468 | .pe-7s-coffee:before { 469 | content: "\e669"; 470 | } 471 | .pe-7s-cloud:before { 472 | content: "\e66a"; 473 | } 474 | .pe-7s-clock:before { 475 | content: "\e66b"; 476 | } 477 | .pe-7s-check:before { 478 | content: "\e66c"; 479 | } 480 | .pe-7s-chat:before { 481 | content: "\e66d"; 482 | } 483 | .pe-7s-cart:before { 484 | content: "\e66e"; 485 | } 486 | .pe-7s-camera:before { 487 | content: "\e66f"; 488 | } 489 | .pe-7s-call:before { 490 | content: "\e670"; 491 | } 492 | .pe-7s-calculator:before { 493 | content: "\e671"; 494 | } 495 | .pe-7s-browser:before { 496 | content: "\e672"; 497 | } 498 | .pe-7s-box2:before { 499 | content: "\e673"; 500 | } 501 | .pe-7s-box1:before { 502 | content: "\e674"; 503 | } 504 | .pe-7s-bookmarks:before { 505 | content: "\e675"; 506 | } 507 | .pe-7s-bicycle:before { 508 | content: "\e676"; 509 | } 510 | .pe-7s-bell:before { 511 | content: "\e677"; 512 | } 513 | .pe-7s-battery:before { 514 | content: "\e678"; 515 | } 516 | .pe-7s-ball:before { 517 | content: "\e679"; 518 | } 519 | .pe-7s-back:before { 520 | content: "\e67a"; 521 | } 522 | .pe-7s-attention:before { 523 | content: "\e67b"; 524 | } 525 | .pe-7s-anchor:before { 526 | content: "\e67c"; 527 | } 528 | .pe-7s-albums:before { 529 | content: "\e67d"; 530 | } 531 | .pe-7s-alarm:before { 532 | content: "\e67e"; 533 | } 534 | .pe-7s-airplay:before { 535 | content: "\e67f"; 536 | } 537 | -------------------------------------------------------------------------------- /fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timcreative/bootstrap-navbar-with-icons/2122f5fb59194e03844d476579c7f852387f371b/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /fonts/Pe-icon-7-stroke.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timcreative/bootstrap-navbar-with-icons/2122f5fb59194e03844d476579c7f852387f371b/fonts/Pe-icon-7-stroke.eot -------------------------------------------------------------------------------- /fonts/Pe-icon-7-stroke.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timcreative/bootstrap-navbar-with-icons/2122f5fb59194e03844d476579c7f852387f371b/fonts/Pe-icon-7-stroke.ttf -------------------------------------------------------------------------------- /fonts/Pe-icon-7-stroke.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timcreative/bootstrap-navbar-with-icons/2122f5fb59194e03844d476579c7f852387f371b/fonts/Pe-icon-7-stroke.woff -------------------------------------------------------------------------------- /fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timcreative/bootstrap-navbar-with-icons/2122f5fb59194e03844d476579c7f852387f371b/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timcreative/bootstrap-navbar-with-icons/2122f5fb59194e03844d476579c7f852387f371b/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timcreative/bootstrap-navbar-with-icons/2122f5fb59194e03844d476579c7f852387f371b/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timcreative/bootstrap-navbar-with-icons/2122f5fb59194e03844d476579c7f852387f371b/images/bg.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 47 | 48 | 49 | 50 | 121 | 122 |
123 |
124 |

Bootstrap Navigation Bar
With IconsThis item was made because of many requests of the users who
downloaded Get Shit Done Kit.
125 |

126 |
127 |
128 |

129 | We restyled the classic Bootstrap Navbar and we added brand new icons. If you want to add icons to the regular navbar you have to add to your project these files: 130 |

131 |
132 |         
133 | <link href="css/bootstrap.css" rel="stylesheet" /> 134 | <link href="css/pe-icon-7-stroke.css" rel="stylesheet" /> 135 | <link href="css/ct-navbar.css" rel="stylesheet" /> 136 | 137 | <script src="js/jquery-1.10.2.js"></script> 138 | <script src="js/bootstrap.js"></script> 139 | <script src="js/ct-navbar.js"></script> 140 |
141 |

Important

Don't forget to add the font files('Pe-icon7-stroke.eot','Pe-icon-7-stroke.svg','Pe-icon-7-stroke.ttf','Pe-icon-7-stroke.woff') in "/Fonts/"
142 |

If you want to add the new icons to the navbar just change this code from your navbar: 143 |
144 |             
145 | <li><a href="#">Account</a></li> 146 |
147 | 148 |

149 | With this one: 150 |

151 |
152 |          
153 | <li> 154 | <a href="#"> 155 | <i class="pe-7s-user"></i> 156 | <p>Account</p> 157 | </a> 158 | </li> 159 |
160 | 161 |

If you want to add a small badge, like the one that we have in our current navbar at "Messages" button, add this code:

162 |
163 |          
164 | <li> 165 | <a href="#"> 166 | <i class="pe-7s-user"> 167 | <span class="label"> 23 </span> 168 | </i> 169 | <p>Account</p> 170 | </a> 171 | </li> 172 |
173 |

174 | 175 | Besides the default navbar, we added 5 new colors: blue, azzure, green, orange, red. If you want to use one of them, you have to replace the 'navbar-default' with the class for the chosen color 'navbr-ct-{color}'. 176 |

177 | 178 | 179 | 180 | 222 | 223 | 224 | 267 | 268 | 269 | 312 | 313 | 314 | 357 | 358 | 359 | 360 | 403 | 404 |

Here is a full example of the blue navbar

405 |
406 |     <nav class="navbar navbar-ct-blue navbar-fixed-top navbar-transparent" role="navigation">
407 |       <div class="container">
408 |         <div class="navbar-header">
409 |           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
410 |             <span class="sr-only">Toggle navigation</span>
411 |             <span class="icon-bar"></span>
412 |             <span class="icon-bar"></span>
413 |             <span class="icon-bar"></span>
414 |           </button>
415 |           <a class="navbar-brand navbar-brand-logo" href="http://www.creative-tim.com">
416 |                 <div class="logo">
417 |                     <img src="https://s3.amazonaws.com/creativetim_bucket/new_logo.png">
418 |                 </div>
419 |                 <div class="brand"> Creative Tim </div>
420 |               </a>
421 |         </div>
422 |         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
423 |           <ul class="nav navbar-nav navbar-right">
424 |                     <li>
425 |                         <a href="javascript:void(0)" data-toggle="search">
426 |                             <i class="pe-7s-search"></i>
427 |                             <p>Search</p>
428 |                         </a>
429 |                     </li>
430 |                     <li>
431 |                         <a href="#">
432 |                             <i class="pe-7s-mail">
433 |                                 <span class="label"> 23 </span>  
434 |                             </i>
435 |                             <p>Messages</p>
436 |                         </a>
437 |                     </li>
438 |             <li class="dropdown">
439 |               <a href="#" class="dropdown-toggle" data-toggle="dropdown">
440 |                         <i class="pe-7s-user"></i>
441 |                         <p>Account</p>
442 |               </a>
443 |               <ul class="dropdown-menu">
444 |                 <li><a href="#">Action</a></li>
445 |                 <li><a href="#">Another action</a></li>
446 |                 <li><a href="#">Something else here</a></li>
447 |                 <li class="divider"></li>
448 |                 <li><a href="#">Separated link</a></li>
449 |               </ul>
450 |             </li>
451 |           </ul>
452 |         </div><!-- /.navbar-collapse -->
453 |       </div><!-- /.container-fluid -->
454 |     </nav>
455 | <!--  end navbar --> 
456 | 
457 | 458 | 459 |
460 |

Many thanks to our friends from Pixeden for the icons font. More details about the icons names can be found here. 461 |

462 |

Get more useful items for bootstrap on Creative Tim

463 |
464 |
465 |
466 |
467 |
468 | Download 469 |
470 |
471 |
472 |
473 |

Copyright © 2014 Creative Tim, made with for a better web.

474 | 475 |
476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | -------------------------------------------------------------------------------- /js/bootstrap.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap v3.0.2 by @fat and @mdo 3 | * Copyright 2013 Twitter, Inc. 4 | * Licensed under http://www.apache.org/licenses/LICENSE-2.0 5 | * 6 | * Designed and built with all the love in the world by @mdo and @fat. 7 | */ 8 | 9 | if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery") } 10 | 11 | /* ======================================================================== 12 | * Bootstrap: transition.js v3.0.2 13 | * http://getbootstrap.com/javascript/#transitions 14 | * ======================================================================== 15 | * Copyright 2013 Twitter, Inc. 16 | * 17 | * Licensed under the Apache License, Version 2.0 (the "License"); 18 | * you may not use this file except in compliance with the License. 19 | * You may obtain a copy of the License at 20 | * 21 | * http://www.apache.org/licenses/LICENSE-2.0 22 | * 23 | * Unless required by applicable law or agreed to in writing, software 24 | * distributed under the License is distributed on an "AS IS" BASIS, 25 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 26 | * See the License for the specific language governing permissions and 27 | * limitations under the License. 28 | * ======================================================================== */ 29 | 30 | 31 | +function ($) { "use strict"; 32 | 33 | // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/) 34 | // ============================================================ 35 | 36 | function transitionEnd() { 37 | var el = document.createElement('bootstrap') 38 | 39 | var transEndEventNames = { 40 | 'WebkitTransition' : 'webkitTransitionEnd' 41 | , 'MozTransition' : 'transitionend' 42 | , 'OTransition' : 'oTransitionEnd otransitionend' 43 | , 'transition' : 'transitionend' 44 | } 45 | 46 | for (var name in transEndEventNames) { 47 | if (el.style[name] !== undefined) { 48 | return { end: transEndEventNames[name] } 49 | } 50 | } 51 | } 52 | 53 | // http://blog.alexmaccaw.com/css-transitions 54 | $.fn.emulateTransitionEnd = function (duration) { 55 | var called = false, $el = this 56 | $(this).one($.support.transition.end, function () { called = true }) 57 | var callback = function () { if (!called) $($el).trigger($.support.transition.end) } 58 | setTimeout(callback, duration) 59 | return this 60 | } 61 | 62 | $(function () { 63 | $.support.transition = transitionEnd() 64 | }) 65 | 66 | }(jQuery); 67 | 68 | /* ======================================================================== 69 | * Bootstrap: alert.js v3.0.2 70 | * http://getbootstrap.com/javascript/#alerts 71 | * ======================================================================== 72 | * Copyright 2013 Twitter, Inc. 73 | * 74 | * Licensed under the Apache License, Version 2.0 (the "License"); 75 | * you may not use this file except in compliance with the License. 76 | * You may obtain a copy of the License at 77 | * 78 | * http://www.apache.org/licenses/LICENSE-2.0 79 | * 80 | * Unless required by applicable law or agreed to in writing, software 81 | * distributed under the License is distributed on an "AS IS" BASIS, 82 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 83 | * See the License for the specific language governing permissions and 84 | * limitations under the License. 85 | * ======================================================================== */ 86 | 87 | 88 | +function ($) { "use strict"; 89 | 90 | // ALERT CLASS DEFINITION 91 | // ====================== 92 | 93 | var dismiss = '[data-dismiss="alert"]' 94 | var Alert = function (el) { 95 | $(el).on('click', dismiss, this.close) 96 | } 97 | 98 | Alert.prototype.close = function (e) { 99 | var $this = $(this) 100 | var selector = $this.attr('data-target') 101 | 102 | if (!selector) { 103 | selector = $this.attr('href') 104 | selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7 105 | } 106 | 107 | var $parent = $(selector) 108 | 109 | if (e) e.preventDefault() 110 | 111 | if (!$parent.length) { 112 | $parent = $this.hasClass('alert') ? $this : $this.parent() 113 | } 114 | 115 | $parent.trigger(e = $.Event('close.bs.alert')) 116 | 117 | if (e.isDefaultPrevented()) return 118 | 119 | $parent.removeClass('in') 120 | 121 | function removeElement() { 122 | $parent.trigger('closed.bs.alert').remove() 123 | } 124 | 125 | $.support.transition && $parent.hasClass('fade') ? 126 | $parent 127 | .one($.support.transition.end, removeElement) 128 | .emulateTransitionEnd(150) : 129 | removeElement() 130 | } 131 | 132 | 133 | // ALERT PLUGIN DEFINITION 134 | // ======================= 135 | 136 | var old = $.fn.alert 137 | 138 | $.fn.alert = function (option) { 139 | return this.each(function () { 140 | var $this = $(this) 141 | var data = $this.data('bs.alert') 142 | 143 | if (!data) $this.data('bs.alert', (data = new Alert(this))) 144 | if (typeof option == 'string') data[option].call($this) 145 | }) 146 | } 147 | 148 | $.fn.alert.Constructor = Alert 149 | 150 | 151 | // ALERT NO CONFLICT 152 | // ================= 153 | 154 | $.fn.alert.noConflict = function () { 155 | $.fn.alert = old 156 | return this 157 | } 158 | 159 | 160 | // ALERT DATA-API 161 | // ============== 162 | 163 | $(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close) 164 | 165 | }(jQuery); 166 | 167 | /* ======================================================================== 168 | * Bootstrap: button.js v3.0.2 169 | * http://getbootstrap.com/javascript/#buttons 170 | * ======================================================================== 171 | * Copyright 2013 Twitter, Inc. 172 | * 173 | * Licensed under the Apache License, Version 2.0 (the "License"); 174 | * you may not use this file except in compliance with the License. 175 | * You may obtain a copy of the License at 176 | * 177 | * http://www.apache.org/licenses/LICENSE-2.0 178 | * 179 | * Unless required by applicable law or agreed to in writing, software 180 | * distributed under the License is distributed on an "AS IS" BASIS, 181 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 182 | * See the License for the specific language governing permissions and 183 | * limitations under the License. 184 | * ======================================================================== */ 185 | 186 | 187 | +function ($) { "use strict"; 188 | 189 | // BUTTON PUBLIC CLASS DEFINITION 190 | // ============================== 191 | 192 | var Button = function (element, options) { 193 | this.$element = $(element) 194 | this.options = $.extend({}, Button.DEFAULTS, options) 195 | } 196 | 197 | Button.DEFAULTS = { 198 | loadingText: 'loading...' 199 | } 200 | 201 | Button.prototype.setState = function (state) { 202 | var d = 'disabled' 203 | var $el = this.$element 204 | var val = $el.is('input') ? 'val' : 'html' 205 | var data = $el.data() 206 | 207 | state = state + 'Text' 208 | 209 | if (!data.resetText) $el.data('resetText', $el[val]()) 210 | 211 | $el[val](data[state] || this.options[state]) 212 | 213 | // push to event loop to allow forms to submit 214 | setTimeout(function () { 215 | state == 'loadingText' ? 216 | $el.addClass(d).attr(d, d) : 217 | $el.removeClass(d).removeAttr(d); 218 | }, 0) 219 | } 220 | 221 | Button.prototype.toggle = function () { 222 | var $parent = this.$element.closest('[data-toggle="buttons"]') 223 | 224 | if ($parent.length) { 225 | var $input = this.$element.find('input') 226 | .prop('checked', !this.$element.hasClass('active')) 227 | .trigger('change') 228 | if ($input.prop('type') === 'radio') $parent.find('.active').removeClass('active') 229 | } 230 | 231 | this.$element.toggleClass('active') 232 | } 233 | 234 | 235 | // BUTTON PLUGIN DEFINITION 236 | // ======================== 237 | 238 | var old = $.fn.button 239 | 240 | $.fn.button = function (option) { 241 | return this.each(function () { 242 | var $this = $(this) 243 | var data = $this.data('bs.button') 244 | var options = typeof option == 'object' && option 245 | 246 | if (!data) $this.data('bs.button', (data = new Button(this, options))) 247 | 248 | if (option == 'toggle') data.toggle() 249 | else if (option) data.setState(option) 250 | }) 251 | } 252 | 253 | $.fn.button.Constructor = Button 254 | 255 | 256 | // BUTTON NO CONFLICT 257 | // ================== 258 | 259 | $.fn.button.noConflict = function () { 260 | $.fn.button = old 261 | return this 262 | } 263 | 264 | 265 | // BUTTON DATA-API 266 | // =============== 267 | 268 | $(document).on('click.bs.button.data-api', '[data-toggle^=button]', function (e) { 269 | var $btn = $(e.target) 270 | if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn') 271 | $btn.button('toggle') 272 | e.preventDefault() 273 | }) 274 | 275 | }(jQuery); 276 | 277 | /* ======================================================================== 278 | * Bootstrap: carousel.js v3.0.2 279 | * http://getbootstrap.com/javascript/#carousel 280 | * ======================================================================== 281 | * Copyright 2013 Twitter, Inc. 282 | * 283 | * Licensed under the Apache License, Version 2.0 (the "License"); 284 | * you may not use this file except in compliance with the License. 285 | * You may obtain a copy of the License at 286 | * 287 | * http://www.apache.org/licenses/LICENSE-2.0 288 | * 289 | * Unless required by applicable law or agreed to in writing, software 290 | * distributed under the License is distributed on an "AS IS" BASIS, 291 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 292 | * See the License for the specific language governing permissions and 293 | * limitations under the License. 294 | * ======================================================================== */ 295 | 296 | 297 | +function ($) { "use strict"; 298 | 299 | // CAROUSEL CLASS DEFINITION 300 | // ========================= 301 | 302 | var Carousel = function (element, options) { 303 | this.$element = $(element) 304 | this.$indicators = this.$element.find('.carousel-indicators') 305 | this.options = options 306 | this.paused = 307 | this.sliding = 308 | this.interval = 309 | this.$active = 310 | this.$items = null 311 | 312 | this.options.pause == 'hover' && this.$element 313 | .on('mouseenter', $.proxy(this.pause, this)) 314 | .on('mouseleave', $.proxy(this.cycle, this)) 315 | } 316 | 317 | Carousel.DEFAULTS = { 318 | interval: 5000 319 | , pause: 'hover' 320 | , wrap: true 321 | } 322 | 323 | Carousel.prototype.cycle = function (e) { 324 | e || (this.paused = false) 325 | 326 | this.interval && clearInterval(this.interval) 327 | 328 | this.options.interval 329 | && !this.paused 330 | && (this.interval = setInterval($.proxy(this.next, this), this.options.interval)) 331 | 332 | return this 333 | } 334 | 335 | Carousel.prototype.getActiveIndex = function () { 336 | this.$active = this.$element.find('.item.active') 337 | this.$items = this.$active.parent().children() 338 | 339 | return this.$items.index(this.$active) 340 | } 341 | 342 | Carousel.prototype.to = function (pos) { 343 | var that = this 344 | var activeIndex = this.getActiveIndex() 345 | 346 | if (pos > (this.$items.length - 1) || pos < 0) return 347 | 348 | if (this.sliding) return this.$element.one('slid', function () { that.to(pos) }) 349 | if (activeIndex == pos) return this.pause().cycle() 350 | 351 | return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos])) 352 | } 353 | 354 | Carousel.prototype.pause = function (e) { 355 | e || (this.paused = true) 356 | 357 | if (this.$element.find('.next, .prev').length && $.support.transition.end) { 358 | this.$element.trigger($.support.transition.end) 359 | this.cycle(true) 360 | } 361 | 362 | this.interval = clearInterval(this.interval) 363 | 364 | return this 365 | } 366 | 367 | Carousel.prototype.next = function () { 368 | if (this.sliding) return 369 | return this.slide('next') 370 | } 371 | 372 | Carousel.prototype.prev = function () { 373 | if (this.sliding) return 374 | return this.slide('prev') 375 | } 376 | 377 | Carousel.prototype.slide = function (type, next) { 378 | var $active = this.$element.find('.item.active') 379 | var $next = next || $active[type]() 380 | var isCycling = this.interval 381 | var direction = type == 'next' ? 'left' : 'right' 382 | var fallback = type == 'next' ? 'first' : 'last' 383 | var that = this 384 | 385 | if (!$next.length) { 386 | if (!this.options.wrap) return 387 | $next = this.$element.find('.item')[fallback]() 388 | } 389 | 390 | this.sliding = true 391 | 392 | isCycling && this.pause() 393 | 394 | var e = $.Event('slide.bs.carousel', { relatedTarget: $next[0], direction: direction }) 395 | 396 | if ($next.hasClass('active')) return 397 | 398 | if (this.$indicators.length) { 399 | this.$indicators.find('.active').removeClass('active') 400 | this.$element.one('slid', function () { 401 | var $nextIndicator = $(that.$indicators.children()[that.getActiveIndex()]) 402 | $nextIndicator && $nextIndicator.addClass('active') 403 | }) 404 | } 405 | 406 | if ($.support.transition && this.$element.hasClass('slide')) { 407 | this.$element.trigger(e) 408 | if (e.isDefaultPrevented()) return 409 | $next.addClass(type) 410 | $next[0].offsetWidth // force reflow 411 | $active.addClass(direction) 412 | $next.addClass(direction) 413 | $active 414 | .one($.support.transition.end, function () { 415 | $next.removeClass([type, direction].join(' ')).addClass('active') 416 | $active.removeClass(['active', direction].join(' ')) 417 | that.sliding = false 418 | setTimeout(function () { that.$element.trigger('slid') }, 0) 419 | }) 420 | .emulateTransitionEnd(600) 421 | } else { 422 | this.$element.trigger(e) 423 | if (e.isDefaultPrevented()) return 424 | $active.removeClass('active') 425 | $next.addClass('active') 426 | this.sliding = false 427 | this.$element.trigger('slid') 428 | } 429 | 430 | isCycling && this.cycle() 431 | 432 | return this 433 | } 434 | 435 | 436 | // CAROUSEL PLUGIN DEFINITION 437 | // ========================== 438 | 439 | var old = $.fn.carousel 440 | 441 | $.fn.carousel = function (option) { 442 | return this.each(function () { 443 | var $this = $(this) 444 | var data = $this.data('bs.carousel') 445 | var options = $.extend({}, Carousel.DEFAULTS, $this.data(), typeof option == 'object' && option) 446 | var action = typeof option == 'string' ? option : options.slide 447 | 448 | if (!data) $this.data('bs.carousel', (data = new Carousel(this, options))) 449 | if (typeof option == 'number') data.to(option) 450 | else if (action) data[action]() 451 | else if (options.interval) data.pause().cycle() 452 | }) 453 | } 454 | 455 | $.fn.carousel.Constructor = Carousel 456 | 457 | 458 | // CAROUSEL NO CONFLICT 459 | // ==================== 460 | 461 | $.fn.carousel.noConflict = function () { 462 | $.fn.carousel = old 463 | return this 464 | } 465 | 466 | 467 | // CAROUSEL DATA-API 468 | // ================= 469 | 470 | $(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) { 471 | var $this = $(this), href 472 | var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 473 | var options = $.extend({}, $target.data(), $this.data()) 474 | var slideIndex = $this.attr('data-slide-to') 475 | if (slideIndex) options.interval = false 476 | 477 | $target.carousel(options) 478 | 479 | if (slideIndex = $this.attr('data-slide-to')) { 480 | $target.data('bs.carousel').to(slideIndex) 481 | } 482 | 483 | e.preventDefault() 484 | }) 485 | 486 | $(window).on('load', function () { 487 | $('[data-ride="carousel"]').each(function () { 488 | var $carousel = $(this) 489 | $carousel.carousel($carousel.data()) 490 | }) 491 | }) 492 | 493 | }(jQuery); 494 | 495 | /* ======================================================================== 496 | * Bootstrap: collapse.js v3.0.2 497 | * http://getbootstrap.com/javascript/#collapse 498 | * ======================================================================== 499 | * Copyright 2013 Twitter, Inc. 500 | * 501 | * Licensed under the Apache License, Version 2.0 (the "License"); 502 | * you may not use this file except in compliance with the License. 503 | * You may obtain a copy of the License at 504 | * 505 | * http://www.apache.org/licenses/LICENSE-2.0 506 | * 507 | * Unless required by applicable law or agreed to in writing, software 508 | * distributed under the License is distributed on an "AS IS" BASIS, 509 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 510 | * See the License for the specific language governing permissions and 511 | * limitations under the License. 512 | * ======================================================================== */ 513 | 514 | 515 | +function ($) { "use strict"; 516 | 517 | // COLLAPSE PUBLIC CLASS DEFINITION 518 | // ================================ 519 | 520 | var Collapse = function (element, options) { 521 | this.$element = $(element) 522 | this.options = $.extend({}, Collapse.DEFAULTS, options) 523 | this.transitioning = null 524 | 525 | if (this.options.parent) this.$parent = $(this.options.parent) 526 | if (this.options.toggle) this.toggle() 527 | } 528 | 529 | Collapse.DEFAULTS = { 530 | toggle: true 531 | } 532 | 533 | Collapse.prototype.dimension = function () { 534 | var hasWidth = this.$element.hasClass('width') 535 | return hasWidth ? 'width' : 'height' 536 | } 537 | 538 | Collapse.prototype.show = function () { 539 | if (this.transitioning || this.$element.hasClass('in')) return 540 | 541 | var startEvent = $.Event('show.bs.collapse') 542 | this.$element.trigger(startEvent) 543 | if (startEvent.isDefaultPrevented()) return 544 | 545 | var actives = this.$parent && this.$parent.find('> .panel > .in') 546 | 547 | if (actives && actives.length) { 548 | var hasData = actives.data('bs.collapse') 549 | if (hasData && hasData.transitioning) return 550 | actives.collapse('hide') 551 | hasData || actives.data('bs.collapse', null) 552 | } 553 | 554 | var dimension = this.dimension() 555 | 556 | this.$element 557 | .removeClass('collapse') 558 | .addClass('collapsing') 559 | [dimension](0) 560 | 561 | this.transitioning = 1 562 | 563 | var complete = function () { 564 | this.$element 565 | .removeClass('collapsing') 566 | .addClass('in') 567 | [dimension]('auto') 568 | this.transitioning = 0 569 | this.$element.trigger('shown.bs.collapse') 570 | } 571 | 572 | if (!$.support.transition) return complete.call(this) 573 | 574 | var scrollSize = $.camelCase(['scroll', dimension].join('-')) 575 | 576 | this.$element 577 | .one($.support.transition.end, $.proxy(complete, this)) 578 | .emulateTransitionEnd(350) 579 | [dimension](this.$element[0][scrollSize]) 580 | } 581 | 582 | Collapse.prototype.hide = function () { 583 | if (this.transitioning || !this.$element.hasClass('in')) return 584 | 585 | var startEvent = $.Event('hide.bs.collapse') 586 | this.$element.trigger(startEvent) 587 | if (startEvent.isDefaultPrevented()) return 588 | 589 | var dimension = this.dimension() 590 | 591 | this.$element 592 | [dimension](this.$element[dimension]()) 593 | [0].offsetHeight 594 | 595 | this.$element 596 | .addClass('collapsing') 597 | .removeClass('collapse') 598 | .removeClass('in') 599 | 600 | this.transitioning = 1 601 | 602 | var complete = function () { 603 | this.transitioning = 0 604 | this.$element 605 | .trigger('hidden.bs.collapse') 606 | .removeClass('collapsing') 607 | .addClass('collapse') 608 | } 609 | 610 | if (!$.support.transition) return complete.call(this) 611 | 612 | this.$element 613 | [dimension](0) 614 | .one($.support.transition.end, $.proxy(complete, this)) 615 | .emulateTransitionEnd(350) 616 | } 617 | 618 | Collapse.prototype.toggle = function () { 619 | this[this.$element.hasClass('in') ? 'hide' : 'show']() 620 | } 621 | 622 | 623 | // COLLAPSE PLUGIN DEFINITION 624 | // ========================== 625 | 626 | var old = $.fn.collapse 627 | 628 | $.fn.collapse = function (option) { 629 | return this.each(function () { 630 | var $this = $(this) 631 | var data = $this.data('bs.collapse') 632 | var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option) 633 | 634 | if (!data) $this.data('bs.collapse', (data = new Collapse(this, options))) 635 | if (typeof option == 'string') data[option]() 636 | }) 637 | } 638 | 639 | $.fn.collapse.Constructor = Collapse 640 | 641 | 642 | // COLLAPSE NO CONFLICT 643 | // ==================== 644 | 645 | $.fn.collapse.noConflict = function () { 646 | $.fn.collapse = old 647 | return this 648 | } 649 | 650 | 651 | // COLLAPSE DATA-API 652 | // ================= 653 | 654 | $(document).on('click.bs.collapse.data-api', '[data-toggle=collapse]', function (e) { 655 | var $this = $(this), href 656 | var target = $this.attr('data-target') 657 | || e.preventDefault() 658 | || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7 659 | var $target = $(target) 660 | var data = $target.data('bs.collapse') 661 | var option = data ? 'toggle' : $this.data() 662 | var parent = $this.attr('data-parent') 663 | var $parent = parent && $(parent) 664 | 665 | if (!data || !data.transitioning) { 666 | if ($parent) $parent.find('[data-toggle=collapse][data-parent="' + parent + '"]').not($this).addClass('collapsed') 667 | $this[$target.hasClass('in') ? 'addClass' : 'removeClass']('collapsed') 668 | } 669 | 670 | $target.collapse(option) 671 | }) 672 | 673 | }(jQuery); 674 | 675 | /* ======================================================================== 676 | * Bootstrap: dropdown.js v3.0.2 677 | * http://getbootstrap.com/javascript/#dropdowns 678 | * ======================================================================== 679 | * Copyright 2013 Twitter, Inc. 680 | * 681 | * Licensed under the Apache License, Version 2.0 (the "License"); 682 | * you may not use this file except in compliance with the License. 683 | * You may obtain a copy of the License at 684 | * 685 | * http://www.apache.org/licenses/LICENSE-2.0 686 | * 687 | * Unless required by applicable law or agreed to in writing, software 688 | * distributed under the License is distributed on an "AS IS" BASIS, 689 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 690 | * See the License for the specific language governing permissions and 691 | * limitations under the License. 692 | * ======================================================================== */ 693 | 694 | 695 | +function ($) { "use strict"; 696 | 697 | // DROPDOWN CLASS DEFINITION 698 | // ========================= 699 | 700 | var backdrop = '.dropdown-backdrop' 701 | var toggle = '[data-toggle=dropdown]' 702 | var Dropdown = function (element) { 703 | var $el = $(element).on('click.bs.dropdown', this.toggle) 704 | } 705 | 706 | Dropdown.prototype.toggle = function (e) { 707 | var $this = $(this) 708 | 709 | if ($this.is('.disabled, :disabled')) return 710 | 711 | var $parent = getParent($this) 712 | var isActive = $parent.hasClass('open') 713 | 714 | clearMenus() 715 | 716 | if (!isActive) { 717 | if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) { 718 | // if mobile we we use a backdrop because click events don't delegate 719 | $('