Jay Redd
asked on
Getting Started With Bootstrap
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.j
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?
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.j
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?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
I was able to get it working with either CDN or local jquery.js.
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.
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.
ASKER
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...
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...
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.
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.
ASKER
Thank you! I'm up and rolling now! next stop is Symfony!
That is a pretty big step.
ASKER
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 :/
Just gonna start with tutorials :/
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!
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!
ASKER
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!
something tells me I'll be back with Symfony questions too! thanks again!
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
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
ASKER
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.
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 https://www.experts-exchange.com/Programming/Languages/Scripting/PHP/A_11769-And-by-the-way-I-am-new-to-PHP.html
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 https://www.experts-exchange.com/Programming/Languages/Scripting/PHP/A_11769-And-by-the-way-I-am-new-to-PHP.html
ASKER
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..