working on it ...

Filters

Explore Public Snippets

Sort by

Found 193 snippets matching: boostrap

    public by cyberrspiritt  2595  2  6  0

    Bootstrap kickstart template

    boostrap sample kickstart template
    <!DOCTYPE html>
    <html lang="">
    	<head>
    		<meta charset="utf-8">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>Title Page</title>
    
    		<!-- Bootstrap CSS -->
    		<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    
    		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    		<!--[if lt IE 9]>
    			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    			<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    		<![endif]-->
    	</head>
    	<body>
    		<h1 class="text-center">Hello World</h1>
    
    		<!-- jQuery -->
    		<script src="//code.jquery.com/jquery.js"></script>
    		<!-- Bootstrap JavaScript -->
    		<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    	</body>
    </html>

    external by Thomas Lebeau  298  0  3  0

    Boostrap 3 Media Queries Cheat Sheet

    Boostrap 3 Media Queries Cheat Sheet: gistfile1.css
    /* no media query is for phone and larger (mobile first) */
    @media only screen and (min-width: @screen-sm-min) {} /* tablet (768px) and larger  */
    @media only screen and (min-width: @screen-md-min) {} /* desktop (992px) and larger  */
    @media only screen and (min-width: @screen-lg-min) {} /* wide destop (1200px) and larger  */
    
    @media only screen and (max-width: @screen-xs-max) {} /* phone (767px) and smaller */
    @media only screen and (max-width: @screen-sm-max) {} /* tablet (991px) and smaller  */
    @media only screen and (max-width: @screen-md-max) {} /* desktop (1199px) and smaller  */
    /* no media query is also for wide desktop and smaller */
    
    
    

    external by sionc  322  0  3  0

    Instructions on creating a new app using Ruby on Rails, Postgresql, Backbone.js, Twitter Boostrap, Bootstwatch

    Instructions on creating a new app using Ruby on Rails, Postgresql, Backbone.js, Twitter Boostrap, Bootstwatch: rails-postgres-backbone-bootstrap-bootswatch
    - Check rails version
    $ rails -v
    
    - To update rails
    $ gem update rails
    
    - Creating a new rails app using postgresql
    $ mkdir rails_projects
    $ cd rails_projects
    $ rails new myapp --database=postgresql
    $ cd myapp
    
    - Update Gemfile to include the correct ruby version on the top
    source 'https://rubygems.org'
    ruby '2.0.0'
    
    - Run bundle install
    $ bundle update
    $ bundle install
    
    - Update the passwords in the config/database.yml file
    username: myapp
    password: password
    
    - Create a user in postgresql
    $ createuser myapp
     
    - Create test, development and production databases
    $ createdb -Omyapp -Eunicode myapp_development
    $ createdb -Omyapp -Eunicode myapp_test
    $ createdb -Omyapp -Eunicode myapp_production
    
    - Test the rails server
    $ rails s
    
    - Initialize a git repository
    $ git init
    
    - Append .DS_Store to gitignore
    # Ignore files containing MAC folder attributes
    .DS_Store
    
    
    
    

    external by Superlol  171  0  2  0

    Ciriec Boostrap

    Ciriec Boostrap: config.json
    {
      "vars": {
        "@gray-darker": "lighten(#000, 13.5%)",
        "@gray-dark": "lighten(#000, 20%)",
        "@gray": "lighten(#000, 33.5%)",
        "@gray-light": "lighten(#000, 60%)",
        "@gray-lighter": "lighten(#000, 93.5%)",
        "@brand-primary": "#084165",
        "@brand-success": "#5cb85c",
        "@brand-info": "#5bc0de",
        "@brand-warning": "#f0ad4e",
        "@brand-danger": "#d9534f",
        "@body-bg": "#fff",
        "@text-color": "@gray-dark",
        "@link-color": "@brand-primary",
        "@link-hover-color": "darken(@link-color, 15%)",
        "@font-family-sans-serif": "\"Helvetica Neue\", Helvetica, Arial, sans-serif",
        "@font-family-serif": "Georgia, \"Times New Roman\", Times, serif",
        "@font-family-monospace": "Menlo, Monaco, Consolas, \"Courier New\", monospace",
        "@font-family-base": "@font-family-sans-serif",
        "@font-size-base": "14px",
        "@font-size-large": "ceil((@font-size-base * 1.25))",
        "@font-size-small": "ceil((@font-size-base * 0.85))",
        "@font-size-h1": "floor((@font-size-base * 2.6))",
        "@font-size-h2": "floor((@font-size-base * 2.15))",
        "@font-size-h3": "ceil((@font-size-base * 1.7))",
        "@font-size-h4": "ceil((@font-size-base * 1.25))",
        "@font-size-h5": "@font-size-base",
        "@font-size-h6": "ceil((@font-size-base * 0.85))",
        "@line-height-base": "1.428571429",
        "@line-height-computed": "floor((@font-size-base * @line-height-base))",
        "@headings-font-family": "inherit",
        "@headings-font-weight": "500",
        "@headings-line-height": "1.1",
        "@headings-color": "inherit",
        "@padding-base-vertical": "6px",
        "@padding-base-horizontal": "12px",
        "@padding-large-vertical": "10px",
        "@padding-large-horizontal": "16px",
        "@padding-small-vertical": "5px",
        "@padding-small-horizontal": "10px",
        "@padding-xs-vertical": "1px",
        "@padding-xs-horizontal": "5px",
        "@line-height-large": "1.33",
        "@line-height-small": "1.5",
        "@border-radius-base": "4px",
        "@border-radius-large": "6px",
        "@border-radius-small": "3px",
        "@component-active-color": "#fff",
        "@component-active-bg": "@brand-primary",
        "@caret-width-base": "4px",
        "@caret-width-large": "5px",
        "@table-cell-padding": "8px",
        "@table-condensed-cell-padding": "5px",
        "@table-bg": "transparent",
        "@table-bg-accent": "#f9f9f9",
        "@table-bg-hover": "#f5f5f5",
        "@table-bg-active": "@table-bg-hover",
        "@table-border-color": "#ddd",
        "@btn-font-weight": "normal",
        "@btn-default-color": "#333",
        "@btn-default-bg": "#fff",
        "@btn-default-border": "#ccc",
        "@btn-primary-color": "#fff",
        "@btn-primary-bg": "@brand-primary",
        "@btn-primary-border": "darken(@btn-primary-bg, 5%)",
        "@btn-success-color": "#fff",
        "@btn-success-bg": "@brand-success",
        "@btn-success-border": "darken(@btn-success-bg, 5%)",
        "@btn-info-color": "#fff",
        "@btn-info-bg": "@brand-info",
        "@btn-info-border": "darken(@btn-info-bg, 5%)",
        "@btn-warning-color": "#fff",
        "@btn-warning-bg": "@brand-warning",
        "@btn-warning-border": "darken(@btn-warning-bg, 5%)",
        "@btn-danger-color": "#fff",
        "@btn-danger-bg": "@brand-danger",
        "@btn-danger-border": "darken(@btn-danger-bg, 5%)",
        "@btn-link-disabled-color": "@gray-light",
        "@input-bg": "#fff",
        "@input-bg-disabled": "@gray-lighter",
        "@input-color": "@gray",
        "@input-border": "#ccc",
        "@input-border-radius": "@border-radius-base",
        "@input-border-focus": "#66afe9",
        "@input-color-placeholder": "@gray-light",
        "@input-height-base": "(@line-height-computed + (@padding-base-vertical * 2) + 2)",
        "@input-height-large": "(ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2)",
        "@input-height-small": "(floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2)",
        "@legend-color": "@gray-dark",
        "@legend-border-color": "#ecebe8",
        "@input-group-addon-bg": "@gray-lighter",
        "@input-group-addon-border-color": "@input-border",
        "@dropdown-bg": "#f2f2ef",
        "@dropdown-border": "rgba(0,0,0,.15)",
        "@dropdown-fallback-border": "#ccc",
        "@dropdown-divider-bg": "#ecebe8",
        "@dropdown-link-color": "@gray-dark",
        "@dropdown-link-hover-color": "#FFFFFF",
        "@dropdown-link-hover-bg": "#44484a",
        "@dropdown-link-active-color": "#084165",
        "@dropdown-link-active-bg": "transparent",
        "@dropdown-link-disabled-color": "@gray-light",
        "@dropdown-header-color": "@gray-light",
        "@dropdown-caret-color": "#000",
        "@screen-xs": "480px",
        "@screen-xs-min": "@screen-xs",
        "@screen-phone": "@screen-xs-min",
        "@screen-sm": "768px",
        "@screen-sm-min": "@screen-sm",
        "@screen-tablet": "@screen-sm-min",
        "@screen-md": "992px",
        "@screen-md-min": "@screen-md",
        "@screen-desktop": "@screen-md-min",
        "@screen-lg": "1200px",
        "@screen-lg-min": "@screen-lg",
        "@screen-lg-desktop": "@screen-lg-min",
        "@screen-xs-max": "(@screen-sm-min - 1)",
        "@screen-sm-max": "(@screen-md-min - 1)",
        "@screen-md-max": "(@screen-lg-min - 1)",
        "@grid-columns": "12",
        "@grid-gutter-width": "30px",
        "@grid-float-breakpoint": "990px",
        "@grid-float-breakpoint-max": "(@grid-float-breakpoint - 1)",
        "@container-tablet": "((720px + @grid-gutter-width))",
        "@container-sm": "@container-tablet",
        "@container-desktop": "((960px + @grid-gutter-width))",
        "@container-md": "@container-desktop",
        "@container-large-desktop": "((960px + @grid-gutter-width))",
        "@container-lg": "@container-large-desktop",
        "@navbar-height": "63px",
        "@navbar-margin-bottom": "@line-height-computed",
        "@navbar-border-radius": "0",
        "@navbar-padding-horizontal": "0",
        "@navbar-padding-vertical": "((@navbar-height - @line-height-computed) / 2)",
        "@navbar-collapse-max-height": "340px",
        "@navbar-default-color": "#44484A",
        "@navbar-default-bg": "#ECEBE8",
        "@navbar-default-border": "none",
        "@navbar-default-link-color": "#44484A",
        "@navbar-default-link-hover-color": "#084165",
        "@navbar-default-link-hover-bg": "transparent",
        "@navbar-default-link-active-color": "#084165",
        "@navbar-default-link-active-bg": "darken(@navbar-default-bg, 6.5%)",
        "@navbar-default-link-disabled-color": "#ccc",
        "@navbar-default-link-disabled-bg": "transparent",
        "@navbar-default-brand-color": "#084165",
        "@navbar-default-brand-hover-color": "darken(@navbar-default-brand-color, 10%)",
        "@navbar-default-brand-hover-bg": "transparent",
        "@navbar-default-toggle-hover-bg": "#ddd",
        "@navbar-default-toggle-icon-bar-bg": "#084165",
        "@navbar-default-toggle-border-color": "#ddd",
        "@navbar-inverse-color": "@gray-light",
        "@navbar-inverse-bg": "#222",
        "@navbar-inverse-border": "darken(@navbar-inverse-bg, 10%)",
        "@navbar-inverse-link-color": "@gray-light",
        "@navbar-inverse-link-hover-color": "#084165",
        "@navbar-inverse-link-hover-bg": "transparent",
        "@navbar-inverse-link-active-color": "#084165",
        "@navbar-inverse-link-active-bg": "darken(@navbar-inverse-bg, 10%)",
        "@navbar-inverse-link-disabled-color": "#444",
        "@navbar-inverse-link-disabled-bg": "transparent",
        "@navbar-inverse-brand-color": "@navbar-inverse-link-color",
        "@navbar-inverse-brand-hover-color": "#084165",
        "@navbar-inverse-brand-hover-bg": "transparent",
        "@navbar-inverse-toggle-hover-bg": "#333",
        "@navbar-inverse-toggle-icon-bar-bg": "#084165",
        "@navbar-inverse-toggle-border-color": "#333",
        "@nav-link-padding": "10px 16px",
        "@nav-link-hover-bg": "#44484a",
        "@nav-disabled-link-color": "#FFFFFF",
        "@nav-disabled-link-hover-color": "#084165",
        "@nav-open-link-hover-color": "#084165",
        "@nav-tabs-border-color": "#ddd",
        "@nav-tabs-link-hover-border-color": "@gray-lighter",
        "@nav-tabs-active-link-hover-bg": "@body-bg",
        "@nav-tabs-active-link-hover-color": "@gray",
        "@nav-tabs-active-link-hover-border-color": "#ddd",
        "@nav-tabs-justified-link-border-color": "#ddd",
        "@nav-tabs-justified-active-link-border-color": "@body-bg",
        "@nav-pills-border-radius": "@border-radius-base",
        "@nav-pills-active-link-hover-bg": "@component-active-bg",
        "@nav-pills-active-link-hover-color": "@component-active-color",
        "@pagination-color": "@link-color",
        "@pagination-bg": "#fff",
        "@pagination-border": "#ddd",
        "@pagination-hover-color": "@link-hover-color",
        "@pagination-hover-bg": "@gray-lighter",
        "@pagination-hover-border": "#ddd",
        "@pagination-active-color": "#fff",
        "@pagination-active-bg": "@brand-primary",
        "@pagination-active-border": "@brand-primary",
        "@pagination-disabled-color": "@gray-light",
        "@pagination-disabled-bg": "#fff",
        "@pagination-disabled-border": "#ddd",
        "@pager-bg": "@pagination-bg",
        "@pager-border": "@pagination-border",
        "@pager-border-radius": "15px",
        "@pager-hover-bg": "@pagination-hover-bg",
        "@pager-active-bg": "@pagination-active-bg",
        "@pager-active-color": "@pagination-active-color",
        "@pager-disabled-color": "@pagination-disabled-color",
        "@jumbotron-padding": "30px",
        "@jumbotron-color": "inherit",
        "@jumbotron-bg": "@gray-lighter",
        "@jumbotron-heading-color": "inherit",
        "@jumbotron-font-size": "ceil((@font-size-base * 1.5))",
        "@state-success-text": "#3c763d",
        "@state-success-bg": "#dff0d8",
        "@state-success-border": "darken(spin(@state-success-bg, -10), 5%)",
        "@state-info-text": "#31708f",
        "@state-info-bg": "#d9edf7",
        "@state-info-border": "darken(spin(@state-info-bg, -10), 7%)",
        "@state-warning-text": "#8a6d3b",
        "@state-warning-bg": "#fcf8e3",
        "@state-warning-border": "darken(spin(@state-warning-bg, -10), 5%)",
        "@state-danger-text": "#a94442",
        "@state-danger-bg": "#f2dede",
        "@state-danger-border": "darken(spin(@state-danger-bg, -10), 5%)",
        "@tooltip-max-width": "200px",
        "@tooltip-color": "#fff",
        "@tooltip-bg": "#000",
        "@tooltip-opacity": ".9",
        "@tooltip-arrow-width": "5px",
        "@tooltip-arrow-color": "@tooltip-bg",
        "@popover-bg": "#fff",
        "@popover-max-width": "276px",
        "@popover-border-color": "rgba(0,0,0,.2)",
        "@popover-fallback-border-color": "#ccc",
        "@popover-title-bg": "darken(@popover-bg, 3%)",
        "@popover-arrow-width": "10px",
        "@popover-arrow-color": "#fff",
        "@popover-arrow-outer-width": "(@popover-arrow-width + 1)",
        "@popover-arrow-outer-color": "fadein(@popover-border-color, 5%)",
        "@popover-arrow-outer-fallback-color": "darken(@popover-fallback-border-color, 20%)",
        "@label-default-bg": "@gray-light",
        "@label-primary-bg": "@brand-primary",
        "@label-success-bg": "@brand-success",
        "@label-info-bg": "@brand-info",
        "@label-warning-bg": "@brand-warning",
        "@label-danger-bg": "@brand-danger",
        "@label-color": "#fff",
        "@label-link-hover-color": "#fff",
        "@modal-inner-padding": "20px",
        "@modal-title-padding": "15px",
        "@modal-title-line-height": "@line-height-base",
        "@modal-content-bg": "#fff",
        "@modal-content-border-color": "rgba(0,0,0,.2)",
        "@modal-content-fallback-border-color": "#999",
        "@modal-backdrop-bg": "#000",
        "@modal-backdrop-opacity": ".5",
        "@modal-header-border-color": "#ecebe8",
        "@modal-footer-border-color": "@modal-header-border-color",
        "@modal-lg": "900px",
        "@modal-md": "600px",
        "@modal-sm": "300px",
        "@alert-padding": "15px",
        "@alert-border-radius": "@border-radius-base",
        "@alert-link-font-weight": "bold",
        "@alert-success-bg": "@state-success-bg",
        "@alert-success-text": "@state-success-text",
        "@alert-success-border": "@state-success-border",
        "@alert-info-bg": "@state-info-bg",
        "@alert-info-text": "@state-info-text",
        "@alert-info-border": "@state-info-border",
        "@alert-warning-bg": "@state-warning-bg",
        "@alert-warning-text": "@state-warning-text",
        "@alert-warning-border": "@state-warning-border",
        "@alert-danger-bg": "@state-danger-bg",
        "@alert-danger-text": "@state-danger-text",
        "@alert-danger-border": "@state-danger-border",
        "@progress-bg": "#f5f5f5",
        "@progress-bar-color": "#fff",
        "@progress-bar-bg": "@brand-primary",
        "@progress-bar-success-bg": "@brand-success",
        "@progress-bar-warning-bg": "@brand-warning",
        "@progress-bar-danger-bg": "@brand-danger",
        "@progress-bar-info-bg": "@brand-info",
        "@list-group-bg": "#fff",
        "@list-group-border": "#ddd",
        "@list-group-border-radius": "@border-radius-base",
        "@list-group-hover-bg": "#f5f5f5",
        "@list-group-active-color": "@component-active-color",
        "@list-group-active-bg": "@component-active-bg",
        "@list-group-active-border": "@list-group-active-bg",
        "@list-group-active-text-color": "lighten(@list-group-active-bg, 40%)",
        "@list-group-link-color": "#555",
        "@list-group-link-heading-color": "#333",
        "@panel-bg": "#fff",
        "@panel-body-padding": "15px",
        "@panel-border-radius": "@border-radius-base",
        "@panel-inner-border": "#ddd",
        "@panel-footer-bg": "#f5f5f5",
        "@panel-default-text": "@gray-dark",
        "@panel-default-border": "#ddd",
        "@panel-default-heading-bg": "#f5f5f5",
        "@panel-primary-text": "#fff",
        "@panel-primary-border": "@brand-primary",
        "@panel-primary-heading-bg": "@brand-primary",
        "@panel-success-text": "@state-success-text",
        "@panel-success-border": "@state-success-border",
        "@panel-success-heading-bg": "@state-success-bg",
        "@panel-info-text": "@state-info-text",
        "@panel-info-border": "@state-info-border",
        "@panel-info-heading-bg": "@state-info-bg",
        "@panel-warning-text": "@state-warning-text",
        "@panel-warning-border": "@state-warning-border",
        "@panel-warning-heading-bg": "@state-warning-bg",
        "@panel-danger-text": "@state-danger-text",
        "@panel-danger-border": "@state-danger-border",
        "@panel-danger-heading-bg": "@state-danger-bg",
        "@thumbnail-padding": "4px",
        "@thumbnail-bg": "@body-bg",
        "@thumbnail-border": "#ddd",
        "@thumbnail-border-radius": "@border-radius-base",
        "@thumbnail-caption-color": "@text-color",
        "@thumbnail-caption-padding": "9px",
        "@well-bg": "#f5f5f5",
        "@well-border": "darken(@well-bg, 7%)",
        "@badge-color": "#fff",
        "@badge-link-hover-color": "#fff",
        "@badge-bg": "@gray-light",
        "@badge-active-color": "@link-color",
        "@badge-active-bg": "#fff",
        "@badge-font-weight": "bold",
        "@badge-border-radius": "10px",
        "@breadcrumb-padding-vertical": "8px",
        "@breadcrumb-padding-horizontal": "15px",
        "@breadcrumb-bg": "#f5f5f5",
        "@breadcrumb-color": "#ccc",
        "@breadcrumb-active-color": "@gray-light",
        "@breadcrumb-separator": "\"/\"",
        "@carousel-text-shadow": "0 1px 2px rgba(0,0,0,.6)",
        "@carousel-control-color": "#fff",
        "@carousel-control-width": "15%",
        "@carousel-control-opacity": ".5",
        "@carousel-control-font-size": "20px",
        "@carousel-indicator-active-bg": "#fff",
        "@carousel-indicator-border-color": "#fff",
        "@carousel-caption-color": "#fff",
        "@close-font-weight": "bold",
        "@close-color": "#000",
        "@close-text-shadow": "0 1px 0 #fff",
        "@code-color": "#c7254e",
        "@code-bg": "#f9f2f4",
        "@kbd-color": "#fff",
        "@kbd-bg": "#333",
        "@pre-bg": "#f5f5f5",
        "@pre-color": "@gray-dark",
        "@pre-border-color": "#ccc",
        "@pre-scrollable-max-height": "340px",
        "@text-muted": "@gray-light",
        "@abbr-border-color": "@gray-light",
        "@headings-small-color": "@gray-light",
        "@blockquote-small-color": "@gray-light",
        "@blockquote-font-size": "(@font-size-base * 1.25)",
        "@blockquote-border-color": "@gray-lighter",
        "@page-header-border-color": "@gray-lighter",
        "@hr-border": "@gray-lighter",
        "@component-offset-horizontal": "180px"
      },
      "css": [
        "type.less",
        "grid.less",
        "forms.less",
        "buttons.less",
        "navs.less",
        "navbar.less",
        "breadcrumbs.less",
        "pagination.less",
        "pager.less",
        "component-animations.less",
        "dropdowns.less",
        "utilities.less",
        "responsive-utilities.less"
      ],
      "js": [
        "dropdown.js",
        "affix.js",
        "collapse.js",
        "scrollspy.js",
        "transition.js"
      ]
    }
    
    

    external by smutch  137  0  2  0

    py: boostrap generator

    py: boostrap generator: bootstrap.py
    import numpy as np
    
    class Bootstrap():
        def __init__(self, arr, n, statistic=np.mean):
            self.ii = 0
            self.n = n
            self.arr = np.array(arr).squeeze()
            self.statistic = statistic
    
        def __iter__(self):
            return self
    
        def __next__(self):
            if self.ii < self.n:
                self.ii += 1
                if self.statistic is not None:
                    return self.statistic(np.random.choice(self.arr, self.arr.size))
                else:
                    return np.random.choice(self.arr, self.arr.size)
            else:
                raise StopIteration()
    
        def all(self):
            return np.fromiter(self, 'f')
    
        def ci(self, intervals=[95.0]):
            intervals = list(intervals)
            n_percentiles = len(intervals)*2
            percentiles = [(v/2.0, 100.0-(v/2.0)) for v in intervals]
            reduced = self.all()
                
            return [np.percentile(reduced, pc, overwrite_input=True) for pc in percentiles]
    
    

    external by StanBoyet  91  0  1  0

    Boostrap Modal in Slim

    Boostrap Modal in Slim: modal.slim.html
    / Simple Slim translation of Bootstrap modal
    
    .modal.fade.bs-example-modal-lg id="myModal" tabindex='-1' role='dialog' aria-labelledby="Modal Title" aria-hidden='true'
      .modal-dialog.modal-lg
        .modal-content
          .modal-header
            button.close type='button' data-dismiss='modal'
              span aria-hidden='true' &times;
              span.sr-only Close
            h4.modal-title = "Modal Title"
          .modal-body
            p Body
          .modal-footer
            button.btn.btn-danger type='button' data-dismiss='modal' Close
            button.btn.btn-primary type='button' Save
    
    

    external by felipegenuino  68  0  1  0

    alls iframes responsives with boostrap

    alls iframes responsives with boostrap: index.html
    $("iframe").wrap("<div class='embed-responsive embed-responsive-16by9'></div>");
    
    
    

    external by misterboe  68  0  1  0

    Boostrap Grid Container

    Boostrap Grid Container : gistfile1.txt
    <div xmlns="http://www.w3.org/1999/xhtml" lang="en"
         xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
         xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
         xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers">
    
        <f:layout name="Content"/>
    
        <f:section name="Configuration">
            <flux:form id="ColMasterFlex"
                       options="{group: 'Grid', Fluidcontent: {sorting: 10}, icon: '{f:uri.resource(path: \'Icons/bootstrap/glyphicons_155_show_big_thumbnails.png\')}'}"
                       label="Column Creator" description="Create 2-6 Columns with advanced Column Settings">
                <flux:form.sheet name="ColMasterSheet" label="Column Configuration">
                    <flux:field.select name="ColCount" items="{
                        0:{0:'please select',1:'2'},
                        1:{0:'2 Columns',1:'2'},
                        2:{0:'3 Columns',1:'3'},
                        3:{0:'4 Columns',1:'4'},
                        4:{0:'6 Columns',1:'6'}
                    }" label="Number of Columns " requestUpdate="true" maxItems="1" size="1"/>
                    <flux:form.container name="spacing" label="Margin of Content Element" >
                        <flux:field.select name="MarginTop" items="{
                                0:{0:'0px',1:'mg0'},
    				            1:{0:'10px',1:'mg10'},
    				            2:{0:'15px',1:'mg15'},
    				            3:{0:'20px',1:'mg20'},
    				            4:{0:'25px',1:'mg25'},
    				            5:{0:'30px',1:'mg30'},
    				            6:{0:'40px',1:'mg40'},
    				            7:{0:'50px',1:'mg50'}
    				        }" default="0" label="Margin Top" />
                        <flux:field.select name="MarginBottom" items="{
                                0:{0:'0px',1:'mg0'},
    				            1:{0:'10px',1:'mg10'},
    				            2:{0:'15px',1:'mg15'},
    				            3:{0:'20px',1:'mg20'},
    				            4:{0:'25px',1:'mg25'},
    				            5:{0:'30px',1:'mg30'},
    				            6:{0:'40px',1:'mg40'},
    				            7:{0:'50px',1:'mg50'}
    				        }" default="0" label="Margin Bottom" />
                    </flux:form.container>
                    <f:if condition="{ColCount} > '0'">
                        <f:then>
                            <flux:form.container name="CssClasses" label="Css Classes">
                                <v:iterator.for from="1" to="{ColCount}" iteration="i" step="1">
                                    <flux:field.input name="addCssClassCol{i.index}" label="Additional CSS Class Column {i.index}"/>
                                </v:iterator.for>
                            </flux:form.container>
                        </f:then>
                    </f:if>
                </flux:form.sheet>
                <f:if condition="{ColCount} > '0'">
                    <f:then>
                        <v:iterator.for from="1" to="{ColCount}" iteration="i" step="1">
                            <flux:form.sheet name="Column{i.index}Sheet" label="Col {i.index} Settings">
                                <flux:form.container name="Column{i.index}" label="Column: {i.index}">
                                    <flux:field.select name="Colxs{i.index}" items="{
                                         0:{0:'Column width XS: 1',1:'col-xs-1'},
                                         1:{0:'Column width XS: 2',1:'col-xs-2'},
                                         2:{0:'Column width XS: 3',1:'col-xs-3'},
                                         3:{0:'Column width XS: 4',1:'col-xs-4'},
                                         4:{0:'Column width XS: 5',1:'col-xs-5'},
                                         5:{0:'Column width XS: 6',1:'col-xs-6'},
                                         6:{0:'Column width XS: 7',1:'col-xs-7'},
                                         7:{0:'Column width XS: 8',1:'col-xs-8'},
                                         8:{0:'Column width XS: 9',1:'col-xs-9'},
                                         9:{0:'Column width XS: 10',1:'col-xs-10'},
                                        10:{0:'Column width XS: 11',1:'col-xs-11'},
                                        11:{0:'Column width XS: 12',1:'col-xs-12'}
                                    }" label="Extra small devices | Phones (<768px)" maxItems="1"/>
                                    <flux:field.checkbox name="ColxsHide{i.index}" default="0"
                                                         label="Hide on: Extra small devices"/>
                                    <flux:field.select name="Colsm{i.index}" items="{
                                         0:{0:'Column width SM: 1',1:'col-sm-1'},
                                         1:{0:'Column width SM: 2',1:'col-sm-2'},
                                         2:{0:'Column width SM: 3',1:'col-sm-3'},
                                         3:{0:'Column width SM: 4',1:'col-sm-4'},
                                         4:{0:'Column width SM: 5',1:'col-sm-5'},
                                         5:{0:'Column width SM: 6',1:'col-sm-6'},
                                         6:{0:'Column width SM: 7',1:'col-sm-7'},
                                         7:{0:'Column width SM: 8',1:'col-sm-8'},
                                         8:{0:'Column width SM: 9',1:'col-sm-9'},
                                         9:{0:'Column width SM: 10',1:'col-sm-10'},
                                        10:{0:'Column width SM: 11',1:'col-sm-11'},
                                        11:{0:'Column width SM: 12',1:'col-sm-12'}
                                    }" label="Small devices | Tablets (≥768px)" maxItems="1"/>
                                    <flux:field.checkbox name="ColsmHide{i.index}" default="0"
                                                         label="Hide on: Small devices"/>
                                    <flux:field.select name="Colmd{i.index}" items="{
                                         0:{0:'Column width MD: 1',1:'col-md-1'},
                                         1:{0:'Column width MD: 2',1:'col-md-2'},
                                         2:{0:'Column width MD: 3',1:'col-md-3'},
                                         3:{0:'Column width MD: 4',1:'col-md-4'},
                                         4:{0:'Column width MD: 5',1:'col-md-5'},
                                         5:{0:'Column width MD: 6',1:'col-md-6'},
                                         6:{0:'Column width MD: 7',1:'col-md-7'},
                                         7:{0:'Column width MD: 8',1:'col-md-8'},
                                         8:{0:'Column width MD: 9',1:'col-md-9'},
                                         9:{0:'Column width MD: 10',1:'col-md-10'},
                                        10:{0:'Column width MD: 11',1:'col-md-11'},
                                        11:{0:'Column width MD: 12',1:'col-md-12'}
                                    }" label="Medium devices | Desktops (≥992px)" maxItems="1"/>
                                    <flux:field.checkbox name="ColmdHide{i.index}" default="0"
                                                         label="Hide on: Medium devices"/>
                                    <flux:field.select name="Collg{i.index}" items="{
                                         0:{0:'Column width LG: 1',1:'col-lg-1'},
                                         1:{0:'Column width LG: 2',1:'col-lg-2'},
                                         2:{0:'Column width LG: 3',1:'col-lg-3'},
                                         3:{0:'Column width LG: 4',1:'col-lg-4'},
                                         4:{0:'Column width LG: 5',1:'col-lg-5'},
                                         5:{0:'Column width LG: 6',1:'col-lg-6'},
                                         6:{0:'Column width LG: 7',1:'col-lg-7'},
                                         7:{0:'Column width LG: 8',1:'col-lg-8'},
                                         8:{0:'Column width LG: 9',1:'col-lg-9'},
                                         9:{0:'Column width LG: 10',1:'col-lg-10'},
                                        10:{0:'Column width LG: 11',1:'col-lg-11'},
                                        11:{0:'Column width LG: 12',1:'col-lg-12'}
                                    }" label="Large devices | Desktops (≥1200px)" maxItems="1"/>
                                    <flux:field.checkbox name="CollgHide{i.index}" default="0"
                                                         label="Hide on: Large devices"/>
                                </flux:form.container>
                            </flux:form.sheet>
                        </v:iterator.for>
                    </f:then>
                </f:if>
                <flux:grid>
                    <flux:grid.row>
                        <f:if condition="{ColCount} > '0'">
                            <f:then>
                                <v:iterator.for from="1" to="{ColCount}" iteration="i" step="1">
                                    <flux:grid.column
                                            style="width:{v:math.division(a: 100, b: ColCount) -> v:math.round(decimals: 12)}%;"
                                            name="column{i.index}"
                                            label="Column {i.index}"/>
                                </v:iterator.for>
                            </f:then>
                        </f:if>
                    </flux:grid.row>
                </flux:grid>
            </flux:form>
        </f:section>
    
        <f:section name="Preview">
            <flux:widget.grid/>
        </f:section>
    
        <f:section name="Main">
            <div class="row">
                <v:iterator.for from="1" to="{ColCount}" iteration="i" step="1">
                    {v:variable.get(name: 'Column{i.index}.ColxsHide{i.index}') -> v:variable.set(name: 'HideXs')}
                    {v:variable.get(name: 'Column{i.index}.ColsmHide{i.index}') -> v:variable.set(name: 'HideSm')}
                    {v:variable.get(name: 'Column{i.index}.ColmdHide{i.index}') -> v:variable.set(name: 'HideMd')}
                    {v:variable.get(name: 'Column{i.index}.CollgHide{i.index}') -> v:variable.set(name: 'HideLg')}
                    <div class="{v:variable.get(name: 'Column{i.index}.Colxs{i.index}')}
                                {v:variable.get(name: 'Column{i.index}.Colsm{i.index}')}
                                {v:variable.get(name: 'Column{i.index}.Colmd{i.index}')}
                                {v:variable.get(name: 'Column{i.index}.Collg{i.index}')}
                                {f:if(condition: HideXs, then: 'hidden-xs')}
                                {f:if(condition: HideSm, then: 'hidden-sm')}
                                {f:if(condition: HideMd, then: 'hidden-md')}
                                {f:if(condition: HideLg, then: 'hidden-lg')}
                                ">
                        <flux:content.render area="column{i.index}"/>
                    </div>
                </v:iterator.for>
            </div>
        </f:section>
    
    </div>
    
    
    

    external by Nicholas Ventimiglia  68  0  1  0

    Boostrap dropdown proxy plugin. Link a bootstrap dropdown selection to a hidden form element.

    Boostrap dropdown proxy plugin. Link a bootstrap dropdown selection to a hidden form element.: gistfile1.txt
    Do <select>'s drive you crazy ? Want to use a bootstrap dropdown in your forms? now you can.
    This plugin works by binding the dropdown to a hidden form element.
    
    // HTML
       <div class="navbar-right navbar-collapse collapse" id="navbar-collapse2">
                        <ul class="nav navbar-nav">
                            <li class="form-groupdropdown proxy-select" data-target="#Role2">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">All Catalogs</a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#" value="0">All Catalogs</a></li>
                                    <li><a href="#" value="1">Global Catalogs</a></li>
                                    <li><a href="#" value="2">Group Catalogs</a></li>
                                    <li><a href="#" value="3">Surcharges</a></li>
                                </ul>
                            </li>
                        </ul>
                        <form class="navbar-form navbar-left" role="search">
                            <input type="hidden" id="Role" />
                            <div class="form-group">
                                <input type="text" id="Role2" class="form-control" placeholder="Group Filter">
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Name Filter">
                            </div>
                            <button type="submit" class="btn btn-default">Search</button>
                        </form>
                    </div>
                </div>
    
    // JS
    
       <script type="text/javascript">
            $(document).ready(function () {
                $('.proxy-select').proxySelect();
            });
    
    
            $.fn.proxySelect = function () {
                var options = $(this).find("li a");
                var targetId = this.attr("data-target");
                var root = this.find(".dropdown-toggle")[0];
                var def = root.innerHTML;
                var car = " <span class=\"caret\"></span>";
                
                //get selected
                var option = $.grep(options, function (n, i) {
                    return n === targetId;
                });
    
                // default title
                if (option.length === 0) {
                    $(root).html(def + car);
                } else {
                    $(root).html(option.attr("value") + car);
                }
    
                // wire
                options.each(function () {
                    $(this).on("click", function () {
                        // update values
                        var oval = $(this).attr("value");
                        //set title
                        $(root).html(oval + car);
                        //set hidden
                        $(targetId).val(oval);
                    });
                });
    
            };
    
        </script>
    
    

    external by anneallen  68  0  1  0

    Using Boostrap Toggle in WordPress Custom Post Archive

    Using Boostrap Toggle in WordPress Custom Post Archive: gistfile1.txt
     remove_action('genesis_loop','genesis_do_loop');
    add_action('genesis_loop','child_shopping_loop');
    
    
    add_action( 'wp_enqueue_scripts', 'bootstrap_enqueue_scripts' );
    
    
    
    function child_shopping_loop() {
    	
    
    
    	$recent = new WP_Query(array(
    	'post_type' => array( 'shopping'), 
         'orderby' => 'date',
         'order'=> 'DESC',
         'posts_per_page'=> -1,
    
         
          ));
         
     
          					while ($recent->have_posts()) : $recent->the_post();
     
       						$return_string .='<div class="attr-entry entry">
       						
       						<div class="one-fourth first">'.
       									genesis_get_image( array(
    			    						'size' => 'full',
    			    						'attr' => array (
            										'class' => 'aligncenter'
            							) ) ).
       						'</div>
       						
       						<div class="three-fourths">
       							<a class="toggle attr-toggle arrow-closed" data-toggle="collapse" data-target="#attr-desc-'.get_the_ID().'">More Info</a>
       							<h2><a href="'.get_permalink().'" title="'.get_the_title().'">'.get_the_title().'</a></h2>'.
       							get_the_excerpt().'
       						</div>	
       						
       						<div id="attr-desc-'.get_the_ID().'" class="attr-desc collapse" style="height: auto;">'
       							.wpautop(get_the_content()).'
    
       						</div>
       						</div>';
       						
         					endwhile;
    
    
    echo $return_string;
    
    	
    }
    
    
    • Public Snippets
    • Channels Snippets