DMXzone Bootstrap

Twitter Bootstrap is the greatest solution for designing CSS based, responsive web layouts and now with the help of the DMXzone Bootstrap extension, it is fully integrated in Dreamweaver! Directly in its design view, you can now fully visual create fluid or fixed grid layouts and follow your work in progress for mobile and desktop browsers by selecting the desired size for mobile phones, tablets or desktop. With the responsive grid and the great design view integration it allows you to visually create even the most complicated grid layouts. The extension comes with 8 predesigned pages to get you started right away.

For even more power and additional 35 ready to go Bootstrap Elements check the DMXzone Bootstrap Elements Extension!

Bootstrap 3 is already available as Dreamweaver extension!

Features

General Features

  • Twitter Bootstrap 12-column responsive grid - The responsive grid system ensures proper content proportions for different resolutions and devices.


  • Fully responsive layout within Dreamweaver - When designing a responsive layout you can follow your work in progress for mobile and desktop browsers directly in Dreamweaver by selecting the desired size for mobile phones, tablets or desktop.


  • Support for advanced grid layouts and nested columns - You can add as many rows as you wish within a column.


  • Support for fluid or fixed grid layouts - Design a common fixed-width layout or a fluid, two-column one.
    • Fixed grid layout


    • Fluid grid layout


  • Eight great Bootstrap starter pages integrated in Dreamweaver - You can even use the supplied sample designs and edit them fully visual in Dreamweaver design view.


  • Great Design View integration - The DMXzone Bootstrap allows you to add/delete cells, rows and containers as well as merge cells and spread them in just a mouse click time.


  • Supported devices - DMXzone Bootstrap supports different devices and screen resolutions.

  • DMXzone Boostrap 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.
  • Automatic file copy and include - If you don't like to automatically copy bootstrap files and inclusion, you can switch it off! 

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
  • 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

Property inspector

  • Increase offset - increases the number of columns before the cell
  • Decrease offset - decreases the number of columns before the cell
  • 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
Showcases


Videos


  • Convert Bootstrap 2 Based Page to Bootstrap 3
    – Learn how to convert your Bootstrap 2 page to Bootstrap 3
  • Building a Dynamic Responsive Portfolio Page
    – Learn how to create a dynamic and responsive page
  • Creating Responsive Thumbnail Gallery with File Genie
    – Learn how to create a Responsive Thumbnail Gallery
  • Using DMXzone Bootstrap Include Options
    – Select the way you include your Bootstrap Files
  • Showing Button Group When Hovering Thumbnail
    – Show Button Group when a Thumbnail element is hovered
  • Using DMXzone Bootstrap Buttons, Images, Icons and Pagination Elements
    – Learn how to implement buttons, images, icons and pagination
  • Using DMXzone Bootstrap Table and Form Elements
    – Learn how to use table and form elements
  • Using DMXzone Bootstrap Typography Elements
    – Learn how to use the Typography elements
  • Accessing DMXzone Bootstrap Elements
    – Learn how to access Bootstrap elements and the inspector floatinfg panel.
  • Editing the Bootstrap Starter Pages in Dreamweaver
    – Edit the starter pages and create your own
  • Building Nested Responsive Layouts
    – Build responsive layouts with DMXzone Bootstrap
  • Introducing Bootstrap CSS Grid Layout Basics
    – Create three equal blocks that contain headings, some text and buttons in Dreamweaver
  • Basic Usage of DMXzone Bootstrap
    – Learn how to use the DMXzone Bootstrap in Dreamweaver
  • Discover the Magic of Twitter Bootstrap in Dreamweaver
    – The perfect site layout in 4 minutes
Requirements
Type: Suite
Product: Dreamweaver CS5.5, Dreamweaver CS6, Dreamweaver CC
Browser: IE 7, Chrome 9+, IE 8, Opera 10+, IE 9, Safari 5+, Firefox 4+, Chrome 10+, Opera 11
Used Technologies: CSS


History

Version 1.2.1

Version 1.2.0

Version 1.1.0

  • New DMXzone Boostrap 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.
  • New option for automatic file copy and include - If you don't like to automaticaly copy bootstrap files and inclusion, you can switch it off!
  • Updated DMXzone Head Include global component to support full paths from CDN
  • Included latest jQuery 1.10.1
  • Improved Dreamweaver CC installation support

Version 1.0.1

  • NEW: Fully rendering the Twitter Bootstrap icons from Glyphicons in Dreamweaver Design View!
  • NEW: Full support for DMXzone Bootstrap Elements extension!
  • Fixed Bootstrap dependent files copy on clean Dreamweaver installations
  • Fixed Starter pages not copying the main bootstrap.css file
  • Set minimum requirement to DW CS5.5

 

George Petrov

George PetrovGeorge Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. His expertise in countless languages and technologies gives inspiration and teach valuable lessons on his website – DMXzone.com which is most popular for its over high-quality Dreamweaver extensions and templates.

See All Postings From George Petrov >>

Place your review about DMXzone Bootstrap




You must me logged in to write a review
Reviews

Be the first to place a review