Hello,
I'm new in the approach to bootstrap, although I, in theory, can work with boodstrap, so I can create a website with the framework for PC and laptop. Now I read articles that if I create a responsive website, this should do in the format "mobile first", so media 768px? Will this mean that I have to use a media query for each code line for screens larger than 768px? . Who can tell me a few hints how to handle a responsive website, which is also suitable for smartphones and tablets.
Mobile first in here is done pretty much for you except that I've noticed these things that might help you to keep it straight:
When using a custom CSS file and adding classes to it, if you are creating an @media class (basically I duplicate a class and add the @media with the dropdown menu on the dots to the right), be sure that the order is from larger to smaller going from top to bottom. In other words, if you create a 768 size of some class, put it under the larger size of that class.
When you're setting the views for a column using the Properties in the top right of the window, this is where you'll see most of the Mobile first at work. Here you will set things from small to large. For example, if you have a column you want to be 12 col wide, would put the 12 in the dropdown for XS and the rest above it (SM, MD, LG) would be NONE. This tells it that everything in all sizes should be 12. If you want it to be 5 col wide at MD size you would put the 5 in MD and leave LG at NONE and leave 12 in the XS. This tells it to be 12 col wide at XS and SM, change to 5 col wide at MD and stay at 5 col wide at LG None basically represents "No change from previous width setting".
This is confusing even for me, because when you first put a column on a blank page, or you add a full width column to your layout it sets the 12 in the MD setting and not in the XS setting and the rest are all NONE. It will work both ways so I guess it's ok and maybe it reads the default as 12? Not sure why that is, but it seems to be ok either way. I tend to make sure it's set like this from top down:
NONE
NONE
NONE
12
This will give you the full 12 width column at all screen sizes.
Hi Jo, Thanks for your quick replay. Pity, but it's me still not quite clear. That's not due to your explanation, but far more my knowledge of the English language and the approach of dealing with bootstrap. Partly it helps me because the grid system of 12 columns (xs, sm, md and lg) is now clear to me (thank you!). But your remark :" that the order is from larger to smaller" is not mobile first , is it not ? So you suggest that I have to create a website designed for PC ?, and in particular the view in the head determine if it is responsive , is it not? And that in a special case, only valid for smartphone format, I have to made a media - query adjustment in the custom.css . (@media screen 768px ?) is this assumption of mine correct. ? As an example: f.i.: I dont want a slider on the small format ?? or I want a different background-color. ? Is that correct? . Would you be so kind to give me more of those examples if my assumption be correct ?
I hope my English is understandable enough that you may understand the punch line (clou) of the above story .It is difficult to express myself in writing, in a not - native language. rather than talk.
Again thanks and regards,
I just wanted to point you to the Bootstrap framework developers site which should help you understand the framework better which in turn should help you understand how this app works. http://getbootstrap.com/ and for the mobile first idea http://getbootstrap.com/css/#overview-mobile
Just from that site it seems that they developed the framework to go from smaller screen sizes to larger ones with media queries. http://getbootstrap.com/css/#grid-media-queries
Hey Saj, Thanks . I knew the bootstrap developers site, but I could not find an example how to interpret media queries and how to start up- or downwards .
regards,
Zjos