40% OFF FOR NEW LICENSES AND RENEWALS BUY NOW

As we know, Bootstrap is a front-end framework that helps web developers develop pages with mobile technology (responsive) without having to enter a CSS line. In addition, the Bootstrap has a variety of components (plugins) in JavaScript (jQuery) that help the designer to implement tootlip, menu-dropdown, modal, carousel, slideshow, among others, without difficulty; just adding some settings in the code, without the need to create scripts and more scripts.

So today we’ll talk about how to create and configure buttons using the bootstrap.

The buttons are created using the tag <button> </ button> , but the bootstrap always gives a more harmonious look for the front end. Thus, only by including classes of this library, we transform a common and unstyled button into a button with style. To create a button, you must use the code:

<button type="button">Button Name</button>
001

To add the bootstrap classes, we need to include the links of the bootstrap library. They are these three:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

The bootstrap classes that define the color pattern are: btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger, btn-link.

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
002

We can also set the size of the buttons by adding one more class to the button using btn-lg, btn-md, btn-sm, btn-xs:

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
003

In this way, we will have more presentable buttons using bootstrap. To use it within Scriptcase, you can create a field label receiving the button code or replacing the button class using jQuery.

For more information, visit: http://www.w3schools.com/bootstrap/bootstrap_buttons.asp.

 

Scriptcase Buttons

Recently we have separated, related to the themes of applications, the CSS settings of the buttons. Today they are two totally separated things from each other. To help our customers create advanced themes for their buttons, we have created an authoring tool of the themes that can be found in the Layout menu -> “CSS of the buttons.”

004

The tool allows you to upload images, icons and configure the main possible CSS elements of a button.

005
006

With the template created, we must enable it within the desired application in the Layout menu of the application -> Display -> Button.

007

 

That way you have the possibility to create your buttons’ themes within the Scriptcase even without an advanced knowledge on the subject.
Want to know more about the best web development tool on the market? Click here and get to know Scriptcase.

You might also like…

Cache technique in PHP

Cache technique in PHP In this example we will check the actual optimization using a small scri...

A look at Scriptcase 9

In a daily basis this tool has given me great satisfaction, and very good and fast results in terms ...

Deep Data: Is it possible when you’re non-profit?

Evan Liebovitch talks about deep data and how to document the needs of a non-profit while using Scri...

Comment this post

Get new posts, resources, offers and more each week.

We will use the information you provide to update you about our Newsletter and Special Offers. You can unsubscribe any time you want by clinck in a link in the footer of any email you receive from us, or by contacting us at sales@scriptcase.net. Learn more about our Privacy Police.