I am asking this question here to get some information and ideas from the professionals. My question is I just start to learn Bootstrap 3.1 for my front end developments. So I have followed some basic tutorials regarding to the subject. With that tutorials, I found that the look and feels of every page layout have same structure and design. So I am afraid, Can we design advance and very different layout using Bootstrap 3.1?
Here I have attached a navigation bar. Someone can tell me, is it possible to design like this navigation bar using bootstrap 3.1?
I am not asking to someone to code this, just I ask this to make a strong sense about bootstrap 3.1.
hope someone pointed me out to the right direction.
Thank you.
Yes, it is easy to override any bootstrap styles you want.
It is designed to be usable out of the box, but also to provide good base styles in a logical way to be over ridden. The designers did not want to force you to use their styles.
If you use SASS or LESS, it will be easy. If you use the finished compiled CSS, it will be VERY tedious to edit.
I've built several apps entirely from Bootstrap 3, and most do not look like 'bootstrap' but use a ton of their base styles.
Simple answer, Yes you can. I don't think its that complicated to do. You can checkout the Grid system here in Bootstrap that meets your dimensions, it it doesn't meet then you always have your own custom grid made.
Hence you will have to do Media queries condition in your style-sheet on how will the site works on other devices.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
Since long time im using the below media queries to make responsive websites
// Large devices (desktops, less than 1200px)
#media (max-width: 1199px) { ... }
// Medium devices (tablets, less than 992px)
#media (max-width: 991px) { ... }
// Small devices (landscape phones, less than 768px)
#media (max-width: 767px) { ... }
// Extra small devices (portrait phones, less than 576px)
#media (max-width: 575px) { ... }
but when i checked bootsrap 4 , i notes they are using the below queries
/* Small. Above 34em (544px) */
#media screen and (min-width: 34em) { ... }
/* Medium. Above 48em (768px) */
#media screen and (min-width: 48em) { ... }
/* Large. Above 62em (992px) */
#media screen and (min-width: 62em) { ... }
/* Extra large. Above 75em (1200px) */
#media screen and (min-width: 75em) { ... }
im wondering should i continue on my way or its better to follow bootsrap way ,
and why they deside to start from small device to larg device?
Thank you
In its current form, your question is primarily opinion based.
It would have probably been better to ask if anyone knows what the reasons behind Bootstrap's approach might have been, although that question is, too, primarily opinion based. But your true chances of getting it answered are much higher here than trying to contact Bootstrap's authors.
And that's why I'll give you my own reasoning, coming from a hands-on approach: I need to get stuff done, it has to be fast and it has to be production ready.
As far as the order of #media queries goes, the only argument for using mobile-first over desktop-first is it sounds better for people who have no clue what it means. So you can always reply to your clients/boss, when they ask:
— Is it "mobile-first"?
— Of course, we use the latest technology...
But, in the real world, as long as your #media queries apply correct code to each responsiveness interval, you're doing-it-right.
The only things you should worry about are, in this order, where possible:
writing valid code
writing cross-device/cross-browser code
writing maintainable and easily readable code (for you and other devs)
writing less code for same functionality.
With regard to using em vs px, this is the second attempt by Bootstrap to dump px for em in #media queries. To my knowledge, the first attempt was dumped due to lack of support and differences in em calculation on a significant share of mobile browsers, at the time. However, a citation is needed here and I'm unable to find anything about that discussion which I remember reading ~2 years ago. I'm not even sure if it was around v3 or the v4 prototype, which was being released at the time. I think it was v4, though.
Anyway, if they decided to use em in v4, em is probably safe to use now.
Edit: Looking closer into v4 beta — released just 9 days ago, it looks like what you quoted is from the scss file, later parsed into px queries into the final dist code. So I am assuming the discussion I remember reading is still valid today. In conclusion, I would advise against using em in your CSS #media queries.
Last, but not least, the screen part should only be considered when you need to take care of how your page looks printed vs how it looks on screen.
If you do need to take care of this, depending on the differences between the two, you have to assess the amount of code you would override if all your existing (screen) code applied to print vs writing all print code from scratch.
If first is faster, don't add screen to your queries and place the #media print overrides last.
If the latter is faster, wrap existing code inside #media screen, add screen to your existing queries, as Bootstrap does, and place your print code inside another #media print, so it doesn't affect screen.
Note: I prefer the first method, as it is a hands-on approach, easily testable and it usually results in less code being written.
It doesn't really matter which way you choose, as long you pick one. Both accomplish same thing, but in different approach. In desktop-first your "base" styles are for desktop/large screens and you make changes for smaller screens, whereas in mobile-first you write "base" styles for mobile/small screens and make changes for larger screens. Both are fine and you can use whichever method you think makes more sense.
I want to exclude iPads from using my CSS styling for desktop views on my website. I built my site mobile-first, so the desktop styles are in a media query.
While messing around with my code I tried this:
/*mobile and default styles (the styles I want the iPads to use)*/
#media (min-width: 750px;),
#media (device-width: 768px) and (device-height: 1024px) /*iPad resolution*/ {
/*desktop styles (the styles I don't want the iPad to use)*/
/*in this code, these styles are currently being ignored by iPads*/
}
I don't think this is valid code but it works correctly in every browser and device I have tested.
It has to do with having two #media lines on one media query. The second set of parameters are somehow excluded from the query, but I don't understand why. Without the second #media then it works like an or operator and the desktop styling will show up on an iPad.
I have tried nesting media queries, which doesn't seem to work, and I have tried using not, but the first line will still be true and thus it work work either.
I haven't found any information about using #media twice in a statement and having it somehow exclude the second media query, could someone explain the correct way to do this, or at least explain why this works?
Brilliant - yet incorrect syntax according to VS12.
Can be seen working here http://www.stilborg.com on iPad.
I'm developing a web app for feature phones in Africa (non- smartphones whose screen size is usually 128 x 160 px (1.80")).
I need to learn how to make the website responsive, or display properly for a screen size so small. I'm aware that regular CSS queries dont work well for feature phones, so any other suggestions?
This:
https://developers.google.com/webmasters/mobile-sites/mobile-seo/other-devices/feature-phones?hl=en
is something I read on the topic, but it's vague for me to understand what changes to make in my CSS file (which is using bootstrap at the moment) Will really appreciate your help!
To make a website responsive we have to use CSS3 #media queries. Write #media queries for different screen sizes. But #media queries doesn't support for older version browsers. In your case (non-smartphone) #media doesn't work. I suggest create a sub domain for mobile phones like http://m.website.com and use javascript to redirect to mobile version site if user opens http://website.com .
#media only screen
and (min-device-width: 128px)
and (max-device-width: 160px)
{
/* Put your CSS Code for small screen */
}
Some useful articals about #media .
http://code.tutsplus.com/tutorials/quick-tip-a-crash-course-in-css-media-queries--net-14531
http://www.htmlgoodies.com/html5/tutorials/an-introduction-to-css3-media-queries.html
https://css-tricks.com/logic-in-media-queries/
http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
You can either try things like foundation which you can use pre-made tables, and sections with pre-defined css properties:
http://www.foundation.zurb.com/
Or you can use percentages, width: 15%. So it will get the designated percentage of your device and calculate the correct size based on that.
Also what your listed site is saying(google), it creates different css files based on your device. So when you use <link> to set your CSS file you can make it so certain devices use certain files:
(Taken from Google):
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" />
Is there a way to always force the mobile layout using only CSS in Bootstrap responsive?
I think one way to do it would be to set #screen-sm to a really large number. But I'd rather not mess with LESS files, can I do it using only CSS?
I ended up creating a custom bootstrap build using their website. Here's my version: http://getbootstrap.com/customize/?id=52279502e4625826d93b
If anyone has a better way of doing this, please share.
You have to use media query:
#media (max-width: 480px) and (min-width: 360px) {}
I hate to ask what seems like something that could be Googled but I can't really find much and WP forums and such just tell me to re-size my GIFs.
I have a sports site and after events I like to post GIFs in my articles, the problem is they end up being about 4-7mb per GIF usually and I usually have about 10 of them. This obviously isn't very user friendly for some people and mobile, so I'm looking for suggestions on the best way to manage these things.
My current visitors love the GIFs but I don't want to discourage new people from using the site.
Have you tried photoshop to optimize them?
http://www.digitalfamily.com/tutorials/optimizing-images-in-gif-and-png-formats/
What you could do is use create two different image sizes one for mobile and one for desktop and then using css media queries you can change them.
/* iPhone 4 ----------- */
#media only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min- device-pixel-ratio : 1.5) {
/* Styles */
.mobile-only {background: url('your-image.gif');
}