![]() You also have a special " User" group, where you can place components which you create yourself. All standard Bootstrap components are supported, and even basic HTML elements like p, div, sectionandĬomponents are organized into collapsible groups - Text, Image, Formsetc. You can see them in the Componentspanel's Studiotab. There is a large number of components available to you. Tip:You can drag from the Stageand drop components on the Overviewpanel for greater precision. This is done so that you don't break the page by mistake.īootstrap Studio knows where components can be dropped and automatically adds CSS classes and other attributes that the Bootstrap Framework expects. Some elements like the HTMLand Bodyare locked and can't be moved (you can recognize them by the small padlock in the Overviewpanel). When an element is selected, you can grab it by the move handle () to drag and drop it into other components. There is a list of supported keyboard shortcutsfor Tip:You can press the Enterkey while an element is selected to start editing it, Ctrl+D/Cmd+Dto duplicate and Deleteto delete it. Just double click an element to edit its content, or press the pencil button ( ) when the component is focused. Some elements like paragraphs, ps and buttons can be edited within a rich text editor. On the selected component, or the entry in the breadcrumbs bar, displayed at at the top of the Optionspanel: This is easy to do by clicking the "Up" button If you wish to see the options of the Dropdown,you need to go one component up. If you attempt to select it, you will actually select the Buttoninside it. One thing to keep in mind, is that some of Bootstrap's components are actually made out of others, like this dropdown: Writing CSS and JavaScript" tutorial for more). But if you need even more control, then writing CSS is for you (see the " The settings that are available in these three tabs give you a great deal of control over There are three tab in the Options panel - Look and Feel, Optionsand Animations. The Optionspanel displaying settings for the paragraph. This is the place where you can modify the styling of the component, control various properties and even create animations. When a component is selected, the Option panelon the right is updated. For example text editing isn't shown on images. Keep in mind that not all actions are available on every component. With these actions you can quickly move the item, edit its text and duplicate it. This is what a selected paragraph looks like. Selecting a component shows a blue outline around it, and a bar with quick actions: The Stageis where you see a preview of the page, drag and drop components and edit text. You have two panels on the left - Componentsand Overview two panels on the right - Optionsand Design,and the center area, which holds the Stage. This is a quick tutorial that will explain the basics about designing websites with Bootstrap Studio. NOTE: COPIED FROM BOOTSTRAP STUDIO APP, FOR MORE INFORMATION CLICK HERE
0 Comments
Leave a Reply. |