As a starting point, let's see what it looks like full sized: Our next order of business is to handle the Kendo UI ListView. That's an example of using some of Bootstrap's responsive capabilities. Now our navigation looks good, and the first column gets stack on top of the second when the window gets too small. Clicking on the button will expand the content showing the links that were displayed horizontally when there was room enough to do so. As you resize the width of the window, the links will disappear and the button will appear. This class will hide the list of links when the display gets too small to display them all horizontally. The first thing that we need to do is wrap our unordered list of links in a div that has the nav-collapse class. We can handle this better using Bootstrap's Navbar toggle buttons. When the screen gets real small, it's just a vertical list of items. With the bootstrap-responsive CSS file, the navbar starts stacking the menu items on top of each other.
Bootstrap responsive layout how to#
For the sake of showing you how to deal with a small screen and a large header, I have added a few items to the navbar. The navbar is currently not a problem for us because it doesn't contain very many items. But we are going to have to implement a few other items from the Bootstrap arsenal, as well as a few of our own media queries to get things looking just right. It will collapse the columns and then stack them on top of each other when the screen size gets small enough.
Include responsive design support for Bootstrap Let's look at a simple media query to get started: If you want to get simple Media Query support for IE7 and 8, you can use the popular Respond.js pollyfill. Media queries are supported in IE9+ and pretty much every other browser, including mobile where they are particularly applicable. If those conditions are met, the style is applied. It simply apples some CSS based on certain conditions set forth. Media query is a really fancy term for "conditional CSS rule". Responsive design is fundamentally the concept of changing the way your application looks and behaves as the screen size gets smaller. The term was originally coined by Ethan Marcotte in his article at A List Apart and later in a book on the same subject. To do that, we are going to be doing a little responsive design today. We know that we can increase the reach of our application significantly if we do some things to help it function more like a mobile application at smaller sizes. Yes, it technically works on tablets and phones, but it doesn't look very good and it's not usable with all the buttons and links being so small. The application looks great, but it has a serious limitation. I created a sample 2 column application with a fixed header that allows a user to search the Rotten Tomatoes for movies. Last week we looked at how Twitter Bootstrap is the perfect compliment to Kendo UI in that it helps you easily lay out your application while taking care of all the tricky CSS that may be happening under the covers.
0 kommentar(er)
