- This topic is empty.
-
AuthorPosts
-
June 6, 2016 at 3:08 pm #242574
cd83x
ParticipantHello all,
I am writing to figure out something that I’m a little puzzled about.
http://codepen.io/cd83x/pen/GqpqaW
My question is about the ordering of DIVs and HTML5 elements like header, main, nav, etc, within the Bootstrap framework. In other words, is there a best practice when it comes to laying out content within Bootstrap? Should you use DIVs primarily, and assign classes, should you wrap your bootstrap divs inside of your HTML5 elements? I included a link to code-pen hopefully to better illustrate my question.
Thanks
June 6, 2016 at 4:48 pm #242576I.m.learning
ParticipantBootstrap is a framework designed to remove some of the hassles of formatting to create responsive web design. They offer many codes you can copy and paste to complete the task you are asking.
You build the pages just as you would normal HTML pages. Follow all the rules for HTML5; there are dozens of sites for tutorials on how Bootstrap is used; and you can download it yourself to see what they are using, or you link to a site that hosts it (just like JQuery). You can get it here:
http://getbootstrap.com/Look at this page to see some of the components:
http://getbootstrap.com/components/Now, before starting using Bootstrap, just as with any other programming code, you should perform research. There are some special codes that should be used, I don’t know where I found that info; I just searched for it.
I built my website with Bootstrap, but it took me 3 days to learn how it works and what I needed to add to my HTML code to ensure it works.
Truly, it’s up to you on how you want to use it. Is there something in particular you want? Basically, you should already know how your page is going to look because you have designed the page first. Then you look for what it is you want and decide how you want to accomplish the design.
I will tell you, without understanding it, you’re going to have issues. Start with internet searches and learn about the general aspects of it first before starting to use it. Once you learn the basics, it shouldn’t take much to put it into practice.
ADDED: check this page
http://getbootstrap.com/getting-started/June 6, 2016 at 5:12 pm #242577rkieru
ParticipantAside from the necessary includes of relevant stylesheets and javascript, the only special concern for your document formatting is that it must start with
<!DOCTYPE html>
.As to other concerns; no, use whatever best matches your approach to site structure design. Where Bootstrap is concerned there is no different treatment (for example) of
<section class="col-md-6">
and<div class="col-md-6">
.June 6, 2016 at 5:24 pm #242579I.m.learning
Participantrkieru,
The ‘<!DOCTYPE html>’ is HTML5 standard, regardless of Bootstrap. All HTML pages should have that and the other meta tags:
‘<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>’June 7, 2016 at 12:38 am #242597Beverleyh
ParticipantAll HTML pages should have that and the other meta tags:
‘<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>’Those meta tags are options but they’re not necessary – it depends on your environment. For example, the charset could be sent with a PHP header, or X-UA-Compatible could be set in .htaccess/web.config
June 7, 2016 at 8:22 am #242621rkieru
ParticipantWith regard to
<!DOCTYPE html>
– yes, this is HTML5 standard. I brought it up in relation to Bootstrap though because the framework requires this declaration in order for everything to be processed correctly. From their website:Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.
So it seemed worth mentioning.
June 7, 2016 at 10:39 am #242627I.m.learning
ParticipantThats the same reason I put the other meta tags… Just following Bootstrap documentation, as stated in the last link. They didn’t mention putting it in the htaccess as Beverly stated. They say to put it in the html page, but who knows, they don’t say to use PHP but one could do that as well.
June 7, 2016 at 11:43 am #242634Beverleyh
ParticipantI prefer to take the Bootstrap starter template as a “general suggestion”, only using the bits that I need to, and that I know are necessary for my project – typically just the html5 doctype, viewport meta tag, html5 shim, and core CSS.
I don’t tend to use respond.js for IE8, jQuery or Bootstrap js
Neither do I usually bother with the X-UA-Compatability tag. Sure, it helps IE work more effectively, but it isn’t required.
I guess it comes down to knowing when to make use of the tools in question and making a judgement call on a case-by-case basis :)
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.