Web Shakehands
Web Shakehands

Language


Boot3/Navigation part of Bootstrap4!!



  • --b
    We`ve made up to the <head>section.
    a--
    --a
    It`s still "OK!" is written in the browser.
    When will this going to be changed??
    a--
    --b
    No problem!!
    We gonna make the <body>part today, so different section will appear this time!!
    a--
    --a
    Body Feels Exit??
    a--
    --c
    No!!!!!!!!!!!!
    That`s the song of "Namie Amuro"!!!
    a--
    --b
    The first place that we create on the <body> section is the "Navigation bar"!!
    a--
    --y
    "Navigation bar" is the place that contains buttons that jump to pages.
    We also say this "Global Navigation".
    a--
    --a
    Oh! Your awake from the beginning.
    a--
    --y
    Achoooooooo!
    a--
    --b
    Hakanashi doesn`t get sleepy when she catches a cold.
    a--
    --a
    Well, weird.
    a--
    --y
    Thank you also today, slow learning Himesaki.
    a--
    --a
    That`s not a nice greeting!!!
    a--
    --c
    .......C-Can I start? ...........
    a--
    --b
    The codes for the navigation part is here!
    a--



    --a
    O-Oh, this seems really difficult....
    a--
    --b
    It seems difficult just by looking at it, but Bootstrap already has a code.
    a--
    --a
    Oh, ok!!!
    You copy and paste it!!!
    a--
    --b
    Yes.
    You don`t have to make a difficult navigation, but you can use the prepared codes.
    And also, you can customize the code and make it as your own designed navigation.
    a--
    --a
    That`s convenient!!!
    a--
    --b
    Hakanashi!! Please explain how to put the navigation on the website!!!
    a--
    --y
    Achoooooooo!
    a--
    --y
    ・・・・・・
    a--
    --y
    I`ll blow my nose so please wait for a little.
    Buooooo... Buooooo...
    a--
    --a
    ....W-Well, nasty...
    a--
    --c
    .....I`ll explain until Hakanashi is ready.....
    a--
    --b
    We`ve entered inside the Bootstrap page from the "Get Started" page.
    a--
    --a
    I remember.
    We`ve copied CSS and JS.
    a--
    --b
    There is "Example" button on the top so we`ll click this.
    a--



    --b
    Then, there is "Navbars" written place when you scroll!!
    a--
    --a
    Oh!! You can choose the navigation from here!!
    a--
    --y
    I suggest starting from the "Navbar".
    Even Himesaki can handle this easily!!
    a--
    --a
    She always says one word too many.
    a--
    --y
    When you click "Navbar", various patterns of navigation bar appears.
    a--






    --a
    It looks all the same.
    a--
    --y
    I`ll explain for Himesaki more because her eyes are bad.
    a--
    --a
    My eyes are not bad!!!!!
    a--
    --y
    It`s written like "Expand at sm" and "Expand at md".
    a--
    --a
    Potato M taking out, please!!!!
    a--
    --y
    ・・・・・・
    a--
    --y
    ・・・・・・
    a--
    --a
    Hayato!!!
    I`ve just joked but Hakanashi doesn`t reply!!!!
    a--
    --c
    Oh.......W-Well..........Not McDonald`s.
    a--
    --a
    Too late!!!!!
    a--
    --y
    These words are for the tablet and the smartphone devices.
    a--
    --a
    Oh, Ok.
    There`s two types that it shows.
    Written "Search" and three lined button.
    a--
    --y
    As a test, if you narrow the browser width, it`ll one by one change to the three line button.
    a--
    --a
    Oh, it changed!!
    a--



    --y
    This is because for PC you don`t need the three lined button, but tablet and smartphone do.
    So, these changes depending on the display size of each device.
    a--
    --a
    I understand!!
    You can choose from these sample by the changing timing of the button.
    a--
    --b
    That`s right.
    There are many tablets and smartphones that have different display sizes.
    So Bootstrap offers various samples that you can choose.

    By the way, these type of layout that the design changes are called "Responsive Design".
    a--
    --a
    Ok!! Now, let`s copy and paste it!!!
    Upps!! where`s the code!!!!
    a--
    --b
    The easy way is to show the source of the page.
    a--
    --b
    If you use Google Chrome browser, source button will appear when you right-click the mouse, and the HTML codes will appear.
    a--



    --b
    This time, please copy the sample that changes with the SM timing.

    Copy the places starting from <nav to </nav>!!!
    And paste it over with the "OK!" that we made!!!
    a--



    --a
    OK!! And I`ll double click the "index.html"!!!
    a--



    --a
    Wooooow!!!!
    The navigation appeared!!!!!
    a--
    --y
    Achoooooooo!
    a--
    --y
    So, I`ll go and eat something.
    a--
    --a
    Oh, you`re hungry??
    a--
    --b
    Hakanashi cannot keep the brain without eating when she catches a cold and waking up all day.
    a--
    --a
    IQ 206 is very inconvenient.
    a--
    --b
    Last, I will explain about the "comments" in the codes.
    a--



    --b
    This is the HTML tag that can take a memo.
    a--
    --a
    It`s good if you can take a memo like a post-it!!
    a--
    --b
    Yes.
    You write the comment tag like this <!-- --> and fill in whatever you want to in between.
    This time it`s written "Navigation" so that it`s understandable.
    a--
    --a
    You won`t mess up with the codes if you use this comment tag!!!
    a--
    --b
    Next time, we`ll make the "Main picture" section!!!
    a--
    --a
    I`m the main here!!!!!
    a--
    --c
    ..Oh, well, ya....
    a--
    c--
    --f
    Oh Hakanashi, you came back!
    What did you eat???
    a--
    --z
    Beef jerky.
    a--
    --f
    ・・・・・・
    a--
  • Download Sample

    【 Characters 】

    儚し 冬雪

    Fuyuki Hakanashi

    She is the assistant of this lesson Bootstrap4. IQ 206. But sleeps all the time because she uses her brain too much.


    姫咲 みのり

    Minori Himesaki

    She is the daughter of the president of this IT company. Zero knowledge of computers. She cannot even know how to type keyboards. But she is very fast in typing with the smartphone.
    She always says "I`ll tell this to my father, and you`ll be transfered to the Hokkaido office!"


    姫咲 みのり

    Hayato Hashiba

    He is the unlucky guy who has to teach how to create websites from the beginning to Himesaki. He is a good teacher, and hard-working. But he is nearly be transfered to the Hokkaido office.



このエントリーをはてなブックマークに追加


Bootstrap 4! Hyper Lesson!

2018-03-04 Boot7/Make buttons by adding class to the tag!! NEW!


2018-02-08 Boot6/Using "Font Awesome" for Bootstrap4!!


2017-12-20 Boot5/Make three columns by adding classes


2017-12-07 Boot4/Make the main picture section with Bootstrap4!!


2017-11-23 Boot3/Navigation part of Bootstrap4!!


2017-11-08 Boot2/Create the "head" part of HTML!!


2017-10-26 Boot1/Prepare to use Bootstrap 4



Just enter your E-mail and you will receive free
mail magazine about how to make your website etc.
E-mail:
  

Go to top