Building a site with Boot Strap

by krull
8 replies
I've handled basic html, wordpress, some flash stuff and a few other things in my time but I need to build a site in Boot Strap which is new to me. I've downloaded Boot Strap and I bought a theme for it so I've got to figure out how to put it together.

The theme creator said "You'll need to write scripts using PHP, JSP and ASP.NET for building the site using the theme". I kind of understand how to insert code to call pages up but I'm going to have to look into this pretty deeply to get started. The theme is a bunch of html pages.

Are there any tutorials out there that will show me how to do this? The design is done, just need to 'put it together'. I'll also eventually have to hire someone to help with the stuff that I can't do.
#boot #building #site #strap
  • Profile picture of the author eminc
    By bootstrap I hope you are talking about Twitter bootstrap. Correct me if I am wrong. If its that, you will easily get this on the site from where you downloaded it.

    Can you please elaborate what exactly you're trying to make here. Themes are always a bunch of files, with elements grouped together like HTML form stuff, validations etc. in one page, charts in the other. You have to take reference from them, and make the same thing in your page. For example, if you are trying to make a form page, include JS calls from the form sample page, class names and how to run.

    Typically with every theme the designer provides documentation. If the designer haven't provided documentation, you can dig in to it yourself. First you have to decide on what you want to put in a particular page, then go in the template file associated with that particular element and do some digging there.

    If you need specific help, you can put parts of code here. Will be happy to help.

    Thanks.
    {{ DiscussionBoard.errors[8363543].message }}
  • Profile picture of the author FostinWD
    I'm not an expert but I have read some tutorials, and the best way to start is by playing around with the html of any of the examples shown in the site:

    Example Templates for Bootstrap

    you can just copy the source code, modify the css calls and start moving things around and adding stuff.

    I love bootstrap I wish I had more time to work with it.
    Signature

    If you're going to tell members to check your signature, this is what they'll see.

    {{ DiscussionBoard.errors[8363792].message }}
  • Profile picture of the author krull
    The documentation is kind of lacking for the theme. I'm going to have to dig in as you said.

    I've seen some bootstrap sites that use html files that you can see in the lower left corner when hovering over a link, and some seem to not have extensions. Is that because they're renamed the html files to php files?

    The template is already set up pretty well, so I guess I can just edit it and see what happens.
    {{ DiscussionBoard.errors[8363960].message }}
    • Profile picture of the author wayfarer
      Originally Posted by krull View Post

      I've seen some bootstrap sites that use html files that you can see in the lower left corner when hovering over a link, and some seem to not have extensions. Is that because they're renamed the html files to php files?
      That's because there's no limit to the number of technologies you can use to build a website. Bootstrap is just a layout framework, you plug it into sites, not the other way around. If you're confused about this, you should probably just study general web development. Bootstrap is just a shortcut to achieving certain behavior. The choice of server-side language (like PHP), makes absolutely no difference. You could use Ruby, Python, ASP, PHP, Python, whatever, even nothing (a static site), it doesn't matter.
      Signature
      I build web things, server things. I help build the startup Veenome. | Remote Programming Jobs
      {{ DiscussionBoard.errors[8363984].message }}
      • Profile picture of the author krull
        Thanks for the advice everyone. In the end I'll still need to hire someone to do the more advanced stuff but I'm getting the hang of it.
        {{ DiscussionBoard.errors[8364046].message }}
  • Profile picture of the author krull
    What's confusing me is this: I see where to edit the navbar in the index.html file. But how is that navbar pulled from every page of the site without having to copy that long code over for every single page?

    Looks like I've got lots of work to do. I'll try and see if there are some programmers around to hire to help out though. It can't be too difficult.
    {{ DiscussionBoard.errors[8364084].message }}
    • Profile picture of the author wayfarer
      Originally Posted by krull View Post

      What's confusing me is this: I see where to edit the navbar in the index.html file. But how is that navbar pulled from every page of the site without having to copy that long code over for every single page?
      You can use server side includes of any sort. An example is the PHP include() function, but there are lots of other ways to do it also.
      Signature
      I build web things, server things. I help build the startup Veenome. | Remote Programming Jobs
      {{ DiscussionBoard.errors[8364331].message }}
    • Profile picture of the author eminc
      Originally Posted by krull View Post

      What's confusing me is this: I see where to edit the navbar in the index.html file. But how is that navbar pulled from every page of the site without having to copy that long code over for every single page?

      Looks like I've got lots of work to do. I'll try and see if there are some programmers around to hire to help out though. It can't be too difficult.
      wayfarer is correct, you have to use a include or something else. there is one more way, to pull them and create them from a file using Javascript, there are all sorts of plugin these days

      If you want to do it yourself, make a separate copy of plugin, and edit it and compare the changes. Next, isolate individual elements, get to know which component works with which JS and CSS file. Usually there would be only one CSS for whole site, but different JS files for different plugins. By this you will know what element calls which JS and CSS functions. After playing a while with these files you will be able to put individual elements in a separate file. However, it is going to take some time.

      My suggestion in this case would be to create wireframes first. Maybe draw it on a paper or using a paint program, and then give it to a programmer with the theme or do it yourself. Becomes easier for a deisnger/programmer if they actually see what you have planned in your mind. Explaining it as text is sometimes difficult.
      {{ DiscussionBoard.errors[8364519].message }}

Trending Topics