--- title: Home page published: true --- !!! %html{lang: "en"} %head %meta{content: "text/html; charset=UTF-8", "http-equiv" => "content-type"}/ %meta{charset: "utf-8"}/ %title {{ site.name }} %meta{content: "width=device-width, initial-scale=1, maximum-scale=1", name: "viewport"}/ {{ 'application.css' | stylesheet_tag }} /[if lt IE 9] %link{rel: "shortcut icon", href: "/samples/favicon.png"}/ %link{rel: "apple-touch-icon-precomposed", sizes: "144x144", href: "/samples/apple-touch-icon-144x144-precomposed.png"}/ %link{rel: "apple-touch-icon-precomposed", sizes: "114x114", href: "/samples/apple-touch-icon-114x114-precomposed.png"}/ %link{rel: "apple-touch-icon-precomposed", sizes: "72x72", href: "/samples/apple-touch-icon-72x72-precomposed.png"}/ %link{rel: "apple-touch-icon-precomposed", href: "/samples/apple-touch-icon-precomposed.png"}/ {% inline_editor %} %body .container %h1 {{ page.title }} %p.lead A Full Featured Example / Typography \================================================== %section#typography .page-header / Headings & Paragraph Copy .row .col-lg-6 .well %h1 h1. Bootstrap 3 %h2 h2. Heading 2 %h3 h3. Heading 3 %h4 h4. Heading 4 %h5 h5. Heading 5 %h6 h6. Heading 6 .col-lg-6 %h3 Bootstrap Framework %p In simple terms, a responsive web design figures out what resolution of device it's being served on. Flexible grids then size correctly to fit the screen. %p The new Bootstrap 3 promises to be a smaller build. The separate Bootstrap base and responsive.css files have now been merged into one. There is no more fixed grid, only fluid. %hr/ %blockquote.pull-right %p Have you ever had a project where you thought it would be so much better to just throw everything out and start over? I believe that’s what’s happening with BS3. %small %cite{title: "Source Title"} Quasipickle / Bootstrap 3 Navbar \================================================== %section#navbar .page-header %h1 Bootstrap 3 Navbar .container %nav.navbar{role: "navigation"} / Brand and toggle get grouped for better mobile display .navbar-header %button.navbar-toggle{"data-target" => ".navbar-ex1-collapse", "data-toggle" => "collapse", type: "button"} %span.sr-only Toggle navigation %span.icon-bar %span.icon-bar %span.icon-bar %a.navbar-brand{href: "#"} Title / Collect the nav links, forms, and other content for toggling .collapse.navbar-collapse.navbar-ex1-collapse %ul.nav.navbar-nav %li.active %a{href: "#"} Home %li %a{href: "#"} Link %li %a{href: "#"} Link %li.dropdown %a.dropdown-toggle{"data-toggle" => "dropdown", href: "#"} Dropdown %b.caret %ul.dropdown-menu %li %a{href: "#"} Action %li %a{href: "#"} One more separated link %ul.nav.navbar-nav.navbar-right %li %a{href: "#"} Link / /.navbar-collapse .container %nav.navbar.navbar-inverse{role: "navigation"} / Brand and toggle get grouped for better mobile display .navbar-header %button.navbar-toggle{"data-target" => ".navbar-ex1-collapse", "data-toggle" => "collapse", type: "button"} %span.sr-only Toggle navigation %span.icon-bar %span.icon-bar %span.icon-bar %a.navbar-brand{href: "#"} Title / Collect the nav links, forms, and other content for toggling .collapse.navbar-collapse.navbar-ex1-collapse %ul.nav.navbar-nav %li.active %a{href: "#"} Home %li %a{href: "#"} Link %li %a{href: "#"} Link %li.dropdown %a.dropdown-toggle{"data-toggle" => "dropdown", href: "#"} Dropdown %b.caret %ul.dropdown-menu %li %a{href: "#"} Action %li %a{href: "#"} One more separated link %ul.nav.navbar-nav.navbar-right %li %a{href: "#"} Link / /.navbar-collapse / Bootstrap 3 Scaffolding \================================================== %section .page-header %h1 Grid %p.lead Bootstrap 3 scaffolding has changed for improved display on mobile devices .container .row .col-lg-12 .well %p col-lg-12 .row .col-lg-4 .well %p col-lg-4 .col-lg-4 .well %p col-lg-4 .col-lg-4 .well %p col-lg-4 .row .col-lg-6.col-sm-6 .well %p col-lg-6 .col-lg-6.col-sm-6 .well %p col-lg-6 .row .col-lg-9.col-sm-6 .well col-lg-9 / col-sm-6 .col-lg-3.col-sm-6 .well col-lg-3 / col-sm-6 / Bootstrap 3 Buttons \================================================== %section#buttons .page-header %h1 Bootstrap 3 Buttons %p.lead With no gradients and borders, Bootstrap 3.0 buttons now have a flatter look %h2 Button Sizes (4) %ul.the-buttons.clearfix %li %a.btn.btn-xs.btn-primary{href: "#"} btn-xs %li %a.btn.btn-sm.btn-primary{href: "#"} btn-sm %li %a.btn.btn-primary{href: "#"} btn %li %a.btn.btn-lg.btn-primary{href: "#"} btn-lg %h2 Button Classes %ul.the-buttons.clearfix %li %a.btn.btn-default{href: "#"} Default %li %a.btn.btn-primary{href: "#"} Primary %li %a.btn.btn-success{href: "#"} Success %li %a.btn.btn-info{href: "#"} Info %li %a.btn.btn-warning{href: "#"} Warning %li %a.btn.btn-danger{href: "#"} Danger %li %a.btn.btn-primary.disabled{href: "#"} Disabled %li %a.btn.btn-link{href: "#"} Link %li / Single button .btn-group %button.btn.btn-default.dropdown-toggle{"data-toggle" => "dropdown", type: "button"} Dropdown %span.caret %ul.dropdown-menu %li %a{href: "#"} Action %li %a{href: "#"} Another action %li %a{href: "#"} Something else here %li.divider %li %a{href: "#"} Separated link %li %a.btn.btn-info{href: "#"} %i.glyphicon.glyphicon-map-marker Icon / Icons \================================================== %section#icons .page-header %h2 Bootstrap 3 Icons %p.lead The 2.x icons are now replaced by glyphicons in BS3. .row %ul.the-icons.clearfix %li %i.glyphicon.glyphicon-glass glyphicon-glass %li %i.glyphicon.glyphicon-music glyphicon-music %li %i.glyphicon.glyphicon-search glyphicon-search %li %i.glyphicon.glyphicon-envelope glyphicon-envelope %li %i.glyphicon.glyphicon-heart glyphicon-heart %li %i.glyphicon.glyphicon-star glyphicon-star %li %i.glyphicon.glyphicon-star-empty glyphicon-star-empty %li %i.glyphicon.glyphicon-user glyphicon-user %li %i.glyphicon.glyphicon-film glyphicon-film %li %i.glyphicon.glyphicon-th-large glyphicon-th-large %li %i.glyphicon.glyphicon-th glyphicon-th %li %i.glyphicon.glyphicon-th-list glyphicon-th-list %li %i.glyphicon.glyphicon-ok glyphicon-ok %li %i.glyphicon.glyphicon-remove glyphicon-remove %li %i.glyphicon.glyphicon-zoom-in glyphicon-zoom-in %li %i.glyphicon.glyphicon-zoom-out glyphicon-zoom-out %li %i.glyphicon.glyphicon-off glyphicon-off %li %i.glyphicon.glyphicon-signal glyphicon-signal %li %i.glyphicon.glyphicon-cog glyphicon-cog %li %i.glyphicon.glyphicon-trash glyphicon-trash %li %i.glyphicon.glyphicon-home glyphicon-home %li %i.glyphicon.glyphicon-file glyphicon-file %li %i.glyphicon.glyphicon-time glyphicon-time %li %i.glyphicon.glyphicon-road glyphicon-road %li %i.glyphicon.glyphicon-download-alt glyphicon-download-alt %li %i.glyphicon.glyphicon-download glyphicon-download %li %i.glyphicon.glyphicon-upload glyphicon-upload %li %i.glyphicon.glyphicon-inbox glyphicon-inbox %li %i.glyphicon.glyphicon-play-circle glyphicon-play-circle %li %i.glyphicon.glyphicon-repeat glyphicon-repeat %li %i.glyphicon.glyphicon-refresh glyphicon-refresh %li %i.glyphicon.glyphicon-list-alt glyphicon-list-alt %li %i.glyphicon.glyphicon-lock glyphicon-lock %li %i.glyphicon.glyphicon-flag glyphicon-flag %li %i.glyphicon.glyphicon-headphones glyphicon-headphones %li %i.glyphicon.glyphicon-volume-off glyphicon-volume-off %li %i.glyphicon.glyphicon-volume-down glyphicon-volume-down %li %i.glyphicon.glyphicon-volume-up glyphicon-volume-up %li %i.glyphicon.glyphicon-qrcode glyphicon-qrcode %li %i.glyphicon.glyphicon-barcode glyphicon-barcode %li %i.glyphicon.glyphicon-tag glyphicon-tag %li %i.glyphicon.glyphicon-tags glyphicon-tags %li %i.glyphicon.glyphicon-book glyphicon-book %li %i.glyphicon.glyphicon-bookmark glyphicon-bookmark %li %i.glyphicon.glyphicon-print glyphicon-print %li %i.glyphicon.glyphicon-camera glyphicon-camera %li %i.glyphicon.glyphicon-font glyphicon-font %li %i.glyphicon.glyphicon-bold glyphicon-bold %li %i.glyphicon.glyphicon-italic glyphicon-italic %li %i.glyphicon.glyphicon-text-height glyphicon-text-height %li %i.glyphicon.glyphicon-text-width glyphicon-text-width %li %i.glyphicon.glyphicon-align-left glyphicon-align-left %li %i.glyphicon.glyphicon-align-center glyphicon-align-center %li %i.glyphicon.glyphicon-align-right glyphicon-align-right %li %i.glyphicon.glyphicon-align-justify glyphicon-align-justify %li %i.glyphicon.glyphicon-list glyphicon-list %li %i.glyphicon.glyphicon-indent-left glyphicon-indent-left %li %i.glyphicon.glyphicon-indent-right glyphicon-indent-right %li %i.glyphicon.glyphicon-facetime-video glyphicon-facetime-video %li %i.glyphicon.glyphicon-picture glyphicon-picture %li %i.glyphicon.glyphicon-pencil glyphicon-pencil %li %i.glyphicon.glyphicon-map-marker glyphicon-map-marker %li %i.glyphicon.glyphicon-adjust glyphicon-adjust %li %i.glyphicon.glyphicon-tint glyphicon-tint %li %i.glyphicon.glyphicon-edit glyphicon-edit %li %i.glyphicon.glyphicon-share glyphicon-share %li %i.glyphicon.glyphicon-check glyphicon-check %li %i.glyphicon.glyphicon-move glyphicon-move %li %i.glyphicon.glyphicon-step-backward glyphicon-step-backward %li %i.glyphicon.glyphicon-fast-backward glyphicon-fast-backward %li %i.glyphicon.glyphicon-backward glyphicon-backward %li %i.glyphicon.glyphicon-play glyphicon-play %li %i.glyphicon.glyphicon-pause glyphicon-pause %li %i.glyphicon.glyphicon-stop glyphicon-stop %li %i.glyphicon.glyphicon-forward glyphicon-forward %li %i.glyphicon.glyphicon-fast-forward glyphicon-fast-forward %li %i.glyphicon.glyphicon-step-forward glyphicon-step-forward %li %i.glyphicon.glyphicon-eject glyphicon-eject %li %i.glyphicon.glyphicon-chevron-left glyphicon-chevron-left %li %i.glyphicon.glyphicon-chevron-right glyphicon-chevron-right %li %i.glyphicon.glyphicon-plus-sign glyphicon-plus-sign %li %i.glyphicon.glyphicon-minus-sign glyphicon-minus-sign %li %i.glyphicon.glyphicon-remove-sign glyphicon-remove-sign %li %i.glyphicon.glyphicon-ok-sign glyphicon-ok-sign %li %i.glyphicon.glyphicon-question-sign glyphicon-question-sign %li %i.glyphicon.glyphicon-info-sign glyphicon-info-sign %li %i.glyphicon.glyphicon-screenshot glyphicon-screenshot %li %i.glyphicon.glyphicon-remove-circle glyphicon-remove-circle %li %i.glyphicon.glyphicon-ok-circle glyphicon-ok-circle %li %i.glyphicon.glyphicon-ban-circle glyphicon-ban-circle %li %i.glyphicon.glyphicon-arrow-left glyphicon-arrow-left %li %i.glyphicon.glyphicon-arrow-right glyphicon-arrow-right %li %i.glyphicon.glyphicon-arrow-up glyphicon-arrow-up %li %i.glyphicon.glyphicon-arrow-down glyphicon-arrow-down %li %i.glyphicon.glyphicon-share-alt glyphicon-share-alt %li %i.glyphicon.glyphicon-resize-full glyphicon-resize-full %li %i.glyphicon.glyphicon-resize-small glyphicon-resize-small %li %i.glyphicon.glyphicon-plus glyphicon-plus %li %i.glyphicon.glyphicon-minus glyphicon-minus %li %i.glyphicon.glyphicon-asterisk glyphicon-asterisk %li %i.glyphicon.glyphicon-exclamation-sign glyphicon-exclamation-sign %li %i.glyphicon.glyphicon-gift glyphicon-gift %li %i.glyphicon.glyphicon-leaf glyphicon-leaf %li %i.glyphicon.glyphicon-fire glyphicon-fire %li %i.glyphicon.glyphicon-eye-open glyphicon-eye-open %li %i.glyphicon.glyphicon-eye-close glyphicon-eye-close %li %i.glyphicon.glyphicon-warning-sign glyphicon-warning-sign %li %i.glyphicon.glyphicon-plane glyphicon-plane %li %i.glyphicon.glyphicon-calendar glyphicon-calendar %li %i.glyphicon.glyphicon-random glyphicon-random %li %i.glyphicon.glyphicon-comment glyphicon-comment %li %i.glyphicon.glyphicon-magnet glyphicon-magnet %li %i.glyphicon.glyphicon-chevron-up glyphicon-chevron-up %li %i.glyphicon.glyphicon-chevron-down glyphicon-chevron-down %li %i.glyphicon.glyphicon-retweet glyphicon-retweet %li %i.glyphicon.glyphicon-shopping-cart glyphicon-shopping-cart %li %i.glyphicon.glyphicon-folder-close glyphicon-folder-close %li %i.glyphicon.glyphicon-folder-open glyphicon-folder-open %li %i.glyphicon.glyphicon-resize-vertical glyphicon-resize-vertical %li %i.glyphicon.glyphicon-resize-horizontal glyphicon-resize-horizontal %li %i.glyphicon.glyphicon-hdd glyphicon-hdd %li %i.glyphicon.glyphicon-bullhorn glyphicon-bullhorn %li %i.glyphicon.glyphicon-bell glyphicon-bell %li %i.glyphicon.glyphicon-certificate glyphicon-certificate %li %i.glyphicon.glyphicon-thumbs-up glyphicon-thumbs-up %li %i.glyphicon.glyphicon-thumbs-down glyphicon-thumbs-down %li %i.glyphicon.glyphicon-hand-right glyphicon-hand-right %li %i.glyphicon.glyphicon-hand-left glyphicon-hand-left %li %i.glyphicon.glyphicon-hand-up glyphicon-hand-up %li %i.glyphicon.glyphicon-hand-down glyphicon-hand-down %li %i.glyphicon.glyphicon-circle-arrow-right glyphicon-circle-arrow-right %li %i.glyphicon.glyphicon-circle-arrow-left glyphicon-circle-arrow-left %li %i.glyphicon.glyphicon-circle-arrow-up glyphicon-circle-arrow-up %li %i.glyphicon.glyphicon-circle-arrow-down glyphicon-circle-arrow-down %li %i.glyphicon.glyphicon-globe glyphicon-globe %li %i.glyphicon.glyphicon-wrench glyphicon-wrench %li %i.glyphicon.glyphicon-tasks glyphicon-tasks %li %i.glyphicon.glyphicon-filter glyphicon-filter %li %i.glyphicon.glyphicon-briefcase glyphicon-briefcase %li %i.glyphicon.glyphicon-fullscreen glyphicon-fullscreen %li %i.glyphicon.glyphicon-dashboard glyphicon-dashboard %li %i.glyphicon.glyphicon-paperclip glyphicon-paperclip %li %i.glyphicon.glyphicon-heart-empty glyphicon-heart-empty %li %i.glyphicon.glyphicon-link glyphicon-link %li %i.glyphicon.glyphicon-phone glyphicon-phone %li %i.glyphicon.glyphicon-pushpin glyphicon-pushpin %li %i.glyphicon.glyphicon-euro glyphicon-euro %li %i.glyphicon.glyphicon-usd glyphicon-usd %li %i.glyphicon.glyphicon-gbp glyphicon-gbp %li %i.glyphicon.glyphicon-sort glyphicon-sort %li %i.glyphicon.glyphicon-sort-by-alphabet glyphicon-sort-by-alphabet %li %i.glyphicon.glyphicon-sort-by-alphabet-alt glyphicon-sort-by-alphabet-alt %li %i.glyphicon.glyphicon-sort-by-order glyphicon-sort-by-order %li %i.glyphicon.glyphicon-sort-by-order-alt glyphicon-sort-by-order-alt %li %i.glyphicon.glyphicon-sort-by-attributes glyphicon-sort-by-attributes %li %i.glyphicon.glyphicon-sort-by-attributes-alt glyphicon-sort-by-attributes-alt %li %i.glyphicon.glyphicon-unchecked glyphicon-unchecked %li %i.glyphicon.glyphicon-expand glyphicon-expand %li %i.glyphicon.glyphicon-collapse glyphicon-collapse %li %i.glyphicon.glyphicon-collapse-top glyphicon-collapse-top / Forms \================================================== %section#forms .page-header %h2 Forms .row .col-lg-8 %h3 Form Inline %form.form-inline.well .col-md-3 %input.form-control{placeholder: "Email", type: "text"}/ .col-md-3 %input.form-control{placeholder: "Password", type: "password"}/ .checkbox %label %input{type: "checkbox"}/ Remember me %button.btn.btn-default{type: "submit"} Sign in %h3 Form Horizontal %form.form-horizontal.well %fieldset %legend Bootstrap 3 Inputs .control-group %label.control-label{for: "input01"} Text input .controls %input#input01.form-control.input-xlarge{type: "text"}/ %p.help-block In addition to freeform text, any HTML5 text-based input appears like so. .control-group %label.control-label{for: "optionsCheckbox"} Checkbox .controls %label.checkbox %input#optionsCheckbox{type: "checkbox", value: "option1"}/ Option one is this and that—be sure to include why it's great .control-group %label.control-label{for: "select01"} Select list .controls %select#select01.form-control %option something %option 2 %option 3 %option 4 %option 5 .control-group %label.control-label{for: "multiSelect"} Multicon-select .controls %select#multiSelect.form-control{multiple: "multiple"} %option 1 %option 2 %option 3 %option 4 %option 5 .control-group %label.control-label{for: "fileInput"} File input .controls %input#fileInput.form-control.input-file{type: "file"}/ .control-group %label.control-label{for: "textarea"} Textarea .controls %textarea#textarea.form-control.input-xlarge{rows: "3"} .control-group %label.control-label{for: "optionsCheckbox2"} Disabled checkbox .controls %label.checkbox %input#optionsCheckbox2{disabled: "disabled", type: "checkbox", value: "option1"}/ This is a disabled checkbox .control-group.warning %label.control-label{for: "inputWarning"} Input with warning .controls %input#inputWarning.form-control{type: "text"}/ %span.help-inline Something may have gone wrong %hr/ .form-actions %button.btn.btn-primary{type: "submit"} Save changes %button.btn{type: "reset"} Cancel / Tables \================================================== %section#tables .page-header %h1 Tables %table.table.table-bordered.table-striped.table-hover %thead %tr %th # %th First Name %th Last Name %th Username %tbody %tr %td 1 %td Mark %td Otto %td @mdo %tr %td 2 %td Jacob %td Thornton %td @fat %tr %td 3 %td Larry %td the Bird %td @twitter / Miscellaneous \================================================== %section#miscellaneous .page-header %h1 Miscellaneous .row .col-lg-4 %h3#breadcrumbs Breadcrumbs %ul.breadcrumb %li %a{href: "#"} Home %span.divider %li %a{href: "#"} Library %span.divider %li.active Data .col-lg-4 %h3#pagination Pagination %ul.pagination %li %a{href: "#"} « %li %a{href: "#"} 1 %li %a{href: "#"} 2 %li %a{href: "#"} 3 %li %a{href: "#"} 4 %li %a{href: "#"} 5 %li %a{href: "#"} » .col-lg-4 %h3#pager Pagers %ul.pager %li %a{href: "#"} Previous %li %a{href: "#"} Next %ul.pager %li.previous.disabled %a{href: "#"} ? Older %li.next %a{href: "#"} Newer ? / Navs \================================================== .row .col-lg-4 %h3#tabs Tabs %ul.nav.nav-tabs %li.active %a{"data-toggle" => "tab", href: "#A"} Section 1 %li %a{"data-toggle" => "tab", href: "#B"} Section 2 %li %a{"data-toggle" => "tab", href: "#C"} Section 3 .tabbable .tab-content #A.tab-pane.active %p I'm in Section A. #B.tab-pane %p Howdy, I'm in Section B. #C.tab-pane %p What up girl, this is Section C. .col-lg-4 %h3#pills Pills %ul.nav.nav-pills %li.active %a{href: "#"} Home %li %a{href: "#"} Profile %li.dropdown %a.dropdown-toggle{"data-toggle" => "dropdown", href: "#"} Dropdown %b.caret %ul.dropdown-menu %li %a{href: "#"} Action %li %a{href: "#"} Another action %li %a{href: "#"} Something else here %li.divider %li %a{href: "#"} Separated link %li.disabled %a{href: "#"} Disabled link .col-lg-4 %h3#list Nav Lists .well{style: "padding: 8px 0;"} %ul.nav.nav-list %li.nav-header List header %li.active %a{href: "#"} Home %li %a{href: "#"} Library %li %a{href: "#"} Applications %li.divider %li %a{href: "#"} Help / Labels \================================================== .row .col-lg-4 %h3#labels Labels %span.label Default %span.label.label-success Success %span.label.label-warning Warning %span.label.label-danger Danger %span.label.label-info Info .col-lg-4 %h3#badges Badges %span.badge Default .col-lg-4 %h3#badges Progress bars .progress .progress-bar.progress-bar-info{style: "width: 20%"} .progress .progress-bar.progress-bar-success{style: "width: 40%"} .progress .progress-bar.progress-bar-warning{style: "width: 60%"} .progress .progress-bar.progress-bar-danger{style: "width: 80%"} %br/ / Panel & ListGroups \================================================== %hr/ %h2#panels Bootstrap 3 Panels .row .col-lg-4 .panel.panel-default .panel-heading Panel heading .panel-body Hello. This is the Panel content. .col-lg-4 .panel.panel-primary .panel-heading Panel primary .panel-body Panels are new in BS3. .col-lg-4 .panel.panel-success .panel-heading Panel success .panel-body You can use contextual classes. / ListGroups \================================================== %hr/ %h2#panels Bootstrap 3 List Groups .row .col-lg-4 %ul.list-group %li.list-group-item List item 1 %li.list-group-item List item 2 %li.list-group-item Mobile-first %li.list-group-item Responsive %li.list-group-item Lightweight .col-lg-4 %ul.list-group %li.list-group-item %span.glyphicon.glyphicon-chevron-right List item 1 %li.list-group-item %span.glyphicon.glyphicon-chevron-right List item 2 %li.list-group-item %span.glyphicon.glyphicon-chevron-right Mobile-first %li.list-group-item %span.glyphicon.glyphicon-chevron-right Responsive %li.list-group-item %span.glyphicon.glyphicon-chevron-right Lightweight .col-lg-4 .list-group %a.list-group-item.active{href: "#"} Linked list group %span.glyphicon.glyphicon-chevron-right %a.list-group-item{href: "#"} Dapibus ac facilisis in %span.glyphicon.glyphicon-chevron-right %a.list-group-item{href: "#"} Morbi leo risus %span.glyphicon.glyphicon-chevron-right %a.list-group-item{href: "#"} Porta ac consectetur ac %span.glyphicon.glyphicon-chevron-right %a.list-group-item{href: "#"} Vestibulum at eros %span.glyphicon.glyphicon-chevron-right / Well Sizes \================================================== %hr/ %h2 Well Sizes .row .col-lg-12 .well.well-sm \.well-sm .well \.well .well.well-lg \.well-lg %hr/ %hr/ %script{src: "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js", type: "text/javascript"} {{ 'bootstrap.min.js' | javascript_tag }} :javascript $(document).ready(function() { });