Digital Posted August 19, 2017 Share Posted August 19, 2017 About this Guide This guide goes over how to use Bootstrap (version 3) to develop a responsive design that works well on desktops, tables, and mobile. This assumes some knowledge of HTML and CSS. Responsive Design Concepts To understand responsive design is to change how you think about a web pages layout. In Bootstrap, you are given a framework, known as a Grid to work with. The page is split into 12 columns, and your containers (block objects such as div tags) can stretch across these columns. Any container that stretches beyond the 12 columns will automatically move under the previous one. Bootstrap also gives us several useful utility CSS classes we can use to hide some of these containers from mobile, or even desktop, thus allowing the designer to choose what shows on which display. How should you test your sites responsiveness? Chrome wins here in the ability to mimic the displays of a variety of mobile and tablet display sizes. You can see how your site performs by right clicking, clicking Inspect, and in the Dev Tools panel that shows up, clicking on the mobile view. If you are trying to get your site to work properly, I usually prefer to have two windows open, one with the mobile view, and another without. That way I can refresh both and see what the effects are. Getting started Bootstrap provides us a great starting template for a responsive layout. Lets take a look: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="/favicon.ico"> <title>Starter Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="assets/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="starter-template.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="container"> <div class="starter-template"> <h1>Bootstrap starter template</h1> <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> </div><!-- /.container --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="/assets/bootstrap/dist/js/bootstrap.min.js"></script> </body> </html> This will display a page similar to this page. It is a simple page that gives you an idea of how a navbar should look/work. Lets take a look at the different elements of a navbar next. The Navbar The navbar in bootstrap is probably the most complicated part of using Bootstrap in a responsive manner since it has to do the most work to display appropriately. Note it contains several elements that are wrapped. Starting with a nav tag with a class of navbar (and in the above two more classes that make it dark (navbar-inverse) and make it stick to the top of the page (navbar-fixed-top). The two extra classes are not really needed, if you remove navbar-inverse, you will want to add navbar-default instead. This will give you a lighter colored navbar. Inside the main nav tag, you will find a div with a class of container. This makes sure elements inside the navbar are responding to the Grid I mentioned above. Next is the navbar-header. This contains the "hamburger" or the 3 line button you see in mobile, note the data-* attributes on it, which make it actually display the menu in mobile. Particularly data-target is important here, as it points to a tag lower with the id of navbar. The navbar-header also has a link with a class of navbar-brand, this becomes your navbar's title. Finally we finish this with a div class with an id of navbar (remember what I said about the data-target above), and inside this are the links you wish to display in your navbar. This is pretty self expanatory. Combined they display a navbar that is great for starting out. You can read more docs about the navbar and what you can do with it here. Using the Grid Since I could spend a good while on Grid Systems in CSS, and it would be beyond a wide scope, and since the Bootstrap documents are even better at providing examples, I would encourage you read through them. They provide several different use-case examples to make sure your content reacts properly in different displays. Read the Grid documentation. To finish up To finish up this quick guide, the best advice I can give anyone starting with Bootstrap is to play with it, keep the documentation open, and initially just stick to the examples they show. Overtime you will gain enough confidence to be able to expand and do some pretty neat things as you will understand how everything works together. It may seem daunting at first, but everyone starts somewhere. As always, feel free to comment with questions or post new questions in our Coding forum, and I am sure the community or myself will help out. View full guide Quote Link to comment Share on other sites More sharing options...
Dinocanid Posted August 19, 2017 Share Posted August 19, 2017 Any tips on how to make iframes scale well on mobile? I can get it to fit inside the container, but only the corner of the image shows: This is what I have (I'm using Bootstrap 4): <div class='embed-responsive embed-responsive-1by1'> <iframe src='http://localhost/wild-souls/wolfimage' style='border:none; width:800px; height:700px;' class='embed-responsive-item'></iframe></br> </div> Unfortunately, I can't use IMG tags since my code relies on it being in an iframe. I've tried other, non-bootstrap methods for this, but they can only seem to show part of the image with/without scrollbars, which isn't exactly ideal. Quote Link to comment Share on other sites More sharing options...
Digital Posted August 20, 2017 Author Share Posted August 20, 2017 6 hours ago, Dinocanid said: Any tips on how to make iframes scale well on mobile? I can get it to fit inside the container, but only the corner of the image shows: This is what I have (I'm using Bootstrap 4): <div class='embed-responsive embed-responsive-1by1'> <iframe src='http://localhost/wild-souls/wolfimage' style='border:none; width:800px; height:700px;' class='embed-responsive-item'></iframe></br> </div> Unfortunately, I can't use IMG tags since my code relies on it being in an iframe. I've tried other, non-bootstrap methods for this, but they can only seem to show part of the image with/without scrollbars, which isn't exactly ideal. My first question will be as to why you need to have an iframe if the url in question displays an image, or does it display a html page? If it displays an html page, then make sure the contents scale appropriately as well. Second, you might have better luck by removing the style attrib on the iframe. <div class="embed-responsive embed-responsive-1by1"> <iframe class="embed-responsive-item" src="http://localhost/wild-souls/wolfimage"></iframe> </div> Also note the embed-responsive-item class on the iframe. Quote Link to comment Share on other sites More sharing options...
Dinocanid Posted August 20, 2017 Share Posted August 20, 2017 14 minutes ago, Digital said: My first question will be as to why you need to have an iframe if the url in question displays an image, or does it display a html page? If it displays an html page, then make sure the contents scale appropriately as well. Second, you might have better luck by removing the style attrib on the iframe. <div class="embed-responsive embed-responsive-1by1"> <iframe class="embed-responsive-item" src="http://localhost/wild-souls/wolfimage"></iframe> </div> Also note the embed-responsive-item class on the iframe. I have to use an iframe since I'm not using ajax; which is difficult to use with mysidia. Inside the ImageMagick generator file, it gets the user's ID from the URL of the parent page and fetches the appropriate namespaces from the database so the correct layers show. Like this for example: $fullurl = $_SERVER['HTTP_REFERER']; $cleanwid = end(explode('/',trim($fullurl,'/'))); $pet = $mysidia->db->select("wolves", array(), "wid='$cleanwid'")->fetchObject(); if ({$pet->pid} != {$mysidia->user->pid}) { $document->add(new Comment("This wolf isn't in your pack!")); return; } else{ //code... } Not the cleanest way, but it works. Using your code just makes scrollbars appear, but that seems like my best option right now I suppose. After searching around, what I'm looking for might not be possible in this case. Quote Link to comment Share on other sites More sharing options...
Digital Posted August 20, 2017 Author Share Posted August 20, 2017 2 minutes ago, Dinocanid said: Using your code just makes scrollbars appear, but that seems like my best option right now I suppose. After searching around, what I'm looking for might not be possible in this case. I would make sure you are scaling your image after generation before displaying to be the same size as the viewport your iframe is. The problem is it isn't going to be responsive. I am not familiar (and since it is not friendly on php 7), and am unable to look at mysidia to see about the ajax portion, although it should be entirely possible to do it that way. Quote Link to comment Share on other sites More sharing options...
Dinocanid Posted August 20, 2017 Share Posted August 20, 2017 I'll look into doing that. It's sort of possible to use ajax, but it requires another .htaccess file and it doesn't allow any mysidia's framework code. So I could either use ajax or mysidia for a php file, but not both. Quote Link to comment Share on other sites More sharing options...
Kesstryl Posted August 20, 2017 Share Posted August 20, 2017 @Dinocanid if you ever get back on the Mysidia forums, someone did write a Bootstrap template to use with Mysidia. Thank you @Digital for this, Bootstrap is awesome stuff! Quote Link to comment Share on other sites More sharing options...
Dinocanid Posted August 20, 2017 Share Posted August 20, 2017 6 minutes ago, Kesstryl said: @Dinocanid if you ever get back on the Mysidia forums, someone did write a Bootstrap template to use with Mysidia. I use that on Foodbabs, but unfortunately for Wild Souls I wanted the site to be centered with a visible background, and that template takes up the whole screen. I found it better to make a new one instead of modifying that one, since I tried and all I ended up with was bad overall scaling on medium to extra small screens, and I couldn't get the menu to fit well with a container/wrapper for some reason. Either way, I think I would end up in the same place; except that template uses BS3 and I use BS4. Quote Link to comment Share on other sites More sharing options...
Kesstryl Posted August 20, 2017 Share Posted August 20, 2017 (edited) The best bet would be to use Bootstrap and make your own template off of Bootstrap CSS files. There are some sites that let you play with layouts with Bootstrap, and it will generate a Bootstrap template code for you, this is the site that I've used for doing such things: http://www.layoutit.com/ Edited August 20, 2017 by Kesstryl Quote Link to comment Share on other sites More sharing options...
Dinocanid Posted August 20, 2017 Share Posted August 20, 2017 2 hours ago, Kesstryl said: The best bet would be to use Bootstrap and make your own template off of Bootstrap CSS files. There are some sites that let you play with layouts with Bootstrap, and it will generate a Bootstrap template code for you, this is the site that I've used for doing such things: http://www.layoutit.com/ My current layout works fine, I just can't show the full iframe on smaller/mobile screens. Thanks though! Quote Link to comment Share on other sites More sharing options...
judda Posted August 25, 2017 Share Posted August 25, 2017 You don't really need to use AJAX for that - all you really need to do is make an image (<img>) which you are able to modify using JavaScript. Then all you need to do is dynamically change the URL depending on the user's input. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.