How to do MY BOOTSTRAP website design

Mar 30, 2016 07:40 PM  <<April 9... NO... this RALLY needs to be re-written

as RH says... this is un-necess. complex... this style is from  Dan Scott and

is NOT needed... Update this!!!

in DW = dreamweaver;

(note:  I've  altered  def. of control + S   to be  SAVE ALL

(edit>keyboard shortcuts>   (first remove it from  SAVE  and then add it to SAVE ALL)

1)  on your desktop....  create a brand new empty folder,  eg   article...

2)  Site> New Site...  call it article and browse to the folder  article... and click done.

3)

File>New> New document> HTML> Bootstrap> create new

(but must uncheck the "include a pre-built layout box"

then SAVE (control s) and rename  Untitled to be   Index.html...

then open CSS designer and hit  + (on Sources tab) to create a

brand new  CSS called  main.html   (link to index)...

Now, inside, just after   <body> tag,

INSERT >  Container-fluid  (note:  that is a BS component itself....

therefore it  CANNOT be modified in any way !!!!

The only way to modify BS grids or components is with a modifying

,class .

So,  go to CSS Designer and (in main.css) under

Selectors....>  hit + to create a brand new class called, eg

.big-fluid  and give it a bkgrnd color like light gray so you can SEE it.

Note: when you create a class... every class begins with a dot... ie,  .big-fluid    ...

NOTE:  to see it when you hit  F12  (to get to Chrome, eg)... you MUST give it a height... so...

But,  do NOT give it a min-height (which would display in Chrome but not in DW);

so, rather,  use PADDING,  and give it  100px  top and bottom.

Next, type inside the new  container-fluid.big-fluid  some content like

big-fluid contents  (just so you see what it does)

What it does:  container-fluid   just stretches to inffinity  when you strech out the window.

eg over all my 4 monitors.

Look at main.css  you now have this....   each class is name  beginning with a . (ie a period or dot)

@charset "utf-8";    ... that line is always automatically inserted by BS...

.big-fluid {                ... here .big-fluid class is defined

                        and its properties appear inside  the curley braces.

                    each property is name ends wit a colon :  and the value ends with a semi-colon;

background-color: rgba(191,188,188,1.00);

padding-top: 100px;

padding-bottom: 100px;

}

now, look at the CODE of  index.html

it appears as

<div class="container-fluid big-fluid" > </div>  ...

NEXT,  INSIDE  the .container-fluid.big-fluid   class

INSERT  (and NEST)  another BS  container   this one should be a  FIXED container

and is just named  Container  (on the  Insert>  Bootstrap components  drop down in DW.

again... you cannot directly modify that; since it is defined inside  BS itself,

so again you give IT a special name, eg  

.big-fixed  and as above ,

use the CSS  Designer in DW  as above

to name it  inside the CSS Designer> Selectors menu  (hit +) and name it

.big-fixed  (or anything else)

and  give it props  as above...

(note:  if you do NOT give it some content that occupies room... it will NOT show in a browser!!!!

so... give it some height again, as below...

.big-fixed {

background-color: rgba(233,178,179,1.00);  (pale red)

padding-top: 50px;

padding-bottom: 50px;

}

now test it out...  hit  F12  to test it in Chrome  eg

or use the little Globe at bottom of DW or the 

File>  Preview in Browser  drop down  to test it.

Note that  while  container-fluid stretches to infinity....

container  inside  just stretches to  one monitor  (probably  is 1280  max  as in  1020 by 1280 pixels)

then  everything you next inside THAT  (ie inside  container.big-fixed

you can  give a width to,   eg  Richard like percentages  ie %...

remember to  SAVE as you work

and then rename  your evolving folder on your desktop  eg

copy and rename the folder from  Future Website  to  Future Website 16330

for  2016, March, 30th day  (today)  and  versions as  a, b, c.

NEXT,  INSIDE  container.big-fixed...

INSERT   another  DIV

Dan Scott of BYOL does INSERT (on HTML/ BS components)

a  "Grid Row with column"   can specify any number of  columns.

and  then just  manually copy the code  if you want more  rows.

I expt with this...

give it a bkgrnd color to see it... recall, must give it a class to do this.

eg .one-row    ...  bkgrnd green.

(see my notes  abt  .col-sm-12  vs  .col-md-12  versus  .col-lg-12)

NOTE:  as you create a new, special name  (I now have three new classes)

each must in turn be APPLIED ...

to apply each new class can just  TYPE it into the CODE

eg  as  class ="container-fluid  big-fluid"  OR

in  LIVE view...  in DW... click on the displayed element and then hit

the + sign inside the blue box and then type eg  .one-row  (it prompts you);

And again,  give  .one-row  a bkgrnd color  eg green

and  some padding to give it height  (eg top and bottom = 20)

(can just edit properties in code view)

and play with that  F12...

note, new innermost  row  stretch to 100% of it's fixes container in which it is nested

and it resizes as the window is shrunk.

lg seems to be for really large monitors.  etc.

(that depends on  Meda queries  (see BYOL on that, defined by colored sliders in DW)

next expt...

give innermost  a width of  50%  ie

.one-row   hit  Properties>+> width = 50%

and test with F12... it works!!!

now try to define .two-inner-boxes,  say  NESTED inside  .one-row

(use  INSERT  BS component  "Grid Row with column)  and use two cols)

and give each a new color and padding of ten.

and give each of those  a name and color and padding.

say .Lbox and .Rbox.  v cool   adn test it out.

OK  good test... now   get rid of the inner boxes their defs.

(use  the - sign in Selectors to delete it)

AND must also edit the code to get rid of those.

don't forget to make all images  .img-responsive

and also