Each project will have a custom.css file (in the project folder) with the custom formatting. In this class, we will be creating six different projects. You could attach these files to any html file to apply the Bootstrap formatting. The bootstrap.css and bootstrap.js files are a basic framework. Keep the css and js folders exactly where they are – don't move them into the luck folder. Dreamweaver always saves these files at the top level of the local site folder.ĭreamweaver created CSS and JS folders along with the new Bootstrap layout. before the links to the css and js folders, indicating that they are located one folder level up from the luck.html file. If you've saved your luck.html file inside your luck folder, you'll notice a. So far, this is just an empty HTML file, but it is linking to several CSS and JS files.
DREAMWEAVER CC MEDIA QUERIES CODE
Using the Related Files toolbar, select Source Code and switch to Code View. Right away, go to File > Save As, saving the HTML file as luck.html in your luck folder. The Bootstrap layout will open in a new document window.
DREAMWEAVER CC MEDIA QUERIES HOW TO
I will show you how to create a custom.css file using the CSS Designer panel in the next steps. The Save Style Sheet File dialog should open after you click "Create". When the Save Style Sheet File dialog opens, navigate to the luck folder and save the file as " custom.css". Click Create.Ĭreate a new Bootstrap layout via the New Document window. Select "Create new" and uncheck "Include a pre-built layout". Go to File > New and choose the Bootstrap tab. Unzip it and move it into your dw1exercises folder. Creating a New Layoutĭownload the luck folder from the course downloads area. Percentage values can be complicated to calculate, but Bootstrap's grid framework will do the work for you. The fluid columns are achieved by percentage widths and margins. Web designer Stephen Caver's portfolio site expands across four columns to fit a large resolution:Ĭompresses to two columns to fit a tablet:Īnd wraps to a single column to fit a mobile device: Bootstrap's grid cascades up: small layouts will inherit extra-small styles, and medium layouts will inherit small and extra-small styles.Ī fluid grid layout melds to any screen size.
0 kommentar(er)
