Loading

Blog — Frontenda how to

Posted On: Wednesday, June 11, 2014 at 4:56 AM
Last updated: Wednesday, June 11, 2014 at 6:18 AM

Frontenda how to Bootstrap tutorial

Bootstraptor

Joined on
Contributed 43 Snips

Get Social and Share

Tags

PREVIEW SNIPP

How to Create new template

Open the drop down menu and click Create New, and then you get to application page and can start to develop


How to build HTML-grid

The grid is based on the default Bootstrap classes, you can get more information about it here , just drag from the left sidebar to right field starting at SECTION or CONTAINER, place the internal ROW in to CONTAINER, then place the COLUMNS in to the ROW


More about Grid

You can use the container or container-fluid, depending on the design chosen. This will affect the display width of your template. The container has a maximum width 1170px, the fluid container 100% width. Inside the container should definitely put Row. Inside Row grid columns. If you want to split a column insert new Row in to Column, then insert the new columns in to the new Row


Responsive columns classes

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. Each column has drop down menu with classes. Simply select columns classes to display on different devices.


Insert Bootstrap components

When your grid will be constructed simply drag any components from the right sidebar in to columns. Each component has control - changing the default bootstrap classes and specify some styles automatically.


Custom CSS styles editor

You can add any custom CSS styles in to your project. To do this, click on the top menu on the "CODE" button. This opens the code editor. Select the CSS tab, insert and edit CSS codes. To view the modified styles, click "RUN" button on the top menu


Javascript code editor

You can add any custom Javascript code in to your project. To do this, click on the top menu on the "CODE" button. This opens the code editor. Select the JS tab, insert and edit Javascript codes. To previe it work, click "RUN" button on the top menu


Edit component HTML code

Each component has control "" - button with the symbol code in the upper left corner. To edit component code click this button to open the editor. Edit component html code, then you click the "Save html", otherwise your changes will not be saved


Change styles with LESS visual editor

For editing default Bootstrap styles click on the "Colors" in the top menu. Click on сolorpicker of the item or enter a value in input. In the bottom menu, click Apply button or tick the checkbox to automatically apply the changes. Then you can see the changes by clicking on the Run button on the top menu. To download this CSS styles click Download button on top menu and select bootstrap.css tab


Download template code

To download ready template code click to "Download" on the top menu. You will see a pop-up window with tabs. Then click "Download html" button to download html file. Go to the Bootstrap.css tab, custom.css tab, Javascript tab and also click on the Download code buttons.

OK!
section
.container
.row
4
8
xs
sm
md
lg
Lead
h2 title Paragraph

Open the drop down menu and click Create New, and then you get to application page and can start to develop

list Horizontal rule

.row
4
8
xs
sm
md
lg
Lead
h2 title Paragraph

The grid is based on the default Bootstrap classes, you can get more information about it here , just drag from the left sidebar to right field starting at SECTION or CONTAINER, place the internal ROW in to CONTAINER, then place the COLUMNS in to the ROW

list Horizontal rule

.row
4
8
xs
sm
md
lg
Lead
h2 title Paragraph

You can use the container or container-fluid, depending on the design chosen. This will affect the display width of your template. The container has a maximum width 1170px, the fluid container 100% width. Inside the container should definitely put Row. Inside Row grid columns. If you want to split a column insert new Row in to Column, then insert the new columns in to the new Row

list Horizontal rule

.row
4
8
xs
sm
md
lg
Lead
h2 title Paragraph

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. Each column has drop down menu with classes. Simply select columns classes to display on different devices.

list Horizontal rule

.row
4
8
xs
sm
md
lg
Lead
h2 title Paragraph

When your grid will be constructed simply drag any components from the right sidebar in to columns. Each component has control - changing the default bootstrap classes and specify some styles automatically.

list Horizontal rule

.row
4
8
xs
sm
md
lg
Lead
h2 title Paragraph

You can add any custom CSS styles in to your project. To do this, click on the top menu on the "CODE" button. This opens the code editor. Select the CSS tab, insert and edit CSS codes. To view the modified styles, click "RUN" button on the top menu

list Horizontal rule

.row
4
8
xs
sm
md
lg
Lead
h2 title Paragraph

You can add any custom Javascript code in to your project. To do this, click on the top menu on the "CODE" button. This opens the code editor. Select the JS tab, insert and edit Javascript codes. To previe it work, click "RUN" button on the top menu

list Horizontal rule

.row
4
8
xs
sm
md
lg
Lead
h2 title Paragraph

Each component has control "" - button with the symbol code in the upper left corner. To edit component code click this button to open the editor. Edit component html code, then you  click the "Save html", otherwise your changes will not be saved

list Horizontal rule

.row
4
8
xs
sm
md
lg
h3 title h3. Heading

Change styles with LESS visual editor

Lead
h2 title Paragraph

For editing default Bootstrap styles click on the "Colors" in the top menu. Click on сolorpicker of the item or enter a value in input. In the bottom menu, click Apply button or tick the checkbox to automatically apply the changes. Then you can see the changes by clicking on the Run button on the top menu. To download this CSS styles click Download button on top menu and select  bootstrap.css tab

list Horizontal rule

.row
4
8
xs
sm
md
lg
Lead
h2 title Paragraph

To download ready template code click to "Download" on the top menu. You will see a pop-up window with tabs. Then click "Download html" button to download html file. Go to the Bootstrap.css tab, custom.css tab, Javascript tab and also click on the Download code buttons.

section{ padding:50px 0px; } section .img-responsive{ max-width:100%; }null