Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Introduction to Bootstrap 3

See in this article a brief introduction to Twitter Bootstrap 3. Well see the main innovations and changes included in this new version of the framework

This article aims to present some news that came along with the third version of Bootstrap framework Twiter.

The first change we notice is the new design of this version: those gradients effects predominate in version 2 are no longer present in the new version.

Bootstrap CDN

You can from now to import the framework files via CDN's feature. Links for use can be seen in Listing 1.

Listing 1. References of links to CDN

 <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
   
  <!-- Optional theme -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
   
  <!-- Latest compiled and minified JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

Notice in Listing 1 that links each refers to his minificada version, however, can we access the version not minificada links. To do this, simply remove the min length of the file name. See in Listing 2 would look like:

Listing 2. References to not minified links to CDN

 <!-- Latest CSS -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css">
   
  <!-- Optional theme -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.css">
   
  <!-- Latest JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.js"></script>

Disable responsive features

For those who already know or have worked with the framework, it is known that one of the advantages of its use are its responsive capabilities. In this version you can disable these features being included in own framework documentation steps to disable them. See below:

1.Omit the tag <meta name = "viewport">, as Listing 3 below:

Listing 3. Tag to be omitted from the head of the document

<!-- Do not use the tag below the header of your HTML document -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. To override the width property of the container class in own css file framework or other css file. See the example in Listing 4 below:

Listing 4. Example override the width property

 /* Override example of the width property */
  .container {
      width: 970px;
  }

3. Do not use classes that have extensible behavior, such as: navbar-collapse.

4. Use the col-xs-* class to determine the widths of the grid in the layout.

In http://getbootstrap.com/examples/non-responsive/, we can see an example of a layout unresponsive. Take the opportunity to view the source code to enhance understanding.

Responsive Images

Using img-responsive class can make images of our website and/or application to adapt to device screen size the user is using. See the example in Listing 5.

Listing 5. Example of use of the img-responsive class

<img class="img-responsive" src="image1.jpg">

This is a very good resource for us developers, but it is important to bear in mind that in the case of responsive concept, ie to adapt to any devices, not enough to use in the case of images, the "downsizing"; we must take into consideration the size of this image relative to the user's connection, consider whether certain image at a certain resolution will have a minimum of understanding for the user.

Panels

The panels work like boxes that can store/group some elements of our DOM. This component lets our site/application with better organization and more professional. See in Listing 6 a simple example:

Listing 6. Basic panel of the use example

 <div class="panel panel-default">
      <div class="panel-body">Basic panel example </div>
  </div>

See Figure 1 as is the representation of the Listing 6 code.

Figure 1. Representation of the Basic panel.

Panel with heading and footer

We can easily add to our panel a header and footer. See in Listing 7 below:

Listing 7. Sample panel with header and footer

 <div class="panel panel-default">
      <div class="panel-heading">Header</div>
      <div class="panel-body">
          Content
      </div>
      <div class="panel-footer">Footer</div>
  </div>

Contextual alternatives

As with other components, Bootstrap gives us some customization classes that fit in certain contexts. In the panel works the same way, just add a class to the div element and see the result. See in Listing 8 to use these classes:

Listing 8. Example of use of the customizable classes of panels

 Panel default
  <div class="panel panel-default">
      <div class="panel-heading">Header</div>
      <div class="panel-body">
          Content
      </div>
  </div>
  Panel primary
  <div class="panel panel- primary ">
      <div class="panel-heading">Header</div>
      <div class="panel-body">
          Content
      </div>
  </div>
  Panel success
  <div class="panel panel- success ">
      <div class="panel-heading">Header</div>
      <div class="panel-body">
          Content
      </div>
  </div>
  Panel info
  <div class="panel panel- info ">
      <div class="panel-heading">Header</div>
      <div class="panel-body">
          Content
      </div>
  </div>
  Panel warning
  <div class="panel panel- warning ">
      <div class="panel-heading">Header</div>
      <div class="panel-body">
          Content
      </div>
  </div>
  Panel danger
  <div class="panel panel- danger ">
      <div class="panel-heading">Header</div>
      <div class="panel-body">
          Content
      </div>
  </div>

In the examples described above, we can combine the panels with other components according to our needs, for example, tables or groups list.

List Groups

List groups is a component that allows us to give the user a more organized and elegant display lists of elements. We can also combine it with a number of other components as our need.

See in Listing 9 a basic example of using list groups:

Listing 9. Example basic list groups.

My list group
<ul class="list-group">
      <li class="list-group-item">Item 1</li>
      <li class="list-group-item">Item 2</li>
      <li class="list-group-item">Item 3</li>
      <li class="list-group-item">Item 4</li>
      <li class="list-group-item">Item 5</li>
  </ul>  

See Figure 2 as is the representation of the Listing 9 code.

Figure 2. Basic representation of a list group

We can use the <a> tag instead of a <ul> list, thereby giving an elegant visual component and still have an effect by placing the mouse cursor over the link. See the example in Listing 10.

Listing 10. Example of using the list groups with <a> tag

 <div class="list-group">
      <a href="#" class="list-group-item active">Item 1</a>
      <a href="#" class="list-group-item">Item 2</a>
      <a href="#" class="list-group-item">Item 3</a>
      <a href="#" class="list-group-item">Item 4</a>
      <a href="#" class="list-group-item">Item 5</a>
  </div>

Figure 3 is therepresentation of the listing 10 code.

Figure 3. Listing 10 code representation

We can also make a simple customization at the component content and tailor it according to our need. See in Listing 11 is an example:

Listing 11. Example of customization component content

 div class="list-group">
      <a href="#" class="list-group-item active">
          <h4 class="list-group-item-heading">Item 1</h4>
          <p class="list-group-item-text">content to item 1</p>
      </a>
          
      <a href="#" class="list-group-item">
          <h4 class="list-group-item-heading">Item 2</h4>
          <p class="list-group-item-text">content to item 2</p>
      </a>
          
      <a href="#" class="list-group-item">
          <h4 class="list-group-item-heading">Item 3</h4>
          <p class="list-group-item-text">content to item 3</p>
      </a>
  </div>

Note that in Listing 11 only modified the internal content within the list item, or you can use the component in different ways according to the needs of each project.

Icons

The icons were separated in a repository share, and have also added more icons now having about 200 of them at our disposal. The use of syntax has changed, we must now use beyond the class regarding the icon should also use its base class. See in Listing 12 is an example:

Listing 12. Example of using icons

 <span class="glyphicon glyphicon-user"></span> glyphicon glyphicon-user
  <hr>
  <span class="glyphicon glyphicon-warning-sign"></span> glyphicon glyphicon-warning-sign
  <hr>
  <span class="glyphicon glyphicon-share"></span> glyphicon glyphicon-share

Figure 4 is a representation of the Listing 12 code.

Figure 4. Representation of the Listing 12 code.

Note that we use the glyphicon base class and then the class regarding the icon as aforesaid. Note that we use the <span> tag, but you can also use the <i> as version 2 of Bootstrap.

Grids

The grid system Bootstrap 3 has undergone some changes in its syntax, version 2 we used the .span* class to determine the width of our grids, this version will use the .col-xs-*, .col-sm-*, .col-md- * e .col-lg-* classes as our need.

  • col-xs-*: It can be used for devices with resolution (width) less than 768px. Ex.: Smarphones;
  • col-sm-*: It can be used for devices with resolutions of 768 by 991 pixels. Ex.: Tablets;
  • col-md-*: It can be used for devices with resolutions of 992 by 1199 pixels. Ex.: desktops;
  • col-lg-*: It can be used for devices with resolutions up to 1200 pixels. Ex.: desktops.

Conclusion

We arrived at the end of this article, it was only a brief introduction to some changes in this version 3 of Bootstrap.

Untilthe next one and thank you!

Links

Twiter documentation Bootstrap 3: http://getbootstrap.com/

Customizable download page: http://getbootstrap.com/customize/

Example not responsive layout: http://getbootstrap.com/examples/non-responsive/



Julio is a System analyst and enthusiast of Information Technology. He is currently a developer at iFactory Solutions company, working in the development of strategic systems, is also a JAVA instructor. He has knowledge and experi...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login