?
Solved

Getting Started With Bootstrap

Posted on 2014-04-13
14
Medium Priority
?
546 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 7
14 Comments
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 39997304
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
ID: 39997312
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
ID: 39997356
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39997370
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
ID: 39997374
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 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39997389
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
ID: 39997436
Thank you! I'm up and rolling now! next stop is Symfony!
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39997452
That is a pretty big step.
0
 

Author Comment

by:Jay Redd
ID: 39997470
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 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39997483
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
ID: 39997495
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 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39997507
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
ID: 39997512
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 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39997527
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Computer science students often experience many of the same frustrations when going through their engineering courses. This article presents seven tips I found useful when completing a bachelors and masters degree in computing which I believe may he…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
Viewers will learn how to properly install Eclipse with the necessary JDK, and will take a look at an introductory Java program. Download Eclipse installation zip file: Extract files from zip file: Download and install JDK 8: Open Eclipse and …
Suggested Courses

649 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