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.

Bootstrap 3 Elements and Bootstrap 3 Navigation are already available!

Features

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, that is the grid for that size and above.


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


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


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


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


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


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


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


Videos


  • Full Width Layout with DMXzone Bootstrap 3
    Design – Create a full width page layout using DMXzone Bootstrap 3 and DMXzone Bootstrap 3 Elements
  • Adding a Scalable Headline in your Page Header
    – Learn how to add scalable headlines
  • Create Fixed to Bottom Icon Menu
    Interactivity – Creating a fixed to bottom icon menu
  • Using DMXzone Bootswatch
    Design – Learn how to use DMXzone bootswatch
  • Add Dynamic Dropdowns to a Navbar
    Databases – Learn how to add dynamic dropdowns in DMXzone Bootstrap 3 Navigation navbar
  • Add Contextual Dropdowns to your Content
    Design – Add contextual dropdown buttons in your content
  • Create Onscroll Navigation
    Design – A single page website with a fixed to top navbar which automatically highlights the active nav items
  • Create a Vertical Sidebar Nav
    Design – Create a vertical sidebar nav using DMXzone Bootstrap 3 Navigation
  • Use Nav Dropdowns in DMXzone Bootstrap 3 Navigation
    – Use nav dropdowns in DMXzone Bootstrap 3 Navigation
  • Add DMXzone Bootstrap 3 Navigation Navbar
    – Add DMXzone Bootstrap 3 Navigation navbar on your page
  • Add DMXozne Bootstrap 3 Navigation Nav
    – Add DMXzone Bootstrap 3 Navigation nav on your page
  • Enable DMXzone Bootstrap 3 Navigation
    – Enable Bootstrap 3 Navigation inspector floating panel in Dreamweaver
  • Control the Returned Results by HTML5 Data Bindings
    Databases – Control the number of HTML5 Data Bindings results displayed on your page
  • Validating If a Record Exists in a Database
    – Inline Ajax validation for existing/nonexistent record in a database
  • Custom Supersized Controls with Bootstrap 3 Elements
    – Control DMXzone Supersized with custom Bootstrap 3 Elements controls
  • Dynamic Responsive Thumbnail Gallery with Bootstrap 3
    – Learn how to create a dynamic responsive thumbnails gallery
  • Using DMXzone Bootstrap 3 List Group and Panel Elements
    – Learn how to use Bootstrap 3 list group and panel elements
  • Using Bootstrap 3 Thumbnails and Label Elements
    – Learn how to use Bootstrap 3 thumbnails and label elements
  • Using Bootstrap 3 Button Elements
    – Learn how to use Bootstrap 3 button elements
  • Using Bootstrap 3 Table Elements
    – Learn how to use Bootstrap 3 table elements
  • Using Bootstrap 3 Typography Elements
    – Learn how to use Bootstrap 3 typography elements
  • Accessing DMXzone Bootstrap 3 Elements
    – Learn how to access Bootstrap 3 Elements
  • Using HTML5 Parallax Slider on Responsive Bootstrap 3 Pages
    – Learn how to use Parallax Slider on responsive pages
  • Convert Bootstrap 2 Based Page to Bootstrap 3
    – Learn how to convert your Bootstrap 2 page to Bootstrap 3
  • Building Page with Mobile First Approach
    – Learn how to build a page with mobile first approach
  • Building Nested Layouts with DMXzone Bootstrap 3
    – Learn how to build nested layouts
  • Using the Cell Offset Options in DMXzone Bootstrap 3
    – Learn how to use the cell offset options
  • Using Pull and Push Options in DMXzone Bootstrap 3
    – Learn how to use the pull and push options
  • Inserting DMXzone Bootstrap 3 on a Page
    – Learn how to insert Bootstrap 3 on your page
Requirements
Type: Behavior
License: External link
Product: Dreamweaver CS5.5, Dreamweaver CS6, Dreamweaver CC
Used Technologies: CSS, Responsive
Screen Shot: External link
Tags: twitter, bootstrap 3, responsive, layour


History

Version 3.2.1

  • Improved Bootstrap Grid editing in Live View
  • Performance improvements in the latest Dreamweaver CC 2014.1

Version 3.2.0

  • Added support for the new responsive display modes for Bootstrap elements
  • Improved rendering in Dreamweaver Design Mode
  • Allow to add Bootstrap includes for new pages through the Bootstrap 3 Floating inspector
  • Included the latest Bootstrap 3.2.0
  • Improved UI

Version 3.1.3

  • Included the latest jQuery 1.11.1
  • Improved for Dreamweaver CC 2014
  • Improved for DMXzone Extension Manager

Version 3.1.2

Version 3.1.1

  • Support for the new Fluid Containers in Bootstrap 3
  • Full support for the new DMXzone Bootstrap 3 Navigation extension
  • Improved Bootstrap 3 CDN linking
  • Lowered extension requirements! Now it works in DW CS3+ but the rendering in Dreamweaver design view might not be optimal for versions under DW CS5.5 due to lack of media query support and modern browser rendering engine. Still, the extension is fully functional.

Version 3.1.0

  • Allow custom bootstrap builds with own paths to be used in the DMXzone Bootstrap 3 Options
  • Performance Speed gain in Dreamweaver design view rendering
  • Improved selection retaining after adding new grid rows
  • Improved UI for Dreamweaver on a Mac
  • Included the latest Bootstrap 3.1.1

Version 3.0.2

  • Full support for DMXzone Bootstrap 3 Elements
  • Included the latest Bootstrap 3.1.0
  • Full support for rendering the bootstrap glyphicons in Dreamweaver Design View
  • Improved pagination rendering in Design View
  • Great Rendering speed performance increased in Design View
  • fixed DW Mac bug causing crashes on load
  • Improved DW design view rendering of lists and form controls

Version 3.0.1

  • Greatly improved the speed of the page convert from Bootstrap 2 to 3
  • General speed improvement of the Dreamweaver integration
  • Improved Dreamweaver floating panel to be more responsive and retain focus of the current editing selection
  • Fixed some minor editing bugs

 

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 3




You must me logged in to write a review
Reviews

Be the first to place a review