Twitter Bootstrap 101 Inleiding

De Bootstrap van Twitter is een uitstekende set van zorgvuldig ontworpen elementen, lay-outs en JavaScript-tools voor de gebruikersinterface, vrij beschikbaar voor gebruik in uw volgende webontwerpproject. Deze videoserie is bedoeld om u kennis te laten maken met Bootstrap; u helemaal van het downloaden van de middelen naar het bouwen van een complete Bootstrap-gebaseerde website.

Toen Mark Otto (@mdo) en Jacob Thornton (@fat) Twitter Bootstrap in augustus 2011 uitbrachten, verklaarde hun aankondiging wat de waarde ervan zou zijn: vooraanstaande ontwikkelaars in staat stellen om projecten efficiënter en effectiever te starten.

De Bootstrap-stylesheet biedt een eenvoudig te implementeren 960-raster voor een efficiënte lay-out, evenals vakkundig vervaardigde stijlen voor typografie, navigatie, tabellen, formulieren, knoppen en meer. Om dagelijkse JavaScript-aanrakingen te verzorgen, biedt Bootstrap een goed gebouwde set van jQuery-plug-ins voor vervolgkeuzemenu's, tabbladen, modale vakken, tooltips, waarschuwingsberichten en meer.

Samen bieden deze interface-elementen alle voordelen van een gebruiksvriendelijke, professioneel gebouwde HTML5-website, direct uit de verpakking. Zoals @mdo het in de originele post heeft gezet:

Bootstrap is een zeer eenvoudige manier om snelle, schone en zeer bruikbare applicaties te promoten ... een schone en uniforme oplossing te bieden voor de meest voorkomende, alledaagse interfacetaken die ontwikkelaars tegenkomen.

En toch staat niets in de weg van verdere aanpassing. Nogmaals, in de woorden van @mdo, terwijl Twitter Bootstrap "erg uitgebreid is", blijft het toch "flexibel genoeg om te werken voor vele unieke ontwerpbehoeften." Dus,

U kunt Bootstrap gebruiken om snelle prototypen samen te stellen of om de uitvoering van meer geavanceerde ontwerpen en grotere technische inspanningen te begeleiden.

De liberale licentievoorwaarden, onder de Apache 2.0-licentie, bieden veel creatieve vrijheid. Zolang je de goede mensen op Twitter de eer geeft voor hun werk, kun je alles naar hartelust opnemen, aanpassen en aanpassen, draai je dan om en start je de resulterende site voor jezelf of voor een klant, gratis of voor winst. (Lees voor meer informatie deze discussiethread, waar de mensen op Twitter hebben uitgelegd hoe u de licentie kunt blijven naleven terwijl u de code aanpast.)

Gezien de overduidelijke waarde van wat het biedt en de liberale voorwaarden van zijn licentie, is het geen wonder dat zoveel ontwikkelaars er volledig gebruik van zijn gaan maken. De Tumblr-site "Gebouwd met Bootstrap" heeft een aantal door Bootstrap gebouwde sites gedocumenteerd, waaronder:

  • CodeAcademy.com
  • CodeCards.com
  • Codesprint
  • De Hub Cycle Shop
  • Concerten op de Clearing
  • En zelfs de nieuwe site van MSNBC: BreakingNews.com

In al deze voorbeelden ziet u een schoon raster en een interface die professionaliteit impliceert. Je ziet ook veel variatie in de details. En je zult misschien getroffen worden door het feit dat ontwikkelaars bij gerespecteerde outfits zoals Code Academy en MSNBC ervoor hebben gekozen om te bouwen met Bootstrap.

Als je op mij lijkt, ben je erg in de verleiding om het zelf te proberen - en dat zou je ook moeten doen!

Ik heb het zelfs de laatste tijd bekeken. Laat me je rondleiden.

In de onderstaande twee korte video's, zal ik je laten kennismaken met de thuisbasis van Twitter Bootstrap, je helpen bij het downloaden van de code, waarna we hem openbreken en dingen gaan organiseren om onze eigen Bootstrap-gebouwde site voor te bereiden..


Verkrijg de code

  • Ga naar Twitter Bootstrap's Homepage
  • Bootstrap v. 1.4.0 downloaden (gebruikt in deze zelfstudie)

Video 1: Introductie

Of download de video of abonneer je op Webdesigntuts + screencasts via iTunes!

Stappen behandeld in deze video:

  1. Ga naar de startpagina van Bootstrap voor online documentatie
  2. Bekijk enkele sites gebouwd met Bootstrap
  3. Download de code van Github
  4. Pak het uit

Video 2: uitpakken en organiseren

Of download de video of abonneer je op Webdesigntuts + screencasts via iTunes!

Stappen behandeld in deze video:

We doen het volgende, maar niet precies in deze volgorde:

  1. Organiseer de CSS
  2. Organiseer het JavaScript
  3. Ontdoe je van onnodige bestanden (MINDER besparen voor nog een dag)
  4. Bewaar het Apache 2.0-licentiebestand, zoals vereist door de licentievoorwaarden van Twitter Bootstrap
  5. Bereid je voor om onze eigen Bootstrap-gebouwde site te ontwikkelen

Volgende stappen?

In toekomstige tutorials zal ik je door Bootstrap's belangrijkste functies leiden, en ik zal je helpen Bootstrap te gebruiken om je eigen aangepaste repository van Bootstrap-fragmenten te bouwen. Door dit te doen zullen we Bootstrap leren kennen, ervaring ermee opdoen en het aanpassen, en ons voorbereiden om nog efficiënter te werken aan onze toekomstige Bootstrap-gebouwde projecten.