Diogo Cardante

Bootstrap: introdução à biblioteca CSS mais popular do mundo

O Bootstrap é a framework baseada em HTML, CSS e JavaScript mais popular para a criação de websites responsivos e direcionados para plataformas móveis.

Com o crescimento incessante de dispositivos móveis em todo o mundo, tornou-se clara a necessidade de possuir um website responsivo, e ao aplicar uma abordagem mobile-first (direcionada especificamente para plataformas móveis), esta framework revelou-se uma ferramenta indispensável e tornou-se cada vez mais popular, ano após ano, maioritariamente devido às suas inúmeras funcionalidades e facilidade de utilização. Um dos aspetos mais essenciais desta framework, cujo representa a base para construir um layout organizado e estruturado, é o grid (grelha). O Bootstrap foi desenvolvido com um poderoso 12-Column Grid System (Sistema de Grelha com 12 Colunas), que permite aos developers organizarem e alinharem o conteúdo numa grelha completamente personalizável e responsiva. A grelha ajusta-se de acordo com a resolução do dispositivo ou dimensão do viewport (“janela de visualização”), tornando o conteúdo do website interativo e agradável tanto para utilizadores de dispositivos móveis, como para utilizadores de desktop.

Para além disso, o Bootstrap providencia um estilo base para a maioria dos elementos HTML, atribuindo ao website um aspeto mais polido, assim como uma lista vasta de componentes pré-concebidos e completamente responsivos, fáceis de integrar e personalizar. Em termos de personalização, o Bootstrap permite a alteração do estilo base, tais como o tipo, cor e tamanho de letra, assim como a modificação de breakpoints existentes utilizados num layout em grelha, sobrepondo as regras CSS existentes com regras personalizadas, de acordo com o design do projeto.

O Bootstrap também poderá beneficiar aqueles que preferem construir um website responsivo sem qualquer base, sem assistência de qualquer biblioteca terciária, e utilizar código CSS pré-concebido e componentes de projetos anteriores para criar o mesmo resultado, ou quem tenha uma abordagem mais conservadora em aceitar as funcionalidades desta framework.

Portanto, como é que o Bootstrap beneficia este tipo de utilizadores?

Bem, se existir um projeto com uma data de entrega exigente, que envolva vários developers, o Bootstrap providencia consistência entre projetos e indivíduos (representa uma tecnologia bastante familiar), assim como velocidade no processo de desenvolvimento, graças às classes pré-concebidas, reduzindo a quantidade de trabalho e tempo necessária para escrever o código integralmente. É importante mencionar que o Bootstrap possui uma excelente compatibilidade entre diferentes browsers, sendo atualmente compatível com as versões mais recentes de todos os browsers mais populares (Chrome, Firefox, Safari, Microsoft Edge e Internet Explorer 10+), e um nível soberbo de suporte, possível através da gigantesca comunidade por detrás da framework. Ser completamente grátis e open source são os aspetos mais importantes a salientar. Antes de analisarmos alguns exemplos, vamos descobrir como é fácil começar com o Bootstrap.

Continuar a ler
Diogo CardanteBootstrap: introdução à biblioteca CSS mais popular do mundo
read more

Bootstrap: Introduction to the world’s most popular CSS library

Bootstrap is the most popular HTML, CSS and JavaScript based framework for developing responsive, mobile-first websites.

With the successive growth of mobile devices in the world, it is becoming clearer that having a responsive website is a must, and by taking a mobile-first approach, this framework has been revealed as an indispensable tool and became more popular year after year, mostly because of its feature-rich nature and ease of use. One of the most essential aspects of this framework, which represents the foundation on which to build an organised, structured layout, is its grid. Bootstrap is built on a powerful 12-Column Grid System, which allows developers to arrange and align content in a fully customisable, responsive grid. The grid adjusts according to the device resolution or viewport size, making the website content interactable and pleasant for both mobile and desktop users.

Beyond this, Bootstrap offers a base style for most HTML elements, making the website look more polished, as well as an extensive list of pre-built, fully-responsive components that are easy to integrate and customise. In terms of customisation, Bootstrap lets you change the base style, including fonts, colours and sizes, as well as modifying the existing breakpoints used in grid layout by overriding the existing CSS rules with custom ones according to the project design.

For those who prefer to build a responsive website from scratch, without the assistance of any 3rd party libraries, and who use ready-made CSS code and components from previous projects to achieve this, or who may tend to have a more conservative approach towards accepting its framework features, Bootstrap can also offer great benefits.

So, what are these benefits of Bootstrap?

Well, where you have a project with a tight schedule and with multiple developers involved, Bootstrap offers consistency between projects and people (it represents a commonly known technology) as well as speed in development, thanks to its pre-styled classes, which require much less effort and time than when creating everything from scratch. It´s important to mention that Bootstrap has good cross-browser compatibility, being currently compatible with all the latest major browsers (Chrome, Firefox, Safari, Microsoft Edge and Internet Explorer 10+) and excellent support, thanks to the huge community behind it. And, most importantly, it´s completely free and open-source. Before looking at some examples, let´s see how easy is to get started with Bootstrap.

Keep reading
Diogo CardanteBootstrap: Introduction to the world’s most popular CSS library
read more