Tip:
Highlight text to annotate it
X
hey everyone and welcome to the very series of video tutorials from
easy dev tuts and in this series we are going to talk about some bootstrap, if you don't know what that is its a
powerful from a framework for faster and easier web development just like it says on the front page
so let's go ahead and get started
if you haven't done so already, navigate yourself to twitter.github.com/bootstrap
and
click on the customize link at the top
make sure you have all the components checked
uh... we may not use all of them in future projects
but it would be cool to have them because we may decide to use them later on.
make sure you got everything checked for
jquery is well and customize variables, feel free to fill them out if you want
i'm going to go ahead and leave mine at default
cause I like the way it looks already and
I don't have to fill that out so
now the reason we're going download from this page as opposed to the front
page
is that we're just gonna get on minified version of css
which will include the responsive as well as all the components whereas if you download from the
front page uh... you get two seperate css file
and uh...
I don't need that extra file
go ahead and save it
i'm gonna drag mine over to my sites
folder
and then
let's just test it our real quick
make sure it works
i'm going to be using sublime text 2
and it doesn't really matter which one you use, it's just simple html
any old text editor will work
i think
I'm going to save my file as
index dot html
and i'm going to go back to the twitter website and then go to get started
and i'm going to download the very
basic bootstrap template
actually i'm just going to copy it
not download, but you get the idea
and i'm going to paste it here and here we go we should be ready!
now to test this
i'm just going to add a simple
anchor tag
and give it a class of
btn for button
and just type a quick message here
and save
go back to chrome and
put in local host
bootstrap
and there we go it works
and it's already got a nice little hover effect too
so there we go
it works now we
head back to our text editor and we're done
if you stick around for this series we are going to learn a lot of cool stuff and eventually make
some templates for joomla
and wordpress as well
and uh...
throughout the whole series we're going to just talk about bootstrap
we'll go over every single
uh... page here not every single item in the page but i'll give you a nice summary of
what it means and will mix it in with some code
and uh...
yet it'll be a really nice breakdown of twitter bootstrap so if you haven't already, go ahead and
that subscribe button and um
yea look forward to learning!