DMXzone Bootstrap Elements is an amazing addition to the DMXzone Bootstrap extension. With its 35 extremely useful and ready to go elements you can design fantastic pages within minutes, directly in Dreamweaver. The extension comes with easy accessible elements panel and inspector floating panel where you can customize each element with just a few mouse clicks.
It includes a wide range of elements for typography, tables, forms, buttons, images, icons, pagination, layouts, thumbnails, media and many more. Supplied with lightweight designs, the elements can be styled for any page layout. Build your fully responsive pages with DMXzone Bootstrap and select from 35 different, fully customizable Bootstrap elements to bring your website to a whole new level!
You need to have DMXzone Bootstrap installed in Dreamweaver CS5.5+ in order to install 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 none, left, center or right. Also you can choose from six default lightweight styles (emphasis).
Paragraphs are by default 14px font size with a line height of 20px. In addition, paragraphs receive a bottom margin of half their line-height.
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 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 on a single line (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 on a single line (inline).
Add a list of terms, features or anything that needs a definition or explanation. From the element properties you can make the list vertical as well.
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.
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 customize the labels with some predefined lightweight styles.
You can add buttons with different sizes (large, default, small and mini) 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. Note that the rounded corners are not supported in IE9.
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 140 icons supplied in the extension that you can use on any button size or design. Each icon has a white version for dark button backgrounds.
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 polaroid-like. Note that the rounded corners and circle are not supported in IE7-8 due to the lack of support.
140 icons in sprite form, available in dark gray (default)for light backgrounds and white for dark ones.
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. From the element properties you can style the badges with lightweight designs.
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 any IE version.
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 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox. Versions earlier than Internet Explorer 10 and Opera 12 do 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.
Creating Responsive Thumbnail Gallery with File Genie
Showing Button Group When Hovering Thumbnail
Using DMXzone Bootstrap Buttons, Images, Icons and Pagination Elements
Using DMXzone Bootstrap Table and Form Elements
Using DMXzone Bootstrap Typography Elements
Accessing DMXzone Bootstrap Elements
This Extension Requires:
The perfect site layout in just a few minutes
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 ...
- Support for the latest DMXzone Bootstrap 1.1.0
- Updated DMXzone Head Include global component to support full paths from CDN