{"id":19109637,"url":"https://github.com/vagnerbellacosa/curso_bootstrap","last_synced_at":"2026-04-17T04:32:06.559Z","repository":{"id":137375744,"uuid":"372386815","full_name":"VagnerBellacosa/Curso_Bootstrap","owner":"VagnerBellacosa","description":"Apontamentos do curso de Javascript Html CSS com Bootstrap","archived":false,"fork":false,"pushed_at":"2021-12-02T13:49:25.000Z","size":3042,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-22T11:17:17.142Z","etag":null,"topics":["bootstrap","css","front-end","html"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/VagnerBellacosa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-31T04:59:26.000Z","updated_at":"2021-12-02T13:49:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"9fce201a-0f7d-450b-98a3-63ae48a3b2eb","html_url":"https://github.com/VagnerBellacosa/Curso_Bootstrap","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/VagnerBellacosa/Curso_Bootstrap","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VagnerBellacosa%2FCurso_Bootstrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VagnerBellacosa%2FCurso_Bootstrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VagnerBellacosa%2FCurso_Bootstrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VagnerBellacosa%2FCurso_Bootstrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VagnerBellacosa","download_url":"https://codeload.github.com/VagnerBellacosa/Curso_Bootstrap/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VagnerBellacosa%2FCurso_Bootstrap/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31915111,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T18:22:33.417Z","status":"online","status_checked_at":"2026-04-17T02:00:06.879Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","css","front-end","html"],"created_at":"2024-11-09T04:21:51.259Z","updated_at":"2026-04-17T04:32:06.545Z","avatar_url":"https://github.com/VagnerBellacosa.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- PROJECT SHIELDS --\u003e\n\n[![Contributors][contributors-shield]][contributors-url]\n[![Forks][forks-shield]][forks-url]\n[![Stargazers][stars-shield]][stars-url]\n[![Issues][issues-shield]][issues-url]\n[![MIT License][license-shield]][license-url]\n[![LinkedIn][linkedin-shield]][linkedin-url]\n\n\u003c!-- PROJECT LOGO --\u003e\n![Bootcamps na Digital Innovation One](BootCamps/Images/capa.png \"Bootcamps\")\n\n\n\n# CursoBootstrap\n\nApontamentos do curso de Javascript Html CSS com Bootstrap\n\n[O que é Bootstrap](Workspace/OQueEhBootstrap.Md)\n\n[Paginas exemplo](Workspace/Code)\n\n[Tutorial](Workspace/Tutorial)\n\n# Bootstrap: saiba neste guia para iniciantes o que é, por que e como usá-lo\n\nBootstrap é um framework front-end usado para desenvolver aplicações web e sites mobile-first, ou seja, com o layout adaptado à tela do dispositivo utilizado pelo usuário. Saiba tudo sobre essa tecnologia e como utilizá-la em uma aplicação front-end.\n\n[Ivan de Souza](https://rockcontent.com/br/blog/author/ivan/)\n\n\n12 dez, 19 | Leitura: 11min\n\n![bootstrap](https://rockcontent.com/br/wp-content/uploads/sites/2/2020/04/bootstrap-1024x727.jpg)\n\n**Bootstrap é um framework CSS utilizado em aplicações front-end**, ou seja, na camada de interface com o usuário para o desenvolvimento de aplicações adaptáveis à tela de qualquer dispositivo.\n\nNo [WordPress](https://rockcontent.com/br/blog/wordpress/), por exemplo, ele pode ser instalado como um tema ou ser utilizado para o desenvolvimento de plugins ou, ainda, dentro deles para estilizar suas funcionalidades. O objetivo do framework é oferecer uma experiência mais agradável ao usuário durante a utilização do site.\n\nPor isso, ele conta com diversos recursos para configurar os estilos dos elementos da página de forma simples e eficiente, além de facilitar a construção de páginas que sejam, ao mesmo tempo, adaptadas para web e para dispositivos móveis. Portanto, é importante conhecer o potencial desse framework.\n\nPensando nisso, fizemos este guia completo para iniciantes, em que vamos mostrar:\n\n- O que é o Bootstrap?\n- Como o Bootstrap funciona?\n- Quais são as funcionalidades do Bootstrap?\n- Como baixar o Bootstrap?\n- Como configurar e utilizar o Bootstrap?\n- Quais são os motivos para usar o Bootstrap?\n\nQuer saber mais sobre esse framework? Vamos lá!\n\n\n\n## O que é o Bootstrap? \n\nO Bootstrap é um framework [CSS](https://rockcontent.com/br/blog/css/) desenvolvido pelo Twitter em 2010, com o objetivo de padronizar as ferramentas da empresa. Inicialmente era chamado de Twitter Blueprint e, um pouco mais adiante, em 2011, foi transformado em código aberto e teve o nome alterado para Bootstrap. Desde então, já passou por diversas atualizações e está atualmente na versão 4.4.\n\nO framework combina CSS e [JavaScript](https://rockcontent.com/br/blog/javascript-e-seo/) para estilizar os elementos de uma página HTML. Ele permite muito mais que apenas mudar as cores de botões e links.\n\nTrata-se de uma ferramenta que proporciona interatividade na página, pois oferece uma série de componentes que facilitam a comunicação com o usuário, como menus de navegação, controles de paginação, barras de progresso e muito mais.\n\nAlém de todas as funcionalidades que o framework oferece, **o seu principal objetivo é permitir a construção de sites responsivos para dispositivos móveis**. Isso significa que as páginas são desenvolvidas para funcionar em desktops, tablets e smartphones, de uma forma simples e bem organizada.\n\n## Como o Bootstrap funciona?\n\n**O Bootstrap é formado por uma série de arquivos CSS e JavaScript que são responsáveis por atribuir características específicas aos elementos da página.** Há um arquivo principal no framework, chamado bootstrap.css, que contém a definição para todos os estilos utilizados. Basicamente, a estrutura do framework é formada por dois diretórios:\n\n- css: que contém os arquivos necessários para a estilização dos elementos e uma alternativa ao tema original;\n- js: contém as versões do arquivo bootstrap.js (original e minificado), que é responsável por executar as aplicações de estilo que necessitam de manipulação interativa.\n\nPara atribuir uma característica a um elemento, basta informar a classe correspondente na propriedade class do elemento a ser estilizado. Veja o exemplo:\n\n```\n\u003cimg src=\"nome-da-image.jpg\" alt=\"texto alternativo\" class=\"rounded-sm\"\u003e\n```\n\nNesse exemplo, foi atribuído o conteúdo “rounded-sm” para a propriedade da imagem. Trata-se de um estilo que adiciona cantos arredondados no elemento. Portanto, ao carregar a imagem, as características referentes a essa classe serão aplicadas no elemento.\n\n## Quais são as funcionalidades do Bootstrap?\n\nO Bootstrap oferece uma série de funcionalidades que podem ser implementadas em um site. Confira, a seguir, o que é possível fazer com essa ferramenta.\n\n### Layout responsivo\n\nUma das principais funcionalidades do Bootstrap é permitir que a adaptação do layout da página seja feita de acordo com o tipo de dispositivo utilizado. Para garantir a responsividade, **o framework trabalha com a estilização do elemento \u003cdiv\u003e e com a utilização da classe container**.\n\nNa prática, o elemento \u003cdiv\u003e funciona para criar uma série de grades, semelhante a uma tabela, que é capaz de estruturar a página de forma adaptável. As tabelas foram utilizadas no passado para tentar criar layouts responsivos, entretanto, havia limitações em função da definição da largura das colunas, o que inviabilizou a sua utilização em dispositivos menores, como os smartphones.\n\nJá o elemento \u003cdiv\u003e é mais flexível, pois permite que a largura seja definida e redimensionada com facilidade. O Bootstrap atribui ao elemento \u003cdiv\u003e a característica da classe container, que funciona para determinar as dimensões adequadas para os elementos inseridos nesse espaço. Basicamente, o framework trabalha com três tipos de containers:\n\n- container: em conjunto com a propriedade max-width, que determina qual é o tamanho da tela ideal para que haja a adaptação do layout da página;\n- container-fluid: considera toda a largura da tela do dispositivo para a definição do layout. Para isso, é considerada a propriedade width:100% em todos os limites de tamanho de tela;\n- container-{breakpoint}: considera width:100% até que um determinado tamanho seja atingido.\n\n### Biblioteca de componentes\n\nOutra funcionalidade interessante do framework é a quantidade de componentes que podem ser utilizados para **proporcionar maior interatividade e melhorar a comunicação com o usuário**. Confira, a seguir, alguns dos principais componentes do Bootstrap.\n\n#### Alerts\n\nO Bootstrap possibilita a configuração de forma simples e rápida de diferentes tipos de alertas, com cores específicas, de acordo com a situação. Para mostrar um alerta ao usuário para indicar atenção, por exemplo, basta utilizar a classe .alert-danger e será exibido uma caixa de texto com o fundo vermelho. Confira o exemplo a seguir:\n\n```\n\u003cdiv class=\"alert alert-danger\"\u003e\n  \u003cstrong\u003eAtenção!\u003c/strong\u003e Cuidado com a mensagem de alerta!\n\u003c/div\u003e\n```\n\n#### Carousel\n\nUm componente muito utilizado no Bootstrap é o Carousel. Trata-se de um slideshow, ou seja, uma ferramenta que permite a exibição de imagens de forma responsiva. Ele também possibilita a inclusão de efeitos especiais para a transição da imagem e controles de exibição, como os indicadores de próximo e anterior.\n\n#### Navbar\n\nOutro poderoso componente do framework é o Navbar, que permite a construção de um sistema de navegação responsivo. É possível configurar diferentes formas de apresentação do menu, como escolher entre o posicionamento lateral ou superior, e definir a forma de exibição, que pode ser estendida ou contraída.\n\nTambém é possível determinar a forma de exibição dos links do menu, que pode ser em formato de botão, link, menu suspenso, entre outras configurações, para **facilitar a implementação da navegação do site**.\n\n## Como baixar o Bootstrap?\n\nExistem diferentes formas de baixar o framework. Uma delas é fazer o download da versão compilada dos código CSS e JavaScript por meio da [página do Bootstrap](https://getbootstrap.com/docs/4.4/getting-started/download/). Há também a opção de baixar o código-fonte do framework, já que ele é uma ferramenta de código aberto.\n\nQuem não quiser baixar os arquivos pode ter acesso ao framework sem a necessidade de instalá-los no servidor. Na prática, os arquivos de instalação ficam em outro domínio, ou seja, em outro [DNS](https://rockcontent.com/br/blog/dns/). Para isso, é só utilizar os links para acessar o BootstrapCDN e, dessa forma, adicionar as referências para os arquivos necessários para a sua utilização.\n\nOutra forma de baixar o framework é por meio de gerenciadores de pacotes. É importante dizer que **o Bootstrap pode ser utilizado com diferentes linguagens de programação**.\n\nPor isso, ele pode ser baixado com o npm, do Node.js, com RubyGems, Composer ou Nuget, e utilizado para [criar um site](https://rockcontent.com/br/blog/como-criar-um-site/) em WordPress, em sites desenvolvidos em Ruby on Rails, em Asp.Net etc.\n\n## Como configurar e utilizar o Bootstrap?\n\nExistem diferentes formas de configurar o framework para utilizá-lo em uma aplicação web. Entretanto, para que ele funcione da maneira adequada, é preciso adicionar as bibliotecas JQuery e Popper.js, que são necessárias para a execução de alguns componentes do Bootstrap.\n\nPara começar a usar o Bootstrap em uma página, é preciso **adicionar a referência dos principais arquivos do framework na página principal da aplicação**. Confira, a seguir, o código de uma página HTML com todas as referências necessárias para que o framework funcione.\n\n```\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n \u003chead\u003e\n   \u003c!-- Required meta tags --\u003e\n   \u003cmeta charset=\"utf-8\"\u003e\n   \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"\u003e\n   \u003c!-- Bootstrap CSS --\u003e\n   \u003clink rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css\" integrity=\"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh\" crossorigin=\"anonymous\"\u003e\n   \u003ctitle\u003eHello, world!\u003c/title\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n   \u003ch1\u003eHello, world!\u003c/h1\u003e\n   \u003c!-- Optional JavaScript --\u003e\n   \u003c!-- jQuery first, then Popper.js, then Bootstrap JS --\u003e\n   \u003cscript src=\"https://code.jquery.com/jquery-3.4.1.slim.min.js\" integrity=\"sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n   \u003cscript src=\"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js\" integrity=\"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n   \u003cscript src=\"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js\" integrity=\"sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003cFonte: site [Getbootstrap.com](https://getbootstrap.com/docs/4.4/getting-started/introduction/#starter-template)\u003e\n\nÉ importante seguir a ordem das referências conforme o exemplo. Portanto, a primeira referência deve ser ao arquivo bootstrap.css localizado na tag \u003chead\u003e. Já as referências aos arquivos JavaScript devem ser inseridas no final da página, antes de encerrar a tag \u003c/body\u003e. A ordem para os scripts devem ser: JQuery, Popper.js e Bootstrap.js.\n\nVale ressaltar que a forma de configurar o Bootstrap varia de acordo com o tipo de ambiente em que ele está. No WordPress, por exemplo, também é possível adicionar o framework por meio da alteração do arquivo functions.php do [template](https://rockcontent.com/br/blog/template/). Por isso, confira, a seguir, algumas dicas sobre como configurar e utilizar o Bootstrap.\n\n### Faça um curso\n\nFazer um [curso](https://rockcontent.com/br/blog/cursos-online-gratuitos/) é a melhor forma de aprender com mais agilidade a utilizar as tecnologias disponíveis no mercado, como o Bootstrap. Isso porque contar com a ajuda de alguém nesse momento é importante para **entender as funcionalidades do framework e esclarecer as dúvidas** que nem sempre é possível solucionar em fóruns ou em buscas pela internet.\n\n### Aprenda sobre plugins\n\nAlém das funcionalidades básicas, o Bootstrap também permite a [utilização de plugins](https://rockcontent.com/br/blog/como-instalar-um-plugin-no-wordpress/). Na prática, trata-se de uma série de recursos adicionais que ajudam a oferecer uma experiência ainda melhor ao usuário. Existem **diversos plugins gratuitos e pagos na internet** que podem ser baixados e utilizados com o framework.\n\n### Tenha um bom guia por perto\n\nOutra forma de aperfeiçoar o conhecimento no framework é por meio da consulta em guias de referência. O site oficial do Bootstrap, por exemplo, fornece uma **ampla documentação sobre todas as suas funcionalidades**, além de ser rico em exemplos. Além disso, existem diversos livros e sites de referência que ajudam a explorar ao máximo todo o potencial dessa ferramenta.\n\n### Utilize a versão mais recente\n\nSempre que uma nova versão é lançada, há novas funcionalidades disponíveis, além de possíveis alterações em recursos já existentes. Portanto, é importante se certificar de **utilizar a última versão disponível do framework**, seja para aplicar em um site, seja para seu próprio aprendizado. Dessa forma, há a garantia de que os recursos utilizados na página sejam os mais atualizados.\n\n**Você também pode se interessar por estes outros conteúdos!\n** [**Stage: a solução completa em performance, conversão e segurança no seu WordPress**](https://rockcontent.com/br/blog/rock-stage/)**\n** [**Entenda quais são os passos para a criação de um site profissional**](https://rockcontent.com/br/blog/como-fazer-um-site/)**\n** [**Conheça os 10 melhores sites de domínio**](https://rockcontent.com/br/blog/melhores-sites-de-dominio/)\n\n## Quais são os motivos para usar o Bootstrap?\n\nDe acordo com as estatísticas apresentadas pelo [site W3Techs](https://w3techs.com/), o Bootstrap ocupa a segunda posição como a biblioteca JavaScript mais utilizada, com 20,6% de sites que fazem uso da tecnologia. Existem diversas razões pelas quais vale a pena utilizar e aprender Bootstrap. Confira, a seguir, as principais delas.\n\n### Mobile-first\n\nO Bootstrap segue o conceito mobile-first. Isso significa que a preocupação do framework é, em primeiro lugar, **desenvolver uma página que funcione perfeitamente em dispositivos móveis** e, a seguir, em desktop.\n\nA vantagem dessa estratégia é a garantia de ter um site que possa ser acessado por qualquer dispositivo, o que é essencial em função da quantidade de pessoas que utilizam o smartphone.\n\n### Padrão visual\n\nOs recursos disponíveis no Bootstrap oferecem uma experiência rica ao usuário. Isso porque **o padrão visual de estilização segue as tendências de design** utilizadas no momento. Além disso, existem inúmeros [temas](https://rockcontent.com/br/blog/temas-wordpress/) para Bootstrap gratuitos ou pagos que podem ser baixados na internet. \n\n### Reutilização de código\n\nPara desenvolver muitas das funcionalidades existentes no Bootstrap, seria preciso escrever uma grande quantidade de linhas de código. Com isso, porém, há um aumento no tamanho dos arquivos e da quantidade de dados trafegadas para o carregamento da página.\n\nEsses fatores podem prejudicar um bom rankeamento no Google e toda uma estratégia de [SEO](https://rockcontent.com/br/blog/o-que-e-seo/), pois o [tempo para o carregamento da página](https://rockcontent.com/br/blog/velocidade-do-site/) é uma das razões pelas quais o usuário desiste de esperar e vai embora do site.\n\nAo utilizar o framework, basta referenciar a classe ao elemento em que se deseja aplicar o recurso. Portanto, sua utilização elimina a necessidade de escrever muitas linhas de código e, ainda, contribui para **reduzir o tamanho dos arquivos trafegados**.\n\n### Comunidade ativa\n\nPor ser um framework de código aberto, o Bootstrap conta com uma comunidade ativa de desenvolvedores. Além de contribuir com as atualizações nas versões, o que é importante para **ter uma ferramenta sempre atualizada**, a comunidade também faz a manutenção da documentação, oferece um blog com dicas e novidades sobre a ferramenta, e ajuda em uma página no [site Stack Overflow](https://stackoverflow.com/questions). \n\nComo você pôde ver neste guia completo sobre o Bootstrap, **ele é um poderoso framework para o desenvolvimento de aplicações front-end responsivas** e oferece inúmeros componentes capazes de conferir um alto padrão visual às páginas. Para aprender a utilizar todos os seus recursos, invista em um bom curso, estude a variedade de plugins e consulte sempre um guia de referência.\n\nAgora que você já conhece esse poderoso framework para aplicações front-end, que tal aprender um pouco mais sobre domínios de site? Então confira nosso conteúdo sobre [o que é WHOIS e como fazer uma consulta de domínio](https://rockcontent.com/br/blog/whois/)!\n\n\n\n\n---\n\n#### * DIO - Digital Inovation One *\n######  [Inscreva-se na Dio](https://web.dio.me/sign-up?ref=R5J3ZLTIFS)  \n\n######  [Vagner Bellacosa perfil na Dio](https://web.dio.me/users/vagnerbellacosa?tab=achievements)  \n\n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n\u003c!-- https://www.markdownguide.org/basic-syntax/#reference-style-links --\u003e\n[contributors-shield]: https://img.shields.io/github/contributors/VagnerBellacosa/Curso_Bootstrap.svg?style=for-the-badge\n[contributors-url]: https://github.com/VagnerBellacosa/Curso_Bootstrap/graphs/contributors\n[forks-shield]: https://img.shields.io/github/forks/VagnerBellacosa/Curso_Bootstrap.svg?style=for-the-badge\n[forks-url]: https://github.com/VagnerBellacosa/Curso_Bootstrap/network/members\n[stars-shield]: https://img.shields.io/github/stars/VagnerBellacosa/Curso_Bootstrap.svg?style=for-the-badge\n[stars-url]: https://github.com/VagnerBellacosa/Curso_Bootstrap/stargazers\n[issues-shield]: https://img.shields.io/github/issues/VagnerBellacosa/Curso_Bootstrap.svg?style=for-the-badge\n[issues-url]: https://github.com/VagnerBellacosa/Curso_Bootstrap/issues\n[license-shield]: https://img.shields.io/github/license/VagnerBellacosa/Curso_Bootstrap.svg?style=for-the-badge\n[license-url]: https://github.com/VagnerBellacosa/Curso_Bootstrap/blob/master/LICENSE.txt\n[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge\u0026logo=linkedin\u0026colorB=555\n[linkedin-url]: https://www.linkedin.com/in/VagnerBellacosa/\n[product-screenshot]: BootCamps/images/capa.png","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvagnerbellacosa%2Fcurso_bootstrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvagnerbellacosa%2Fcurso_bootstrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvagnerbellacosa%2Fcurso_bootstrap/lists"}