Table of contents
DMXzone Bootstrap 3 Manual DMXzone Table of contents Table of contents ............................................................................................................................................................................ 1 About DMXzone Bootstrap 3........................................................................................................................................................ 2 Features in Detail ............................................................................................................................................................................. 3 The Basics: Covert a Page from Bootstrap 2 to Bootstrap 3.............................................................................................. 14 The Basics: Inserting DMXzone Bootstrap 3 on a Page ....................................................................................................... 20 Advanced: Using Pull and Push Options in DMXzone Bootstrap 3 .................................................................................. 27 Advanced: Using the Cell Offset Options in DMXzone Bootstrap 3 ................................................................................ 32 Advanced: Building Nested Layouts with DMXzone Bootstrap 3 .................................................................................... 35 Advanced: Building Page with Mobile First Approach ...................................................................................................... 38 Video: Inserting DMXzone Bootstrap 3 on a Page............................................................................................................... 53 Video: Covert a Page with Bootstrap 2 to Bootstrap 3 ...................................................................................................... 53 Video: Using Pull and Push Options in DMXzone Bootstrap 3 ........................................................................................... 53 Video: Using the Cell Offset Options in DMXzone Bootstrap 3 ......................................................................................... 53 Video: Building Nested Layouts with DMXzone Bootstrap 3 .............................................................................................. 53 Video: Building Page with Mobile First Approach ................................................................................................................ 54 Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 1 of 54 DMXzone Bootstrap 3 Manual DMXzone About DMXzone Bootstrap 3 DMXzone Bootstrap 3 is the next generation Dreamweaver extension based on the newest Twitter Bootstrap. Supplied with four grid systems, it’s responsive by default and makes it easy to create great-looking web pages and web apps, which are automatically compatible with various devices. Full support for Bootstrap 3 mobile first design and the dedicated floater gives you a quick access to all the options you need. Additionally, there’s an integrated converter that transforms Bootstrap 2 based pages to Bootstrap 3 in seconds. The great design view integration allows you to add/delete cells, rows and containers as well as merge cells, duplicate and spread them in just a mouse click time. You can choose how to include your bootstrap on your pages; normal, minified or even through CDN, so you can achieve the fastest performance for your website. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 2 of 54 DMXzone Bootstrap 3 Manual DMXzone Features in Detail General Features Full support for the Bootstrap 3 mobile first design - Due to the major changes in the Grid, Bootstrap 3 targets smaller devices first and then expands components and grids (cascades up) for larger screens. When you declare a specific grid size, which is the grid for that size and above. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 3 of 54 DMXzone Bootstrap 3 Manual DMXzone Bootstrap 3 grid dedicated floater - With the greatly helpful and easy accessible floating panel you have all the needed options just a mouse click away. Design for each device differently, directly in Dreamweaver - There are four Grid systems included in Bootstrap 3 for extra small devices, such as phones < 768px, small devices (tablets>= 768px), medium devices (desktops>= 992px) and large devices (desktops>= 1200px). Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 4 of 54 DMXzone Bootstrap 3 Manual DMXzone Fully responsive layout within Dreamweaver - When designing your layout you can follow the work in progress for mobile and desktop browsers directly in Dreamweaver by selecting the desired size for mobile phones, tablets, desktop and large desktop. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 5 of 54 DMXzone Bootstrap 3 Manual DMXzone Twitter Bootstrap 12-column responsive grid - It includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. Support for advanced grid layouts and nested columns - You can add as many rows as you wish within a column and it’s incredibly easy and much more intuitive! Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 6 of 54 DMXzone Bootstrap 3 Manual DMXzone Great Design View integration - The DMXzone Bootstrap 3 allows you to add/delete cells, rows and containers as well as merge cells, duplicate and spread them in just a mouse click time. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 7 of 54 DMXzone Bootstrap 3 Manual DMXzone Supported devices - DMXzone Bootstrap supports different devices and screen resolutions. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 8 of 54 DMXzone Bootstrap 3 Manual DMXzone DMXzone Bootstrap Options Command - You can choose how to include your bootstrap on your pages; normal, minified or even through CDN, so you can achieve the fastest performance for your website. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 9 of 54 DMXzone Bootstrap 3 Manual DMXzone Automatic file copy and include - If you don’t like to automatically copy bootstrap files and inclusion, you can switch it off! Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 10 of 54 DMXzone Bootstrap 3 Manual DMXzone Bootstrap 2 to Bootstrap 3 converter – The integrated converter lets you convert your Bootstrap 2 based pages to Bootstrap 3 directly in Dreamweaver. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 11 of 54 DMXzone Bootstrap 3 Manual DMXzone Bootstrap Grid Management Grid Cells Management Add cell left - will add a new grid cell on the left side of the current selected cell Add cell right - will add a new grid cell on the right side of the current selected cell Duplicate cell - will duplicate the selected cell Merge with left cell - will merge the contents of the current grid cell with its right neighbor Merge with right cell - will merge the contents of the current grid cell with its left neighbor Delete cell - will delete the selected cell Grid Row Management Add row above - will add a grid row above the current selected row Add row inside - will add a grid row inside the current selected cell Add row below - will add a grid row below the current selected row General Alignment and selection options Spread cells - will make all grid cells on the same row equal in size Select cell - selects the cells and opens the Property inspector Add container - adds a fluid/fixed container that wraps the page content Cell properties Increase offset - increases the number of columns before the cell Decrease offset - decreases the number of columns before the cell Increase push - will increase the number of pushed columns in the grid right Decrease push - will decrease the number of pushed columns in the grid right Increase pull - will increase the number of pulled columns in the grid left Decrease pull - will decrease the number of pulled columns in the grid left Expand to left - will expand the width of the current grid cell getting the needed width from its left neighbor Contract from left - will contract the width of the current grid cell and increase the width of its left neighbor Expand to right - will expand the width of the current grid cell getting the needed width from its right neighbor Contract from right - will contract the width of the current grid cell and increase the width of its right neighbor Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 12 of 54 DMXzone Bootstrap 3 Manual DMXzone Before you begin Make sure to setup your site in Dreamweaver first before creating a page. If you don’t know how to do that please read this. Installing the extension Read the tutorial at http://www.dmxzone.com/go/4671/how-to-install-extensions-from-dmxzone/ Login, download the product, and look up your serial at http://www.dmxzone.com/user/products Get the latest extension manager from Adobe at http://www.adobe.com/exchange/em_download/ Open the .zxp file if you’re using Dreamweaver CC or the .mxp file for Dreamweaver CS+ (the extension manager should start-up) and install the extension. If you experience any problems contact our Live Support! Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 13 of 54 DMXzone Bootstrap 3 Manual DMXzone The Basics: Convert a Page from Bootstrap 2 to Bootstrap 3 In this tutorial we will show you how to convert your Bootstrap 2 page to Bootstrap 3. *You can also check out the video. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 14 of 54 DMXzone Bootstrap 3 Manual DMXzone How to do it 1. We have a Bootstrap 2 based page loaded in Dreamweaver. Now, select commands (1) and choose convert to Bootstrap 3 (2). Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 15 of 54 DMXzone Bootstrap 3 Manual DMXzone 2. A message asking you to convert the current page to Bootstrap 3 appears. Click the OK button. 3. The progress indicator window opens. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 16 of 54 DMXzone Bootstrap 3 Manual DMXzone 4. A message notifies you when the conversion is complete. Click the OK button. 5. Now, select the Bootstrap 3 grid tab where you can adjust your layout for different devices using the Bootstrap 3 Grid floating panel. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 17 of 54 DMXzone Bootstrap 3 Manual DMXzone 6. Let’s preview the result in Live View. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 18 of 54 DMXzone Bootstrap 3 Manual DMXzone 7. That’s how you can convert your Bootstrap 2 page to Bootstrap 3. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 19 of 54 DMXzone Bootstrap 3 Manual DMXzone The Basics: Inserting DMXzone Bootstrap 3 on a Page In this tutorial we will show you how to insert DMXzone Bootstrap 3 on your page and configure its options. *You can also check out the video. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 20 of 54 DMXzone Bootstrap 3 Manual DMXzone How to do it 1. We’re going to show you how to insert DMXzone Bootstrap 3 on your page and configure its option. In order to do that, click the insert button (1) and select DMXzone Bootstrap 3 (2). Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 21 of 54 DMXzone Bootstrap 3 Manual DMXzone 2. The DMXzone Bootstrap 3 code is inserted on our page. Select window (1) and choose the Bootstrap 3 grid (2). Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 22 of 54 DMXzone Bootstrap 3 Manual DMXzone 3. The Bootstrap 3 Grid floater appears. You can pin it to any side of your Dreamweaver window. We place it next to the properties inspector. 4. Now you can access the DMXzone Bootstrap 3 Grid options and start building your layout. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 23 of 54 DMXzone Bootstrap 3 Manual DMXzone 5. You can change the DMXzone Bootstrap 3 files include options. Select commands (1) and choose the DMXzone Bootstrap 3 options menu item (2). Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 24 of 54 DMXzone Bootstrap 3 Manual DMXzone 6. There are 3 different include options: Local Normal, Local Minified and Public CDN. We use the default Local Minified include option (1). You can select whether to use the default CSS and JS files paths or browse to your own custom files. We do not want to use the Bootstrap Theme CSS file, so we just delete it from the list (2). You can also enable or disable the Automatic File Update option (3). When we’re done, we click OK. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 25 of 54 DMXzone Bootstrap 3 Manual DMXzone 7. That’s how you can insert DMXzone Bootstrap 3 on your page and configure its options Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 26 of 54 DMXzone Bootstrap 3 Manual DMXzone Advanced: Using Pull and Push Options in DMXzone Bootstrap 3 In this tutorial we will show you how to use the pull and push options integrated in DMXzone Bootstrap 3 to change the order of the cells in a row. *You can also check out the video. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 27 of 54 DMXzone Bootstrap 3 Manual DMXzone How to do it 1. We start by adding a container from the add container button. 2. Let’s add another cell on the right. Click the add cell right button. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 28 of 54 DMXzone Bootstrap 3 Manual DMXzone 3. We change the default text of the cells headings (1) and the width of the left cell. In order to change the width, click the expand to right button twice (2). Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 29 of 54 DMXzone Bootstrap 3 Manual DMXzone 4. The width of the left cell is now 8 columns and the right cell is 4 columns. We want to change the cells order for the current device size (Large Devices). Select the right cell (1) and enter 8 in the pull field (2), this will move the selected cell over 8 columns to the left Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 30 of 54 DMXzone Bootstrap 3 Manual DMXzone 5. Select the 8 columns wide cell (1) and enter 4 in the push field (2). This will move the selected cell over 4 columns to the right. 6. That’s how you can use the pull and push options integrated in DMXzone Bootstrap 3 to change the order of the cells in a row. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 31 of 54 DMXzone Bootstrap 3 Manual DMXzone Advanced: Using the Cell Offset Options in DMXzone Bootstrap 3 In this tutorial we will show you how to use the cell offset options integrated in DMXzone Bootstrap 3. *You can also check out the video. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 32 of 54 DMXzone Bootstrap 3 Manual DMXzone How to do it 1. First, we add a container from the add container button. 2. Select the cell that we just added on our page (1). The cell properties appear in the Bootstrap 3 Grid floating panel. We decrease the cell width to 10 columns using the decrease width button (2). Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 33 of 54 DMXzone Bootstrap 3 Manual DMXzone 3. Now let’s add offset to our cell. The offset option moves cells to the right by increasing the left margin of a cell by X columns. Click the increase offset button (1) and the cell I moved by one column (2). 4. That’s how easy it is to use the cell offset options integrated in DMXzone Bootstrap 3. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 34 of 54 DMXzone Bootstrap 3 Manual DMXzone Advanced: Building Nested Layouts with DMXzone Bootstrap 3 In this tutorial we will show you how to build nested layouts using DMXzone Bootstrap 3. *You can also check out the video. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 35 of 54 DMXzone Bootstrap 3 Manual DMXzone How to do it 1. We have a container with two cells on our page. Click inside the cell 2 (1) and click the add row inside button (2). 2. Select the newly created cell inside the main cell (1) and click the add cell right button (2). Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 36 of 54 DMXzone Bootstrap 3 Manual DMXzone 3. This way we nested a row containing two cells inside the main cell. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 37 of 54 DMXzone Bootstrap 3 Manual DMXzone Advanced: Building Page with Mobile First Approach In this tutorial we will show you how to build your page layout with DMXzone Bootstrap 3 using a mobile first approach. *You can also check out the video. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 38 of 54 DMXzone Bootstrap 3 Manual DMXzone How to do it 1. First, we need to add Bootstrap 3 on our page so click the insert button (1) and select DMXzone Bootstrap 3 (2). Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 39 of 54 DMXzone Bootstrap 3 Manual DMXzone 2. Open the active view select menu and choose extra small devices. There are four types of devices: Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px) Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 40 of 54 DMXzone Bootstrap 3 Manual DMXzone 3. On the empty page, click the add container button (1) and delete the default text that is placed inside the container (2). 4. This will be our page header, which contains the site name (1). The page header is 12 columns wide on extra small devices (2). Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 41 of 54 DMXzone Bootstrap 3 Manual DMXzone 5. Select the site name (1) and go to the properties tab (2). 6. Select the format combo box and choose heading 4 item (1), then switch back to Bootstrap 3 grid tab (2). Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 42 of 54 DMXzone Bootstrap 3 Manual DMXzone 7. Click the add row below button (1) and edit the default text (2). 8. We select text align: center for this cell (1). This is the site main heading, which is also 12 columns wide. Now, click the add row below button (2). Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 43 of 54 DMXzone Bootstrap 3 Manual DMXzone 9. We edit the default text and now we have a main heading container and another container with a subheading. We are going to add 3 more containers with subheadings from the duplicate cell button (2). Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 44 of 54 DMXzone Bootstrap 3 Manual DMXzone 10. When we are done adding the rest of the subheading containers we style the subheadings using the properties inspector. In the properties tab (1), select heading 5 (2) from the format combo box. Select the Bootstrap 3 grid tab (3) when you are done styling the subheadings Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 45 of 54 DMXzone Bootstrap 3 Manual DMXzone 11. We are done configuring the layout for extra small devices. Now open the active view combo box and select small devices. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 46 of 54 DMXzone Bootstrap 3 Manual DMXzone 12. We want to make some changes to the layout for small devices. Click inside the first subheading cell (1) and click the contract from right button (2). 13. The smart contract control automatically converts the width of the selected cell and the one on the right to 6 columns. We do the same with the other two cells below. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 47 of 54 DMXzone Bootstrap 3 Manual DMXzone 14. Select the main page heading cell (1) and click the decrease width button twice (2). This way we make it 10 columns wide. 15. Now click the increase offset button to put 1 column offset to the main heading cell and we are done customizing the layout for small devices. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 48 of 54 DMXzone Bootstrap 3 Manual DMXzone 16. Let’s customize our layout for medium devices by selecting the option from the active combo box. 17. Click inside the first subheading cell (1), click the contract from right button (2) and do the same with the rest of the subheading cells below. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 49 of 54 DMXzone Bootstrap 3 Manual DMXzone 18. Select the main heading cell (1) and decrease the cell width to 8 columns (2). Add also 2 columns offset (3). 19. We are done customizing the page layout for medium devices. Select large devices item from the active view combo box. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 50 of 54 DMXzone Bootstrap 3 Manual DMXzone 20. On large devices we want to show all of the subheading cells on one line. Select the first cell (1) and click the contract from right button (2). We do the same with the other two cells. 21. Now we are going to add some content that will be visible only on large devices. Click inside the subheading row (1) and add a row below (2). Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 51 of 54 DMXzone Bootstrap 3 Manual DMXzone 22. We change the default text (1) and from the show on combo box we select the large only item (2). 23. Now you can save your work and preview the results in Live View mode. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 52 of 54 DMXzone Bootstrap 3 Manual DMXzone Video: Inserting DMXzone Bootstrap 3 on a Page With this movie we will show you how to insert DMXzone Bootstrap 3 on your page and configure its options. Video: Convert a Page with Bootstrap 2 to Bootstrap 3 With this movie we will show you how to convert your Bootstrap 2 based page to Bootstrap 3. Video: Using Pull and Push Options in DMXzone Bootstrap 3 With this movie we will show you how to use the pull and push options integrated in DMXzone Bootstrap 3 to change the order of the cells in a row. Video: Using the Cell Offset Options in DMXzone Bootstrap 3 With this movie we will show you how to use the cell offset options integrated in DMXzone Bootstrap 3. Video: Building Nested Layouts with DMXzone Bootstrap 3 With this movie we will show you how to build nested layouts using DMXzone Bootstrap 3. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 53 of 54 DMXzone Bootstrap 3 Manual DMXzone Video: Building Page with Mobile First Approach With this movie we will show you how to build nested layouts using DMXzone Bootstrap 3. Copyright © 2014 DM Xzone.com All Rights Reserved To get more go to DM Xzone.com Page 54 of 54
© Copyright 2024