The pattern can work with any dataset of any length. The rows in the pattern do not correspond to the rows in your dataset, they represent a pattern that will be repeated accross the rows in your dataset. You do not need to define each row in your dataset. Each screen size can have a different layout query string, defining a different responsive grid for every screen size (any number of rows, any number of columns for each screen size). Such a query string has to be defined for all 4 screen sizes (Lg, Md, Sm and Xs). So the above query string describes a layout pattern consisting of 3 rows with the content columns described above. 2=4,4,4 - third row has three content columns which are of equal width (col-*-4).1=6,6 - second row has two content columns which are of equal width (col-*-6).0=12 - first row has one content column which is full width (col-*-12).Let's break it down into the query string components: The above query string describes the grid layout shown in the screenshot. You would use the following syntax to describe such a grid layout: For example, 0=8,8 is incorrect since 8+8=16 which is greater than 12.įor example, the layout shown below can be defined with a pattern consisting of 3 rows, where the first row contains one full-width column, the second row contains two equal-width columns and the third row contains 3 equal-width columns. ![]() The sum of the CSV values in each pair cannot exceed 12. The row can define from 1 up to 12 columns. For example: 0=8,4 represents a row that has 2 columns, one with width '8' and the second with width '4' (using the 12 virtual column-grid used in Bootstrap 2). The key in the key-value pair represents the row number and the value represents a CSV list of columns and their associated widths. In order to declare the responsive grid using this component, you will need to provide the layout metadata for each of the 4 screen sizes (Bootstrap 2 breakpoints: Lg, Md, Sm and Xs). The responsive grid is based on the Bootstrap 2. The layout metadata describes the pattern in which to render your custom content (partial views) inside the responsive grid. This looks like: 0=6,6&1=2,8,2 or 0=12 (see next paragraph for breakdown and explanation). This component uses a simple declarative approach to define the responsive grid, using a query string (name-value pair) syntax. This responsive grid layout view component will accept (as its model) a list of child partial views that will serve as the content rendered inside the gird's responsive columns, allowing you to render any content inside the grid columns. Using the Responsive Grid Generator you can use a single ASP.Net Core View Component which will render any custom responsive grid layout. See the following file for an example usage of this view component. These responsive grids are capable of rendering any custom content, such as partial views. ![]() If you ever need to declare responsive layouts on the server (for example using a CMS) then this component will give you the ability to render responsive grid layouts.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |