I'll run you through what I've done so far, though. First thing is you have to download bootstrap and extract the files. Once you've done that, you move the extracted files into whatever folder you'll be working out of. For example, I made a directory in my public_html called bootstrap and placed the extracted files in there. After that, you don't have to touch them.
I made an index.html that I was working with. In that index.html file, I copied and pasted the HTML and CSS code from my blog (the awesome one with the lion on it) so I could work with that. This is what the beginning of my HTML looked like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
If you didn't notice, what I added in there is the <meta name="viewport" content="width=device-width, initial-scale=1.0"> . That does something to the width so that the width of the page changes depending on the size of the device viewing it. Make sense?
<style>
@import url(style.css);
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
</style>
What I added in there was the <link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> which also helps with the resizing of the web page based on the width/height of the device it is being viewed on.
That's all I did! This is what the webpage looked like on my iPhone BEFORE the responsive CSS:
This is what is looks like NOW:
As you can see, it looks weird. HOWEVER, do you see the difference in the size of the text? That's soooo much progress. My personal CSS is somehow conflicting with the CSS that bootstrap provided me, so I have to go in and see what I can do. Maybe this new tutorial can help??
Excellent! Thanks for finding that tutorial. I'm going to experiment with this myself. It is obviously a very important technology, and it could make the task of being able to create responsive websites within our grasp sooner than it would be if we had to do it all the hard way.
ReplyDelete