Anonim

Si mai no heu sentit a parlar de Bootstrap, un marc desenvolupat per Twitter per fer belles llocs web, us en perdreu. Bootstrap fa que sigui fàcil i ràpid de dissenyar un lloc web sense gaire coneixement en CSS (Cascading Style Sheets). Si sou nous a la programació per a la web, no heu de saber res sobre CSS per començar a aprendre com funciona Bootstrap; Tot el que necessiteu és un sol document HTML. Anem a fer una ullada a Bootstrap, mostrant-vos de què es tracta, com funciona i si és una bona opció per a tots els llocs web que creeu.

Inserció de l'API d'arrencada al fitxer HTML

Teniu algunes opcions per inserir Bootstrap al fitxer de projecte principal. La primera opció és inserir tots els fitxers Bootstrap necessaris al vostre projecte. Podeu fer-ho baixant el paquet i penjant-lo a la carpeta del vostre projecte. Per descomptat, haureu d’enllaçar el fitxer CSS principal Bootstrap al vostre document. El lloc web oficial de Bootstrap ofereix una guia pas a pas sobre com fer-ho.

L'altra opció és ometre la descàrrega del paquet i utilitzar una xarxa de lliurament de contingut (CDN). Un CDN us permet enllaçar els fitxers Bootstrap primaris amb el vostre document HTML sense baixar-lo mai. Això, per descomptat, no sempre és bo per als llocs web professionals, ja que no seria massa ràpid deixar la meva empresa o pàgina de portafoli al destí si el servidor hagués de disminuir. El millor és tenir els fitxers al vostre projecte, però amb l'objectiu d'aprenentatge, el CDN anirà bé.

Per inserir Bootstrap al document HTML, només haurà de posar el codi següent a la secció etiqueta del document HTML:

Un cop inserits aquests enllaços a l’etiqueta de capçalera, haureu d’estar tots preparats per començar a utilitzar classes Bootstrap. El document hauria de ser així:

Botes i classes de bota

Els elements d'arrencada es desglossen en classes, que són només un grup de CSS preescrit que podeu inserir al vostre marcador. Inserir classes al vostre marc és senzill, només heu de conèixer el nom de la classe que voleu utilitzar i aplicar-lo a un dels vostres elements HTML mitjançant el valor class = "classname", tal com es va parlar en un article anterior.

La part difícil és esbrinar com funciona tot això per crear alguna cosa bonica. Podeu consultar totes les diferents classes disponibles a Bootstrap directament a la documentació oficial. Ara, dominar Bootstrap és una altra història. Això no ens pot ensenyar ni ningú més. Podeu veure el tutorial després del tutorial, però per utilitzar-vos bé el framework, amb problemes i proves. I això requereix que us dediqueu més bé als vostres propis projectes.

Tenint en compte això, us proposo que inicieu el vostre propi projecte HTML a l’ordinador amb Atom o algun altre editor de text, reviseu les classes HTML i CSS, i comenceu a jugar amb Bootstrap. I si coneixeu prou marques, potser fins i tot crear el vostre propi lloc web de portafoli com a exercici de prova.

Bootstrap és una opció viable per a tots els llocs web?

Bootstrap és un marc fantàstic, però és una opció viable per a cada lloc web que creeu? Depèn realment del desenvolupador i dels requisits del projecte. En molts entorns professionals, no tindreu la possibilitat de triar les tecnologies que feu servir, ja que responen en gran mesura al Project Manager. Si el Gestor de Projectes opta per utilitzar Bootstrap, també ho combinareu amb un munt de CSS personalitzats. Això sol fer que el vostre lloc web sigui únic i diferent dels altres llocs web mitjançant Bootstrap.

Jo, personalment, no veig Bootstrap com una opció ideal per a tots els llocs web. Segur, pot ajudar i proporcionar algunes dreceres, però al final he descobert que dissenyar des de la base de dades amb CSS és la millor ruta en gran mesura a causa del control que teniu. Però, una vegada més, si tot just comença a la programació web, no és gens dolent utilitzar Bootstrap, però no confiar-hi en la seva carrera professional.

Val la pena assenyalar que si sou desenvolupadors principiants, no heu d’utilitzar Bootstrap per a tots els projectes de la vostra cartera. Es pot trobar que sigui capaç de tenir coneixements amb l'API, però no coneixeu el vostre CSS. Dit això, és bo tenir una barreja decent tant a la vostra cartera (o fins i tot exclusivament CSS, ja que és fàcil recollir Bootstrap).

Tancament

Això és tot el que Bootstrap és en poques paraules. Com he esmentat anteriorment, us animo a iniciar el vostre propi projecte HTML i a afegir algunes de les diferents classes als elements per començar a jugar amb el framework. Podeu trobar totes les diferents ofertes de Bootstrap amb explicacions i exemples de codi aquí.

Bootstrap és una eina perfecta, però no oblideu de confiar-hi sols. És bo conèixer-lo i conèixer la manera de fer-ho, però també assegureu-vos de capbussar-vos en CSS per comprendre veritablement el que passa a les escena. No només això, sinó que un bon coneixement en CSS compleix molt Bootstrap, que li permet fer realment alguns llocs web únics i bonics amb la seva pròpia personalització.

Com podeu utilitzar bootstrap per fer una bella web