Newbie needs help running Bootstrap template Follow

Created August 13, 2014 21:32

I followed the instructions "Generating a Project from a Framework" in the JB Web help document. I have a folder with bootstrap files in it, and Bootstrap appears and is checked in the plugins page of settings. I created a new project using Bootstrap template, and then created an Index.html document. My goal is to play with Bootstrap in PHPStorm.

I can't seem to get Bootstrap to make any changes by coding in the index.htm. doc. Here's a sample:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div >
        <div >"Span 8"</div>
        <div >"Span 4"</div>
    </div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

Is my code wrong, or are my settings wrong for Bootstrap? I'm not sure where my project files should be and if its able to see the Bootstrap files. When I run this in the browser I don't get colums like my tutorial says I'm supposed to get. I just get two lines of text. What do I need to do to use Bootstrap in PHPStorm?

Thanks for any help- I'm a total newbie- just a few hours of playing with this IDE and HTML. Thanks for your patience.

Wayne

4 comments

Wayne Cordrey

Created August 13, 2014 21:35

Haha
I wanted to post the code, not the output of the code. Here's the code:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div >
        <div >"Span 8"</div>
        <div >"Span 4"</div>
    </div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

What do I need to make Bootstrap work in PHPStorm?

Thank you!

Elena Pogorelova

Created August 14, 2014 11:40

Sorry, haven't got what you are talking about...

I followed the instructions "Generating a Project from a Framework" in the JB Web help document

Do you refer to http://www.jetbrains.com/webstorm/webhelp/generating-a-project-from-a-framework.html? What template have you chosen namely?

Bootstrap appears and is checked in the plugins page of settings

Sorry? Creating a project by template doesn't add any plugins...

I can't seem to get Bootstrap to make any changes by coding in the index.htm

Can you clarify what changes are expected?

When I run this in the browser I don't get colums like my tutorial says I'm supposed to get.

what tutorial do you refer to?

Sorry for these questions - it might be just a misunderstanding...

Wayne Cordrey

Created August 14, 2014 15:55

Thanks so much for taking time to answer.
To answer your clarifying questions:
1. Yes- Those are the instructions I followed.
2. In my attempts to get Bootstrap working, I checked to see if bootstrap was available as a plug in, and it was.  I didn't know that the plug in is not related to the project template.  Good to learn this.
3. If you look at the HTML code, I was trying to get bootstrap to create two colums using
             <div >"Span 8"</div>
             <div >"Span 4"</div>
     The Tuts+ tutorial used these lines to generate bootstrap columns.  I didn't get any columns when I tried it. https://webdesign.tutsplus.com/courses/bootstrap-for-web-design/lessons/the-grid-system is the Tuts+ tutorial I'm using.  Its about bootstrap, not about PHPStorm.

Basically, I need to know how to get Bootstrap working in PHPStorm.

Wayne

Elena Pogorelova

Created August 15, 2014 12:32

The tutorial is not free, so I'm not sure what it is about. Definitely a div tag can't magically turn into a column - neither with PHPStorm nor without it:) BTW, all PHPStorm does is downloading the compiled and minified versions of CSS, JS and images into a project directory - nothing more. The IDE itself can do nothing to 'make it work'

What bootstrap version do you use? the latest bootstrap (v.3.2.0) doesn't include 'span8' and 'span4' classes, as far as I can see. There are '
col-md-', 'col-lg-', 'col-xs-' (see http://bootstrapdocs.com/v3.2.0/docs/css/). And in any case you need to make sure to include a link to
bootstrap.min.css into your HTML file

Please sign in to leave a comment.