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…

Reception of parameters via GET in applications of type Form

Sending a parameter to an application is always easy when done within the Scriptcase environment, bu...

Trends for web development in 2017

In this post you will see some Web Design, Digital Media and Development trends for 2017. Immers...

Basic Software Security Concepts Part 2

In the design phase, many critical and strategic decisions of software security architecture are tak...

Comment this post

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