BVB Source Codes

ionic Show main.html Source code

Return Download ionic: download main.html Source code - Download ionic Source code - Type:.html
  1. <ion-header>
  2.  
  3.   <ion-toolbar color="primary">
  4.     <ion-title>Responsive</ion-title>
  5.   </ion-toolbar>
  6.  
  7. </ion-header>
  8.  
  9.  
  10. <ion-content>
  11.   <ion-grid>
  12.     <ion-row>
  13.       <ion-col col-auto>
  14.         <a href="#equal-width">Equal-width</a>
  15.       </ion-col>
  16.       <ion-col col-auto>
  17.         <a href="#setting-one-column-width">Setting one column width</a>
  18.       </ion-col>
  19.       <ion-col col-auto>
  20.         <a href="#variable-width">Variable-width</a>
  21.       </ion-col>
  22.       <ion-col col-auto>
  23.         <a href="#offsetting-columns">Offsetting columns</a>
  24.       </ion-col>
  25.       <ion-col col-auto>
  26.         <a href="#push-and-pull">Push and pull</a>
  27.       </ion-col>
  28.       <ion-col col-auto>
  29.         <a href="#responsive-attributes">Responsive attributes</a>
  30.       </ion-col>
  31.       <ion-col col-auto>
  32.         <a href="#vertical-alignment">Vertical Alignment</a>
  33.       </ion-col>
  34.       <ion-col col-auto>
  35.         <a href="#horizontal-alignment">Horizontal Alignment</a>
  36.       </ion-col>
  37.     </ion-row>
  38.   </ion-grid>
  39.  
  40.   <div class="grid-demo">
  41.     <h1 id="equal-width">Equal-width</h1>
  42.     <p padding>
  43.       The following grid has equal width columns.
  44.     </p>
  45.     <ion-grid>
  46.       <ion-row>
  47.         <ion-col>
  48.           1 of 2
  49.         </ion-col>
  50.         <ion-col>
  51.           2 of 2
  52.         </ion-col>
  53.       </ion-row>
  54.       <ion-row>
  55.         <ion-col>
  56.           1 of 3
  57.         </ion-col>
  58.         <ion-col>
  59.           2 of 3
  60.         </ion-col>
  61.         <ion-col>
  62.           3 of 3
  63.         </ion-col>
  64.       </ion-row>
  65.     </ion-grid>
  66.  
  67.     <h1 id="setting-one-column-width">Setting one column width</h1>
  68.     <p padding>
  69.       The following grid has a wider center column on each row.
  70.     </p>
  71.     <ion-grid>
  72.       <ion-row>
  73.         <ion-col>
  74.           1 of 3
  75.         </ion-col>
  76.         <ion-col col-8>
  77.           2 of 3 (wider)
  78.         </ion-col>
  79.         <ion-col>
  80.           3 of 3
  81.         </ion-col>
  82.       </ion-row>
  83.       <ion-row>
  84.         <ion-col>
  85.           1 of 3
  86.         </ion-col>
  87.         <ion-col col-6>
  88.           2 of 3 (wider)
  89.         </ion-col>
  90.         <ion-col>
  91.           3 of 3
  92.         </ion-col>
  93.       </ion-row>
  94.     </ion-grid>
  95.  
  96.     <h1 id="variable-width">Variable-width</h1>
  97.     <p padding>
  98.       The following grid has columns that take up the width of their content.<br>
  99.     </p>
  100.     <ion-grid>
  101.       <ion-row>
  102.         <ion-col>
  103.           1 of 3
  104.         </ion-col>
  105.         <ion-col col-auto>
  106.           Variable width content
  107.         </ion-col>
  108.         <ion-col>
  109.           3 of 3
  110.         </ion-col>
  111.       </ion-row>
  112.       <ion-row>
  113.         <ion-col>
  114.           1 of 4
  115.         </ion-col>
  116.         <ion-col>
  117.           2 of 4
  118.         </ion-col>
  119.         <ion-col col-auto no-padding>
  120.           <ion-input placeholder="Variable width input"></ion-input>
  121.         </ion-col>
  122.         <ion-col>
  123.           4 of 4
  124.         </ion-col>
  125.       </ion-row>
  126.     </ion-grid>
  127.  
  128.     <h1 id="offsetting-columns">Offseting Columns</h1>
  129.     <p padding>
  130.       The following grid has columns that are offset on each row.<br>
  131.     </p>
  132.     <ion-grid>
  133.       <ion-row>
  134.         <ion-col col-3>
  135.           1 of 2
  136.         </ion-col>
  137.         <ion-col col-3 offset-3>
  138.           2 of 2
  139.         </ion-col>
  140.       </ion-row>
  141.  
  142.       <ion-row>
  143.         <ion-col col-md-3>
  144.           1 of 3
  145.         </ion-col>
  146.         <ion-col col-md-3>
  147.           2 of 3
  148.         </ion-col>
  149.         <ion-col col-md-3 offset-md-3>
  150.           3 of 3
  151.         </ion-col>
  152.       </ion-row>
  153.     </ion-grid>
  154.  
  155.     <h1 id="push-and-pull">Push and pull</h1>
  156.     <p padding>
  157.       The following grid has columns that are reordered using push and pull.<br>
  158.     </p>
  159.     <ion-grid>
  160.       <ion-row>
  161.         <ion-col col-9 push-3>
  162.           1 of 2
  163.         </ion-col>
  164.         <ion-col col-3 pull-9>
  165.           2 of 2
  166.         </ion-col>
  167.       </ion-row>
  168.  
  169.       <ion-row>
  170.         <ion-col col-md-6 push-md-3>
  171.           1 of 3
  172.         </ion-col>
  173.         <ion-col col-md-3 push-md-3>
  174.           2 of 3
  175.         </ion-col>
  176.         <ion-col col-md-3 pull-md-9>
  177.           3 of 3
  178.         </ion-col>
  179.       </ion-row>
  180.     </ion-grid>
  181.  
  182.     <h1 id="responsive-attributes">Responsive attributes</h1>
  183.     <p padding>
  184.       The following grid adds custom widths for all screen sizes.<br>
  185.     </p>
  186.     <ion-grid>
  187.       <ion-row>
  188.         <ion-col col-4>
  189.           1 of 4
  190.         </ion-col>
  191.         <ion-col col-2>
  192.           2 of 4
  193.         </ion-col>
  194.         <ion-col col-2>
  195.           3 of 4
  196.         </ion-col>
  197.         <ion-col col-4>
  198.           4 of 4
  199.         </ion-col>
  200.       </ion-row>
  201.     </ion-grid>
  202.  
  203.     <p padding>
  204.       The following grid will take up 12 columns until the sm breakpoint (576px) at which point it will take equal width.<br>
  205.     </p>
  206.     <ion-grid>
  207.       <ion-row>
  208.         <ion-col col-12 col-sm>
  209.           1 of 4
  210.         </ion-col>
  211.         <ion-col col-12 col-sm>
  212.           2 of 4
  213.         </ion-col>
  214.         <ion-col col-12 col-sm>
  215.           3 of 4
  216.         </ion-col>
  217.         <ion-col col-12 col-sm>
  218.           4 of 4
  219.         </ion-col>
  220.       </ion-row>
  221.     </ion-grid>
  222.  
  223.     <p padding>
  224.       The following grid will take up 12 columns until the md breakpoint (768px) at which point it will take equal width.<br>
  225.     </p>
  226.     <ion-grid>
  227.       <ion-row>
  228.         <ion-col col-12 col-md>
  229.           1 of 4
  230.         </ion-col>
  231.         <ion-col col-12 col-md>
  232.           2 of 4
  233.         </ion-col>
  234.         <ion-col col-12 col-md>
  235.           3 of 4
  236.         </ion-col>
  237.         <ion-col col-12 col-md>
  238.           4 of 4
  239.         </ion-col>
  240.       </ion-row>
  241.     </ion-grid>
  242.  
  243.     <p padding>
  244.       The following grid will take up 12 columns until the lg breakpoint (992px) at which point it will change to take up 6 and 3 columns.<br>
  245.     </p>
  246.     <ion-grid>
  247.       <ion-row>
  248.         <ion-col col-12 col-lg-6 offset-lg-3>
  249.           1 of 2
  250.         </ion-col>
  251.         <ion-col col-12 col-lg-3>
  252.           2 of 2
  253.         </ion-col>
  254.       </ion-row>
  255.     </ion-grid>
  256.  
  257.     <h1 id="vertical-alignment">Vertical Alignment</h1>
  258.     <p padding>
  259.       The following grid has columns that align themselves vertically inside of the row based on the attribute.<br>
  260.     </p>
  261.     <ion-grid>
  262.       <ion-row>
  263.         <ion-col>
  264.           1 of 4
  265.         </ion-col>
  266.         <ion-col>
  267.           2 of 4 <br>#
  268.         </ion-col>
  269.         <ion-col>
  270.           3 of 4 <br>#<br>#
  271.         </ion-col>
  272.         <ion-col>
  273.           4 of 4 <br>#<br>#<br>#
  274.         </ion-col>
  275.       </ion-row>
  276.  
  277.       <ion-row align-items-start>
  278.         <ion-col>
  279.           1 of 4
  280.         </ion-col>
  281.         <ion-col>
  282.           2 of 4
  283.         </ion-col>
  284.         <ion-col>
  285.           3 of 4
  286.         </ion-col>
  287.         <ion-col>
  288.           4 of 4 <br>#<br>#<br>#
  289.         </ion-col>
  290.       </ion-row>
  291.  
  292.       <ion-row align-items-center>
  293.         <ion-col>
  294.           1 of 4
  295.         </ion-col>
  296.         <ion-col>
  297.           2 of 4
  298.         </ion-col>
  299.         <ion-col>
  300.           3 of 4
  301.         </ion-col>
  302.         <ion-col>
  303.           4 of 4 <br>#<br>#<br>#
  304.         </ion-col>
  305.       </ion-row>
  306.  
  307.       <ion-row align-items-end>
  308.         <ion-col>
  309.           1 of 4
  310.         </ion-col>
  311.         <ion-col>
  312.           2 of 4
  313.         </ion-col>
  314.         <ion-col>
  315.           3 of 4
  316.         </ion-col>
  317.         <ion-col>
  318.           4 of 4 <br>#<br>#<br>#
  319.         </ion-col>
  320.       </ion-row>
  321.     </ion-grid>
  322.  
  323.     <ion-grid>
  324.       <ion-row>
  325.         <ion-col align-self-start>
  326.           1 of 4
  327.         </ion-col>
  328.         <ion-col align-self-center>
  329.           2 of 4
  330.         </ion-col>
  331.         <ion-col align-self-end>
  332.           3 of 4
  333.         </ion-col>
  334.         <ion-col>
  335.           4 of 4 <br>#<br>#<br>#
  336.         </ion-col>
  337.       </ion-row>
  338.     </ion-grid>
  339.  
  340.     <h1 id="horizontal-alignment">Horizontal Alignment</h1>
  341.     <p padding>
  342.       The following grid has columns that align themselves horizontally inside of the row based on the attribute.<br>
  343.     </p>
  344.     <ion-grid>
  345.       <ion-row justify-content-start>
  346.         <ion-col col-3>
  347.           1 of 2
  348.         </ion-col>
  349.         <ion-col col-3>
  350.           2 of 2
  351.         </ion-col>
  352.       </ion-row>
  353.  
  354.       <ion-row justify-content-center>
  355.         <ion-col col-3>
  356.           1 of 2
  357.         </ion-col>
  358.         <ion-col col-3>
  359.           2 of 2
  360.         </ion-col>
  361.       </ion-row>
  362.  
  363.       <ion-row justify-content-end>
  364.         <ion-col col-3>
  365.           1 of 2
  366.         </ion-col>
  367.         <ion-col col-3>
  368.           2 of 2
  369.         </ion-col>
  370.       </ion-row>
  371.  
  372.       <ion-row justify-content-around>
  373.         <ion-col col-3>
  374.           1 of 2
  375.         </ion-col>
  376.         <ion-col col-3>
  377.           2 of 2
  378.         </ion-col>
  379.       </ion-row>
  380.  
  381.       <ion-row justify-content-between>
  382.         <ion-col col-3>
  383.           1 of 2
  384.         </ion-col>
  385.         <ion-col col-3>
  386.           2 of 2
  387.         </ion-col>
  388.       </ion-row>
  389.     </ion-grid>
  390.  
  391.     <h1>Miscellaneous Features</h1>
  392.     <p padding>
  393.       The following grid has no padding.
  394.     </p>
  395.     <ion-grid no-padding>
  396.       <ion-row>
  397.         <ion-col>
  398.           1 of 3
  399.         </ion-col>
  400.         <ion-col>
  401.           2 of 3
  402.         </ion-col>
  403.         <ion-col>
  404.           3 of 3
  405.         </ion-col>
  406.       </ion-row>
  407.     </ion-grid>
  408.  
  409.     <p padding>
  410.       The following grid reverses the order of the columns when wrapping on small screens.
  411.     </p>
  412.     <ion-grid>
  413.       <ion-row wrap-reverse>
  414.         <ion-col col-12 col-md>
  415.           1 of 3
  416.         </ion-col>
  417.         <ion-col col-12 col-md>
  418.           2 of 3
  419.         </ion-col>
  420.         <ion-col col-12 col-md>
  421.           3 of 3
  422.         </ion-col>
  423.       </ion-row>
  424.     </ion-grid>
  425.  
  426.     <h1>Columns Based on Screen Size</h1>
  427.     <p padding>
  428.       The following grid has columns that will change width based on the screen size.<br>
  429.       If <code>window size &gt; 0</code> it will take up 12 columns / 100% width.<br>
  430.       If <code>window size &gt; 768px</code> it will take up 4 columns / 33% width.<br>
  431.       If <code>window size &gt; 992px</code> it the middle column will take up 6 columns / 50% width, other two will take up 3 columns / 25% width.<br>
  432.     </p>
  433.     <ion-grid>
  434.       <ion-row>
  435.         <ion-col col-12 col-md-4 col-lg-3>
  436.           1 of 3
  437.         </ion-col>
  438.         <ion-col col-12 col-md-4 col-lg-6>
  439.           2 of 3
  440.         </ion-col>
  441.         <ion-col col-12 col-md-4 col-lg-3>
  442.           3 of 3
  443.         </ion-col>
  444.       </ion-row>
  445.     </ion-grid>
  446.   </div>
  447. </ion-content>
  448.  
  449. <style>
  450.   .grid-demo .grid:not([no-padding]) .col:not([no-padding]) {
  451.     padding-top: 10px;
  452.     padding-bottom: 10px;
  453.   }
  454.  
  455.   .grid-demo .col {
  456.     background-color: #f7f7f7;
  457.     border: 1px solid #ddd;
  458.   }
  459.  
  460.   .grid-demo a {
  461.     text-decoration: none;
  462.   }
  463.  
  464.   .grid-demo h1 {
  465.     padding-left: 10px;
  466.     font-size: 20px;
  467.   }
  468.  
  469.   .grid-demo p {
  470.     padding: 10px;
  471.     margin: 0;
  472.   }
  473.  
  474. </style>
  475.  
downloadmain.html Source code - Download ionic Source code
Related Source Codes/Software:
requests - Python HTTP Requests for Humans  ... 2017-06-06
vue2-elm - Based on vue2 + vuex to build a large single-page ... 2017-06-05
localstack - A fully functional local AWS cloud stack. Develop ... 2017-06-05
mithril.js - A Javascript Framework for Building Brilliant Appl... 2017-06-05
moby - Moby Project - a collaborative project for the con... 2017-06-06
coding-interview-university - A complete computer science study plan to become a... 2017-06-06
nylas-mail - 2017-06-06
developer-roadmap - Roadmap to becoming a web developer in 2017 2017-06-06
design-patterns-for-humans - Design Patterns for Humans - An ultra-simplified e... 2017-06-06
CRYENGINE - CRYENGINE is a powerful real-time game development... 2017-06-11
postal - 2017-06-11
reactide - Reactide is the first dedicated IDE for React web ... 2017-06-11
rkt - rkt is a pod-native container engine for Linux. It... 2017-06-11
uWebSockets - Tiny WebSockets https://for... 2017-06-11
realworld - TodoMVC for the RealWorld - Exemplary fullstack Me... 2017-06-11
goreplay - GoReplay is an open-source tool for capturing and ... 2017-06-10
pyenv - Simple Python version management 2017-06-10
redux-saga - An alternative side effect model for Redux apps ... 2017-06-10
angular-starter - 2017-06-10

 Back to top