Google+
4elements web design & consultancy

Shineyrock

web design & consultancy
Shineyrock web design & consultancy

Shineyrock

  1. web design en consultancy

blog

  1. Home
  2. blog
  3. lees
  4. Bootstrap3- Innovative CSS Features You’d Love To Know About
  • like 4 26

    Bootstrap3- Innovative CSS Features You’d Love To Know About

    1. May 2015
    2. Daily
    3. gelezen 799

    Author Bio :
    Sophia Phillips has been working as a professional in custom WordPress development services company and loves sharing information about leveraging multiple benefits of WordPress in the best possible manner. Currently, she has an impressive count of WordPress-related articles under her name.



    Having being released for web developers in August 2011 on GitHub, Bootstrap has serves as a remarkable free front-end framework for creating brilliant responsive designs. Loaded with HTML and CSS based design templates for forms, typography, tables, modals, buttons etc. Bootstrap can be used by anyone with the basic knowledge of HTML and CSS. If you’ve been an avid fan of Bootstrap, then you might be well familiar with the release of its version 3. While a lot has already been spoken about the mobile-first styles which form a crucial component of the core framework, there are many other CSS features which must not be missed by a developer. This is exactly what my post is all about. Here, I’ve jotted down some of the eye-catchy CSS features that have been incorporated into this latest Bootstrap release named version 3. So, let’s get to know more about these CSS features.


    1. Images are fully responsive by default
    Unlike Bootstrap2 where images weren’t responsive by default, in Bootstrap3, images are fully responsive via the perfect use of tag. Additionally, the users are also rendered the flexibility of extending the responsiveness of images by addition of img-responsive to any of the tags. Doing this would ensure that the height and width of image stays in proportion to each other even while the image is being scaled. Moreover, the name of img-polaroid class(the one which is being used for creating thumbnails) is being changed to img-thumbnail. This is being done for ensuring that the name of this class is in syc with the other terms used throughout the library. A key point to be noted here is that the img-rounded and img-circle classes are still operational for Bootstrap3, thereby rendering a rounded-rectangle and circular thumbnail effect to the images.


    2. Changes in list elements
    While the list layout is exactly similar to what it was in Bootstrap2, some changes have been introduced in list elements. Just like the normal list elements which were made up of

    < ul>, < dl> and < ol>

    elements, the same concept is still applicable in case of Bootstrap3. Also, the list-unstyled and list-inline along with dl-horizontal classes available for definition lists are also similar to what they were in the version 2 of Bootstrap.


    3. Changes to image’s visibility
    In Bootstrap2, under typography classes, a set of color classes was introduced. This was primarily used for setting the color of text element to the same colors as used in other elements available within the framework. With Bootstrap3, this concept takes a new step with the introduction of a scenario wherein contextual backgrounds would also use the colors for the text element. One of the greatest advantages of this add-on feature is that if you opt for using the contextual color classes on anchor tags and somewhere else where there’s a use of hover-over set by default, then the colors would automatically dim slightly for showcasing that they have been hovered over by the viewer. When it comes to naming the color-based classes, the classes available here include: text-muted, text-primary, text-success, text-warning, text-info and text-danger for span, paragraph and a range of other inline or block-based text elements. Additionally, for background colors, class names include bg-primary, bg-success, bg-warning, bg-info and bg-danger.


    4. Table changes
    While the tables are still styled the same way as they were in Bootstrap2, table striping now utilizes :nth-child pseudo selector. That means, the table in Bootstrap3 no longer works in IE8 or an earlier browser version. Quite similar to Bootstrap2, even in Bootstrap3, tables must be constructed with the help of a full range of

    < thead>, < table> and < tbody>

    HTML elements. Have a look at this example:

    < table class="table">

    < thead>

    < tr>

    < th>

    Heading 1

    < th>

    Heading 2

    < th>

    Heading 3

    < /tr>

    < /thead>

    < tbody>

    < tr>

    < td>

    ABC

    < td>

    PQR

    < td>

    XYZ

    < /tr>

    < tr>

    < td>

    ABC

    < td>

    PQR

    < td>

    XYZ

    < /tr>

    < /tbody>

    < /table>

    The output achieved from the above markup is shown below:




    In addition to above, there has been two latest additions to classes that are utilized for supporting tables. Firstly, there is an innovative responsive class which considers the size of the grid system and provides a realigned table or vertical scroll bars so as to fit the varied size displays. Secondly, the classes have been enriched with an ability to use the prior mentioned color row classes on individual cells instead of just the rows, as was prevalent in case of Bootstrap2.


    5. Changes in typography
    While the multiple classes which form Bootstrap 3’s typography section haven’t undergone much of a change like the other elements, the added flexibility of using

    < small>

    in line with any of the header element has eliminated any extra markup. That means, you just have to work on the markup only when you want the block heading to be underlined using a separate paragraph margin. 

    Conclusion
    After having a good drive through these absolutely stunning CSS features available in Bootstrap3, I’m quite sure you too would have decided to leverage the same in your upcoming web development project.

    Photo

    martijn broeders

    founder/ strategic creative bij shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    telefoon: 434 210 0245
    4
    Plaats reactie...
    4elements
    Comments

Per - categorie

    Op - datum

      Copyright © 1999 - 2025 Shineyrock web design en consultancy, Alle rechten voorbehouden / Algemene voorwaarden / Sitemap: XML, HTML, Images, Mobile, News