{"id":218,"date":"2011-10-04T00:22:13","date_gmt":"2011-10-04T00:22:13","guid":{"rendered":"http:\/\/blog.alexandremagno.net\/?p=218"},"modified":"2011-10-04T00:22:13","modified_gmt":"2011-10-04T00:22:13","slug":"lets-get-started-with-bootstrap","status":"publish","type":"post","link":"https:\/\/alexandremagno.net\/en\/2011\/10\/04\/lets-get-started-with-bootstrap\/","title":{"rendered":"Let&#8217;s get started with Bootstrap"},"content":{"rendered":"<p>Since design guides to interaction patterns, we wish to define the pattens and consistency in a web application to reuse the highest design elements as possible. Not just that, the Twitter, with the <a title=\"Bootstrap from Twitter\" href=\"http:\/\/twitter.github.com\/bootstrap\/#\">bootstrap<\/a> goes one step further and develop a framework where contains all website elements, following the twitter style, and Open Source! They called <a title=\"Bootstrap from Twitter\" href=\"http:\/\/twitter.github.com\/bootstrap\/#\">bootstrap.<\/a><\/p>\n<p>What the main advantages to have the Bootstraping process at beginning of the project or use the <a title=\"Twitter Bootstrap\" href=\"http:\/\/twitter.github.com\/bootstrap\/#\">twitter boostrap<\/a>? It seens so obvious: make a pattern for all design elements growing in a scale that the layout definition step are decrease in effort to in a ideal world they don&#8217;t exist anymore, cause the front-end developer would guess with the architect the right user experience, because the library is strong enough to supply all features in the application. Use the twitter bootstrap the way it is to prototyping is something really usefull, cause is simple, clean, agnostic and with all the CSS3 features.<\/p>\n<p>Other great advantage is to follow the same visual consistency across projects.<\/p>\n<p>The <a title=\"Bootstrap from Twitter\" href=\"http:\/\/twitter.github.com\/bootstrap\/#\">bootstrap<\/a> is organic, and according with new elements it&#8217;s growing and everything aims to go out to the limit. The minimum necessary to be bootstrap working:<\/p>\n<ul>\n<li>Grid elements<\/li>\n<li>Forms<\/li>\n<li>Typography<\/li>\n<li>Headers<\/li>\n<li>Lists<\/li>\n<li>Tables<\/li>\n<li>Buttons<\/li>\n<\/ul>\n<h3>How to show the importance of bootstraping your project<\/h3>\n<p>Sometimes is difficult you get negotiate this step. It just ignored or sometimes even started, but soon is discontinued and then abandoned. In this last case this is just a symptom of another wrong reason, probably there is no pattern and there&#8217;s always a difficult when need to define many pages e how a behavior should be in a some interaction, how form validations, for example.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Since design guides to interaction patterns, we wish to define the pattens and consistency in a web application to reuse the highest design elements as possible. Not just that, the Twitter, with the bootstrap goes one step further and develop a framework [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":221,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[72,71],"tags":[42,70,44,43],"class_list":["post-218","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-htmlcss-en","category-ux-en","tag-bootstrap","tag-interface","tag-snippet","tag-twitter"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Let&#039;s get started with Bootstrap - Webpoint<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/alexandremagno.net\/en\/2011\/10\/04\/lets-get-started-with-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Let&#039;s get started with Bootstrap - Webpoint\" \/>\n<meta property=\"og:description\" content=\"Since design guides to interaction patterns, we wish to define the pattens and consistency in a web application to reuse the highest design elements as possible. Not just that, the Twitter, with the bootstrap goes one step further and develop a framework [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/alexandremagno.net\/en\/2011\/10\/04\/lets-get-started-with-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"Webpoint\" \/>\n<meta property=\"article:published_time\" content=\"2011-10-04T00:22:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/alexandremagno.net\/wp-content\/uploads\/2011\/09\/twitter-bootstrap.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"416\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"alexanmtz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"alexanmtz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/alexandremagno.net\/en\/2011\/10\/04\/lets-get-started-with-bootstrap\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/alexandremagno.net\/en\/2011\/10\/04\/lets-get-started-with-bootstrap\/\"},\"author\":{\"name\":\"alexanmtz\",\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/person\/88a94d0648dd15b6080f207b6b2156af\"},\"headline\":\"Let&#8217;s get started with Bootstrap\",\"datePublished\":\"2011-10-04T00:22:13+00:00\",\"dateModified\":\"2011-10-04T00:22:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/alexandremagno.net\/en\/2011\/10\/04\/lets-get-started-with-bootstrap\/\"},\"wordCount\":291,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/alexandremagno.net\/#organization\"},\"keywords\":[\"bootstrap\",\"interface\",\"snippet\",\"twitter\"],\"articleSection\":[\"HTML\/CSS\",\"UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/alexandremagno.net\/en\/2011\/10\/04\/lets-get-started-with-bootstrap\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/alexandremagno.net\/en\/2011\/10\/04\/lets-get-started-with-bootstrap\/\",\"url\":\"https:\/\/alexandremagno.net\/en\/2011\/10\/04\/lets-get-started-with-bootstrap\/\",\"name\":\"Let's get started with Bootstrap - Webpoint\",\"isPartOf\":{\"@id\":\"https:\/\/alexandremagno.net\/#website\"},\"datePublished\":\"2011-10-04T00:22:13+00:00\",\"dateModified\":\"2011-10-04T00:22:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/alexandremagno.net\/en\/2011\/10\/04\/lets-get-started-with-bootstrap\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/alexandremagno.net\/en\/2011\/10\/04\/lets-get-started-with-bootstrap\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/alexandremagno.net\/en\/2011\/10\/04\/lets-get-started-with-bootstrap\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/alexandremagno.net\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Let&#8217;s get started with Bootstrap\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/alexandremagno.net\/#website\",\"url\":\"https:\/\/alexandremagno.net\/\",\"name\":\"Webpoint\",\"description\":\"Weblosofia com desenvolvimento web\",\"publisher\":{\"@id\":\"https:\/\/alexandremagno.net\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/alexandremagno.net\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/alexandremagno.net\/#organization\",\"name\":\"Webpoint\",\"url\":\"https:\/\/alexandremagno.net\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/alexandremagno.net\/wp-content\/uploads\/2021\/12\/cropped-cropped-logo-1.png\",\"contentUrl\":\"https:\/\/alexandremagno.net\/wp-content\/uploads\/2021\/12\/cropped-cropped-logo-1.png\",\"width\":35,\"height\":31,\"caption\":\"Webpoint\"},\"image\":{\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/person\/88a94d0648dd15b6080f207b6b2156af\",\"name\":\"alexanmtz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/03b43dc8e6881b6af6fbbffd7465227f2d5b0648ba6646a0174a79811ecb6cde?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/03b43dc8e6881b6af6fbbffd7465227f2d5b0648ba6646a0174a79811ecb6cde?s=96&d=mm&r=g\",\"caption\":\"alexanmtz\"},\"sameAs\":[\"https:\/\/alexandremagno.net\"],\"url\":\"https:\/\/alexandremagno.net\/en\/author\/alexanmtz\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Let's get started with Bootstrap - Webpoint","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/alexandremagno.net\/en\/2011\/10\/04\/lets-get-started-with-bootstrap\/","og_locale":"en_US","og_type":"article","og_title":"Let's get started with Bootstrap - Webpoint","og_description":"Since design guides to interaction patterns, we wish to define the pattens and consistency in a web application to reuse the highest design elements as possible. Not just that, the Twitter, with the bootstrap goes one step further and develop a framework [&hellip;]","og_url":"https:\/\/alexandremagno.net\/en\/2011\/10\/04\/lets-get-started-with-bootstrap\/","og_site_name":"Webpoint","article_published_time":"2011-10-04T00:22:13+00:00","og_image":[{"width":600,"height":416,"url":"https:\/\/alexandremagno.net\/wp-content\/uploads\/2011\/09\/twitter-bootstrap.jpg","type":"image\/jpeg"}],"author":"alexanmtz","twitter_card":"summary_large_image","twitter_misc":{"Written by":"alexanmtz","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/alexandremagno.net\/en\/2011\/10\/04\/lets-get-started-with-bootstrap\/#article","isPartOf":{"@id":"https:\/\/alexandremagno.net\/en\/2011\/10\/04\/lets-get-started-with-bootstrap\/"},"author":{"name":"alexanmtz","@id":"https:\/\/alexandremagno.net\/#\/schema\/person\/88a94d0648dd15b6080f207b6b2156af"},"headline":"Let&#8217;s get started with Bootstrap","datePublished":"2011-10-04T00:22:13+00:00","dateModified":"2011-10-04T00:22:13+00:00","mainEntityOfPage":{"@id":"https:\/\/alexandremagno.net\/en\/2011\/10\/04\/lets-get-started-with-bootstrap\/"},"wordCount":291,"commentCount":0,"publisher":{"@id":"https:\/\/alexandremagno.net\/#organization"},"keywords":["bootstrap","interface","snippet","twitter"],"articleSection":["HTML\/CSS","UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/alexandremagno.net\/en\/2011\/10\/04\/lets-get-started-with-bootstrap\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/alexandremagno.net\/en\/2011\/10\/04\/lets-get-started-with-bootstrap\/","url":"https:\/\/alexandremagno.net\/en\/2011\/10\/04\/lets-get-started-with-bootstrap\/","name":"Let's get started with Bootstrap - Webpoint","isPartOf":{"@id":"https:\/\/alexandremagno.net\/#website"},"datePublished":"2011-10-04T00:22:13+00:00","dateModified":"2011-10-04T00:22:13+00:00","breadcrumb":{"@id":"https:\/\/alexandremagno.net\/en\/2011\/10\/04\/lets-get-started-with-bootstrap\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/alexandremagno.net\/en\/2011\/10\/04\/lets-get-started-with-bootstrap\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/alexandremagno.net\/en\/2011\/10\/04\/lets-get-started-with-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/alexandremagno.net\/en\/"},{"@type":"ListItem","position":2,"name":"Let&#8217;s get started with Bootstrap"}]},{"@type":"WebSite","@id":"https:\/\/alexandremagno.net\/#website","url":"https:\/\/alexandremagno.net\/","name":"Webpoint","description":"Weblosofia com desenvolvimento web","publisher":{"@id":"https:\/\/alexandremagno.net\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/alexandremagno.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/alexandremagno.net\/#organization","name":"Webpoint","url":"https:\/\/alexandremagno.net\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/alexandremagno.net\/#\/schema\/logo\/image\/","url":"https:\/\/alexandremagno.net\/wp-content\/uploads\/2021\/12\/cropped-cropped-logo-1.png","contentUrl":"https:\/\/alexandremagno.net\/wp-content\/uploads\/2021\/12\/cropped-cropped-logo-1.png","width":35,"height":31,"caption":"Webpoint"},"image":{"@id":"https:\/\/alexandremagno.net\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/alexandremagno.net\/#\/schema\/person\/88a94d0648dd15b6080f207b6b2156af","name":"alexanmtz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/alexandremagno.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/03b43dc8e6881b6af6fbbffd7465227f2d5b0648ba6646a0174a79811ecb6cde?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/03b43dc8e6881b6af6fbbffd7465227f2d5b0648ba6646a0174a79811ecb6cde?s=96&d=mm&r=g","caption":"alexanmtz"},"sameAs":["https:\/\/alexandremagno.net"],"url":"https:\/\/alexandremagno.net\/en\/author\/alexanmtz\/"}]}},"_links":{"self":[{"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/posts\/218","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/comments?post=218"}],"version-history":[{"count":5,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/posts\/218\/revisions"}],"predecessor-version":[{"id":235,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/posts\/218\/revisions\/235"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/media\/221"}],"wp:attachment":[{"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/media?parent=218"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/categories?post=218"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/tags?post=218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}