Bootstrap 4, What's new

What is this?

On front-end world, developers have been using Bootstrap 3 (previous version) for everything because this is a framework which provide a lot features to build a huge, beautiful and adaptative web page.

Learn

Right now, bootstrap 4 is in alpha version, but we can start learning this tool because is the first release and won't have drastical changes.

Of course, it comes with new features.

Grid System

Now you can add automatic columns, so you won't worry about do exact rows of 12 columns

Interesting for responsive web applications

Cards

Cards replace Bootstrap 3's old panels and wells. Cards are defined as a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Useful for movile uses.

JavaScript

For most users this won't matter much, but all of the plugins have been written in ES6 and compiled with Babel. This means maintaining the plugins will be a lot easier.

Great to integrate with modern tools

Of course, you can check more inforation on oficial documentation or excelente post like scotch.

How Start?

If you want start, you can copy and paste code above in a html extension file.

It's to easy if you know Bootstrap 3, or if you want to learn to programming, you can visit w3school

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>

ENGLISH EXPRESSION

lunes, 28 de agosto de 2017