Solved

Getting Started With Bootstrap

Posted on 2014-04-13
14
527 Views
Last Modified: 2014-04-13
I'm trying to run through the bootstrap tutorials but I feel like i'm missing some big piece of information that just isn't anywhere on their site. I'm fairly new to all this and just have a Zend server installed on my windows 7 machine. I wanted to try some of the examples as I work through the introduction tutorial of bootstrap and it is working, but it doesn't look the same. For example, if I do any <table class> definitions, it just looks like a plain html table with no grid, no colors or any formatting that should show up.

I'm just not clear on the setup. I haven't seen anywhere that says, download these files, put them here, and then start writing your code in this directory. It's like they assume you know that everywhere. Maybe I should and missed it somehow :)

Is there a default place I should be putting the bootstrap downloaded code, the same goes for symfony too, which I want to learn. Up until now, I've just worked with php and a mysql database and put all my test files in htdocs in the ZendServer directory and then gone to localhost/test.html or whatever in my browser.


For my attempts at the tutorial, I have this setup right now
-htdocs
  -bootstrap
     -css
     -fonts
     -js


And I have a test.html with my code in the htdocs directory.

however, I see the code calls
<script src="/scripts/jquery.min.js">

which i'm assuming would mean htdocs/scripts/  but I don't have that..and i haven't seen anything telling me how to get it..

Is there something better than Zend Server I should be using?
0
Comment
Question by:Jay Redd
  • 7
  • 7
14 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
Comment Utility
I have a great primer on bootstrap on this question http:Q_28406542.html#a39982826

> if I do any <table class> definitions

The idea is to get away from tables and use the grid for columns http://getbootstrap.com/css/#grid.

The only two items you need to place on your page (in addition to jquery) are the boottrap js and css files.

<script src="/scripts/jquery.min.js">
That file structure means that jquery is in a top level folder called scripts.  If your jquery is in a folder called js then it would be  <script src="/js/jquery.min.js">.  You can use a cdn to load your bootstrap files. http://getbootstrap.com/getting-started/
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
  <meta charset="utf-8">
  <title>padas Q_28411455</title>
</head>
<body>

</body>
</html>

Open in new window

0
 

Author Comment

by:Jay Redd
Comment Utility
Scott, you are saying I do need to download jQuery separately then? I have been going through these tutorials and it never mentions that anywhere.

and the use of table class is just what I got out of their tutorial, I want to go through the tutorial from the start, but their example shows a fancy looking table with colors and frames, and mine is just a plain looking one with no bars or colors…which makes me think something isn't working right..
0
 

Author Comment

by:Jay Redd
Comment Utility
I  managed to get it working. I found a tutorial on another site that takes things one step at a time and didn't gloss over the jquery part. I just like to understand each little piece as I go.

I was able to get it working with either CDN or local jquery.js.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
They are not easy to find, but on the home page of http://getbootstrap.com at the bottom is a link to some examples http://getbootstrap.com/getting-started/#examples.

If you use these to play with or even as an example to try and recreate on your own you can get a good feel for how it works.
0
 

Author Comment

by:Jay Redd
Comment Utility
One question on that since you are still here :D

Do I just look at view source on those? I didn't really see how on that site, I could download like an entire zip of the needed files…

sorry if these are newbie questions...
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
Yes, just view source.  

Keep in the back of your mind the reason for using bootstrap is to make starting your responsive site easier.  The heart of bootstrap are the media queries and css grid.  You still need to style it to make it your own.

Designing  a responsive page takes more thought because you have to think about the page on 4 different screen sizes.  If you have 2 columns for instance, on the larger screens you may have those side by side, but as the viewport narrows, they stack.  This allows you to show the same data without having to shrink the font size or use the same font and images without having to scroll.

Another good responsive grid system is Foundation http://foundation.zurb.com/.  I like bootstrap and I think it is more widely used. However, the Foundation site has a lot more information on responsive design.
0
 

Author Comment

by:Jay Redd
Comment Utility
Thank you! I'm up and rolling now! next stop is Symfony!
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
That is a pretty big step.
0
 

Author Comment

by:Jay Redd
Comment Utility
Yes, somehow symphony seems way more foreboding. My freind has a project that is bootstrap+synfony, and I am planning to start working with him, so I want to see how much of this I can figure out myself so I won't just be a thorn in his side with dumb questions (instead I'm a thorn in EE's side).

Just gonna start with tutorials :/
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
Your not a thorn.  We are here for any of your questions.  

Using the symphony framework may not be something to to jump right in without knowing what you are doing.  

When you are looking at bootstrap samples, keep in  mind you are looking at a full page all at once.  When you are using a MVC framework like Symfony you are only seeing parts of the code at a time.  

Good luck!
0
 

Author Comment

by:Jay Redd
Comment Utility
Thanks for your encouraging words. I realize that Symfony is a whole other level of this! It's gonna be painful but I can't just be a "sql/dba" guy anymore, time to branch out. No pain no gain :)

something tells me I'll be back with Symfony questions too! thanks again!
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
I agree.  You have the back end knowledge and now you need the front end.

Instead of jumping around, start with a good foundation.  Really learn HTML and CSS.  From there, get a basic understanding of javascript then move to learn jquery as that will be used a lot.  

Spend the week here http://www.codecademy.com/learn

Start with HTML even if some of it may be remedial.  Having a good understanding of HTML will help you better understand CSS.  And without a very good understanding of html/css, jquery will be very confusing.  

Once you have that, you can start with php.  From there you can move on to MVC and OOP.  My guess is you will be doing that as a crash course, trial by fire.    Like sports, don't skip the fundamentals http://www.codecademy.com/learn
0
 

Author Comment

by:Jay Redd
Comment Utility
Thanks. I already did the php lessons on code academy and you are right, I need to do the CSS one for sure. I think that's my next step. Then I'll come back to symfony.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
I find it is best to learn by a real project.  There are some examples from bootstrap http://getbootstrap.com/getting-started/#examples where you can view source, copy paste to your own environment.

http://getbootstrap.com/examples/blog/

1) Recreate this using php where the navigation and right side are part of a template so you can reuse the code from one spot.  If you change the nav, it will change on all pages.

2) Dynamically generate the body and right side from your db of choice.   http://www.php.net/manual/en/refs.database.php

3) Recreate this as a symfony template

A very good article from Ray http://www.experts-exchange.com/Programming/Languages/Scripting/PHP/A_11769-And-by-the-way-I-am-new-to-PHP.html
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
topping2 challenge 13 55
Encode a password 2 36
How to remove decimals from calculation amount 8 22
wordpress issue 2 15
This article will show, step by step, how to integrate R code into a R Sweave document
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to dynamically set the form action using jQuery.

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now