Stap 2: Index.html en Style.css bestanden aanmaken
Hoewel u al zowel HTML- en CSS-bestanden van uw statische HTML site, raden ik dat u een nieuwe index.html en een style.css bestand maken. Doen zou vereenvoudigen het hele codering proces voor een groot deel omdat een webpagina van kras bouwen u veel meer vrijheid en aanpassing opties geeft, die is heel belangrijk bij de ontwikkeling van thema's met een front-end kader zoals Bootstrap. Hoewel deze route langer duurt in vergelijking met het beginnen met een bestaande HTML-sjabloon, verhoogt het uw creativiteit om onvoorstelbare hoogten.
Laten we stellen dat uw nieuw gecreëerde index.html bestand ziet er iets als dit:
<! Html DOCTYPE >
< html lang = "nl" >
< head >
< meta charset = "utf-8" >
< metanaam = "viewport" content = "Breedte = apparaat-breedte, initiële-schaal = 1.0" >
< title > My wordpressthema < /title >
</head >
< body >
< p > Hallo WordPress! < /p >
< /body >
</HTML >
Zodat de Bootstrap voor u werken, hebt u voor het initialiseren van het in de sectie van uw index.html bestand als volgt:
<! Html DOCTYPE >
< html lang = "nl" >
< head >
< meta charset = "utf-8" >
< metanaam = "viewport" content = "Breedte = apparaat-breedte, initiële-schaal = 1.0" >
< title > My wordpressthema < /title >
< link href="css/bootstrap.min.css" rel = "stylesheet" media = "screen" >
</head >
< body >
< p > Hallo WordPress! < /p >
< /body >
</HTML >
En als u van plan bent te nemen geen JavaScript-aangedreven functionaliteit – als Bootstrap tabbladen, waarschuwingen, enzovoort - in uw thema, dan moet u jQuery en de bijbehorende JavaScript (bootstrap.min.js) ook opnemen in de sectie van uw index.html bestand:
<! Html DOCTYPE >
< html lang = "nl" >
< head >
< meta charset = "utf-8" >
< metanaam = "viewport" content = "Breedte = apparaat-breedte, initiële-schaal = 1.0" >
< title > My wordpressthema < /title >
< link href="css/bootstrap.min.css" rel = "stylesheet" media = "screen" >
</head >
< body >
< p > Hallo WordPress! < /p >
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" >< / script >
< script src="js/bootstrap.min.js" >< / script >
< /body >
</HTML >
Op basis van uw bestaande siteontwerp en te profiteren van de Bootstrap onderdelen, kunt u nu code van uw nieuwe "Bootstrap-aangedreven" HTML sjabloon. Vergeet niet, geen aangepaste CSS op de HTML-sjabloon zal werken tenzij u verwijzen naar het nieuwe style.css bestand in de sectie van het bestand index.html .
<! Html DOCTYPE >
< html lang = "nl" >
< head >
< meta charset = "utf-8" >
< metanaam = "viewport" content = "Breedte = apparaat-breedte, initiële-schaal = 1.0" >
< title > My wordpressthema < /title >
< link href="css/style.css" rel = "stylesheet" media = "screen" >
< link href="css/bootstrap.min.css" rel = "stylesheet" media = "screen" >
</head >
< body >
< p > Hallo WordPress! < /p >
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" >< / script >
< script src="js/bootstrap.min.js" >< / script >
< /body >
</HTML >
Dus, u niet alleen elk element van uw HTML-pagina aan uw behoeften kunt stijl maar ook kan de kracht van CSS Media vragen uw sjabloon in een breed scala aan apparaten volledig responsief te maken!
