Bootstrap Default Sample - Bootstrap Default with Themes Control - Ignite UI

by damyanpetev

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="http://igniteui.com/data-files/adventureworks.min.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/bootstrap3/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<section>
        <div class="igsb-sample-desc">
            <p>This is the Ignite UI Bootstrap default theme.  You can use this independently of Bootstrap for Ignite UI, but it is based on this Bootstrap theme so that you can use it along with other Bootstrap-themed elements.</p>
        </div>
        <p>You can also generate your own Bootstrap-based themes for Ignite UI using our Ignite UI Bootstrap Theme Generator!</p>
        <div class="themeButtonContainer">
            <a class="themeButton" href="http://www.igniteui.com/bootstrap-theme-generator/default">
                <span>Generate Your Own Custom Bootstrap Theme</span>
            </a>
        </div>
    </section>


    <section>
        <h1 class="pageTitle">igEditors</h1>
        <div class="igEditors flex">
            <div>
                <label for="textEditor">Text</label>
                <input id="textEditor" value="John"></input>
            </div>

            <div>
                <label for="dateEditor">Date</label>
                <input id="dateEditor" value="07/07/2012"></input>
            </div>

            <div>
                <label for="maskEditor">Mask</label>
               ...

CSS

.flex {
            display: -webkit-box; 
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex; 
            display: flex;
            -webkit-flex-wrap: wrap; /* Safari 6.1+ */
            flex-wrap: wrap;
        }

        .ui-tabs .ui-tabs-panel{
            margin-top: auto;
        }

        .sampleContainer p {
            line-height:28px;
        }

        .sampleContainer .ui-igcombo-wrapper {
            width:100%;
        }

        igsb-sample-desc  {
            font-size: 16px;
        }

        .themeButtonContainer {
            margin-bottom:30px;
        }

        section {
            margin-bottom:30px;
        }

        .sampleContainer .pageTitle {
            font-size:20px;
            margin-bottom:10px;
        }

        .igEditors input {
            width:100%;
            margin-bottom:15px;
            padding:5px;
            box-sizing:border-box;
        }

        .igEditors > div:last-of-type input {
            padding:0;
            height:29px;
        }

        .igEditors label {
            display:block;
            margin-bottom:5px
        }

        .igEditors > div {
            min-width:32%;
            margin:5px;
        }
       
        .text-rigth {
            text-align:right;
        }

        .three-col > div {
            padding: 10px;
            min-width: 32.1%;
            background: #f9f9f9;
            margin:5px;
            box-sizing: border-box;
           
        }

JavaScript

$(function () {

            //igEditors
            $("#textEditor").igTextEditor();
            $("#dateEditor").igDateEditor();
            $("#maskEditor").igMaskEditor();
            $("#currencyEditor").igCurrencyEditor();
            $("#numericEditor").igNumericEditor();
            $("#percentEditor").igPercentEditor();
            $("#datePicker").igDatePicker();

            //igCombo
            $("#combo").igCombo({
                dataSource: [
                      { "ID": 1, "Name": "John Smith", "Age": 45 },
                      { "ID": 2, "Name": "Mary Johnson", "Age": 32 },
                      { "ID": 3, "Name": "Bob Ferguson", "Age": 27 }
                ],
                valueKey: "ID",
                textKey: "Name",
                text: "John Smith"
            });

            //igTree
            $("#tree").igTree({
                dataSource: [
                {
                    "ID": 1, "RegionName": "North America", "Countries":
                    [
                        { "ID": 1, "CountryName": "United States" },
                        { "ID": 2, "CountryName": "Canada" },
                        { "ID": 3, "CountryName": "Mexico" }
                    ]
                },
                {
                    "ID": 2, "RegionName": "South America", "Countries":
                    [
                        { "ID": 4, "CountryName": "Brazil" },
                        { "ID": 5, "CountryName": "Uruguay" }
                    ]
                },
                {
                    "ID": 3, "RegionName": "Europe", "Countries":
                    [
                        { "ID": 6, "CountryName": "United Kingdom" },
                        { "ID": 7, "CountryName": "Germany" },
                        { "ID": 8, "CountryName": "Bulgaria" }
                    ]
                }
                ],
                bindings: {
                    textKey: "RegionName",
                    valueKey: "ID",
                ...