DMXzone Bootstrap 3 Elements is the must have add-on if you want to use the full power of DMXzone Bootstrap 3. Its 37 ready to use elements is all you need for designing fully responsive layouts in minutes, directly in your Dreamweaver.
The extension features elements such as tables, forms, buttons, images and icons, and elements for typography, pagination, labels and badges, layouts, thumbnails, progress bars, alerts, media and the brand new list group and panels. All elements are fully customizable through the inspector floating panel and you can choose from various lightweight designs.
You need to have DMXzone Bootstrap 3 installed in Dreamweaver to use Elements!
The default title element is H3. You can change it with another heading between H1 and H6. From the element properties you can change the alignment to be default, left, center, right and justify. Also you can choose from six default lightweight styles (emphasis).
Paragraphs are by default 14px font size with a line height of 1.428. In addition, paragraphs receive a bottom margin of half their line-height (1-px by default).
Add contact information such as address, name, phone number, etc.
You can quote any block of content from another source within your page. Blockquote can be aligned to the left or pulled to the right.
Add a list of items with bullets, where the order doesn't matter. From the element properties you can remove the default styling and also show all list items inline.
Add a list of items with numbering, where the order does matter. From the element properties you can remove the default styling and also show all list items inline.
Add a list of terms, features or anything that needs a definition or explanation. From the element properties you can make the list also horizontal.
Add a table with as many rows and columns as you wish. From the element properties you can choose the table row style and also style the table with borders and rounded corners. You can enable the rows hover state and make it more compact by cutting cell padding in half by checking the condensed mode. Now your table can be also responsive.
Add a form where your users enter data for processing. From the element properties, the form can also be inline.
Add a search field to your forms, where your users will type in keywords to search through the content.
In the horizontal form, the labels and input fields are on the same line.
Add a simple input field with a label.
You can add buttons with different sizes (large, default, small and extra small) and choose one of the predefined lightweight designs. From the element properties you can make a button non-clickable by disabling it or make it fit the cell entirely by width.
If you need to use a text link that looks like a button, anchor button element is the right one to choose.
Button with icon
There are 200 icons supplied in the extension that you can use on any button size or design.
You can add as many buttons next to each other as you need. They can be with or without styling and icons. The alignment can be horizontal as well as vertical.
There are 4 styles you can add to the images - default, rounded corners, circle and thumbnail. Also you can set the images to be fully responsive.
200 icons in sprite form to be used in buttons, button groups for a toolbar, or prepended form inputs.
Add a simple pagination, great for apps and search results. From the element properties you can choose the position and the size of the paginator.
Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.
Quick links for simple pagination aligned to each side.
Add easy navigation that allows users to keep track of their locations within programs or documents.
Labels and Badges
Create eye catching labels and annotate text with inline labels. From the element properties you can style the labels with lightweight designs.
Add small and simple badges for displaying an indicator or count. They're commonly found in email clients or on mobile apps for push notification.
Add a lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites. From the element properties you can add a simple effect to give it an inset effect with padding and rounded corners.
Add text that is separated from the main body of text and appears at the top. From the elements properties it can be aligned center, left and right.
Use this element to add content on your page with a header, paragraph and button.
Add grids of photos, videos, products or anything that needs thumbnail display.
Add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.
Visualize the progression of an action with a progress bar. From the element properties you can customize the color and add striped effect. Also you can animate the stripes during process. Note that the animation is not supported in IE9 and below versions as well as in older versions of Firefox. Opera 12 does not support animations.
Stacked progress bar
Put multiple bars into the same progress bar to stack them. From the element properties you can use the same lightweight styles like the ones for buttons. Also they can be striped and animated.
Note: Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.
Add a simple text for a basic warning alert message with a close button that can be styled.
Add a longer warning alert message with description and close button.
Float a media object (images, video, audio) to the left or right of a content block.
You can use media inside list, which is useful for comment threads or articles lists.
List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content. You can also add badges to any list group item and it will automatically be positioned on the right.
You can put your content within panels to save space on your layout. Easily, you can add headings and make a panel more meaningful to a particular context by adding a background color.
Full Width Layout with DMXzone Bootstrap 3
Add Contextual Dropdowns to your Content
Control the Returned Results by HTML5 Data Bindings
Validating If a Record Exists in a Database
Custom Supersized Controls with Bootstrap 3 Elements
Dynamic Responsive Thumbnail Gallery with Bootstrap 3
Using DMXzone Bootstrap 3 List Group and Panel Elements
Using Bootstrap 3 Thumbnails and Label Elements
Using Bootstrap 3 Button Elements
Using Bootstrap 3 Table Elements
Using Bootstrap 3 Typography Elements
Accessing DMXzone Bootstrap 3 Elements
This Extension Requires:
Next generation perfect site layout in a few minutes
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 ...
- 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
- Included the latest jQuery 1.11.1
- Improved for Dreamweaver CC 2014
- Improved for DMXzone Extension Manager
- 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.