Bootstrap Tutorial for Beginners - 10 - Sidebar Menu

Поделиться
HTML-код
  • Опубликовано: 23 июн 2015
  • Source Code: github.com/thenewboston-devel...
    Core Deployment Guide (AWS): docs.google.com/document/d/16...

Комментарии • 96

  • @hanschristianandreassen4272
    @hanschristianandreassen4272 6 лет назад +1

    I love your tutorials! So much more fun listening to then all the other stuff on youtube. You're a funny guy :)

  • @Thaulopi
    @Thaulopi 9 лет назад +8

    As always very good stuff, thank you for that. But, maybe it is time to use HTML5 tags for Bootstrap also. Thus, I use e.g. or , for my layouts. Makes the code easier to read and complies with contemporary standards. Big ups.

  • @eliortiz9732
    @eliortiz9732 7 лет назад

    I'm new to coding so this might be a little advanced for me at the moment BUT I appreciated your walk through. instant subscriber! I will definitely be going through your videos as I progress.

  • @arthurgallos8961
    @arthurgallos8961 6 лет назад

    Thank you so much!!!! you helped me a lot on my project... The best!!!

  • @lamnguyen75
    @lamnguyen75 9 лет назад +2

    Dear Bucky!
    Can you show us how to create the website in your above tutorial..Please

  • @zaidiftikhar9938
    @zaidiftikhar9938 7 лет назад +1

    where nested hover effect code..i wanna this .When i clicked back to small side it did not show me result of hover effect i give two time hover effect in nested menus of div it was show me nested div inside of parent div instead of showing outside

  • @Mario-ox5dm
    @Mario-ox5dm 6 лет назад +2

    Incase it doesn't work for you.
    Line 48 should be:
    $("#wrapper").toggleClass("menuDisplayed");
    In the video he has it as toogledClass("toggled"); but on his github page it's like the code I posted above.
    After this fix it worked for me.

  • @pkmochotlhi5276
    @pkmochotlhi5276 7 лет назад

    Hi there
    Super helpful video however all my text in my paragraph tags etc. in my page content class does not get displayed at all
    PLEASE HELP
    Thanks

  • @MsVideoscomicos
    @MsVideoscomicos 6 лет назад

    Thank you by this video friend. I download the source code of your tutoriasl but i can´t to find this same example of this video. Where i can to find the source code of this video?

  • @MrEmrys24
    @MrEmrys24 7 лет назад

    Newbie here.... Is it possible to use another tag instead of so that you don't need to disable its default action?

  • @Dinobijdevier
    @Dinobijdevier 8 лет назад

    Can you make a tutorial how to make those kind of boxes. Like how can we make a box with that traffic shizzle en stuf like that.

  • @JonesDTaylor
    @JonesDTaylor 7 лет назад

    Can we use python instead of jQuery for the script part ?

  • @TheRealCr4xy
    @TheRealCr4xy 9 лет назад +4

    can you do a chart.js tutorial?

  • @mariobulic9883
    @mariobulic9883 8 лет назад

    What text editor is that it is pretty cool? :)

  • @rainieralbertsz4165
    @rainieralbertsz4165 8 лет назад

    hi great video! quick question why did you use instead of for the button.

    • @successfulpeople
      @successfulpeople 7 лет назад +1

      is an anchor tag, it links whatever is between its tags to the page written within it. In this case # is an empty. It makes it clickable but it wouldn't redirect you to anywhere.

  • @andreasimon7104
    @andreasimon7104 7 лет назад +2

    my sidebar menu doesn't get in the sidebar. can someone solve it ?

  • @mtsurov
    @mtsurov 5 лет назад

    Any chance you can add this to you GitHub ? Thank you.

  • @kennethkim1221
    @kennethkim1221 8 лет назад

    Can u teach us how you add a picture in the sidebar?

  • @eedgerton769
    @eedgerton769 8 лет назад

    Anyone know why the columns would show up stacked on each other instead of next to each other?

  • @aoihgaighihusgohg6816
    @aoihgaighihusgohg6816 9 лет назад +2

    Hey following ur Chanel for a long time, just curios where do you learned these things from did you graduted uni?? And also can u make how to develope a game in Java please? Thank you much thanks.

    • @ThePhoxProject
      @ThePhoxProject 9 лет назад +6

      aoihgaigh ihusgohg He didn't go to college I believe. I think he left college. Also, he probably learned the same way you are--google, and for dummies.

    • @Ninja9191
      @Ninja9191 8 лет назад +4

      aoihgaigh ihusgohg He reads a whole bunch of books, I think he's shown it in a vlog once and/or talks about it in the podcasts. Yes there are podcasts and vlogs, if you didn't already know.

  • @blackdragoninnovations3563
    @blackdragoninnovations3563 7 лет назад

    Hey Bucky, why not just use a button instead of a hyperlink? Just add a few extra self-made variables to it such as [toggle="collapse"] and [target="#sidebar"].

  • @arvyd.andhika8970
    @arvyd.andhika8970 8 лет назад

    Awesome like always Bucky!.
    Bucky, i need make some copy clipboard on y website. Allready try searching how to make it but still not found. Can you help me make some video for that?
    Thanks anyway Bucky.

  • @nooria19
    @nooria19 8 лет назад +1

    HI. Which symbol did you used in script tag at the start? As im not familiar with jquery.

    • @ShxQDesigns786
      @ShxQDesigns786 8 лет назад +1

      $.

    • @deepdownthelane
      @deepdownthelane 8 лет назад +2

      +Nooria Khan $ is just a shortcut for everything in jQuery. It reduces the risk of name collision. Shortcuts for finding elements.

    • @deepdownthelane
      @deepdownthelane 8 лет назад

      +Nooria Khan $ is just a shortcut for everything in jQuery. It reduces the risk of name collision. Shortcuts for finding elements.

  • @naturalSurreality
    @naturalSurreality 9 лет назад

    Hi Bucky! Your tutorials are awesome and you don't need class col-lg-12 when you want full width column (block elements like divs are full width by default).

    • @codingidea201
      @codingidea201 Год назад

      ruclips.net/video/vNzAfMxnfhQ/видео.html

  • @tahakamil
    @tahakamil 6 лет назад

    Thank you :D

  • @justincardenas5535
    @justincardenas5535 8 лет назад

    "Buhton". Lol
    Thanks for the vid!

    • @codingidea201
      @codingidea201 Год назад

      ruclips.net/video/vNzAfMxnfhQ/видео.html

  • @mendozaeuclan8094
    @mendozaeuclan8094 9 лет назад

    Hello,
    Would you be able to show us how to create a site like yours. So people can sign in and do stuff like yours because there is no videos on youtube what show you that, and you'll be able to explain it well.
    Thanks
    Steven

    • @bool2max
      @bool2max 8 лет назад +1

      +MendozaEU Clan That's really complicated. Start learning JavaScript, PHP, and SQL first. Also learn jQuery right after JavaScript.

  • @achkh1139
    @achkh1139 8 лет назад

    can u send the dashboard template?

  • @ilanamutegaraba8728
    @ilanamutegaraba8728 5 лет назад

    Nice tut but where can we get those codes on top??(meta charset,..)

    • @codingidea201
      @codingidea201 Год назад

      ruclips.net/video/vNzAfMxnfhQ/видео.html

  • @leaneyjaneo4140
    @leaneyjaneo4140 7 лет назад

    where can we download the sidebar.css? I'm trying the code and i'm not sure if its working correctly because all I can see is the word account, settings and logout. Also a button that says toggle menu.

    • @littlejibari
      @littlejibari 7 лет назад

      meron ka na? penge. mejo magulo ung site ni bucky e

    • @AsangaChandrakumara
      @AsangaChandrakumara 7 лет назад

      /*SideBar main*/
      #Sidebar-warapper {
      z-index: 1;
      position: absolute;
      width: 0px;
      height: 100%;
      overflow-y: hidden;
      background: #2C3E50;
      border: 2px red;
      opacity: 0.9;
      }
      /*main content*/
      #Page-Main-Content {
      width: 100%;
      position: absolute;
      position: 15px;
      border: 5px green;
      }
      /*
      CHange the side bar displayt
      #WrapperMain.MenuDiaplay #Sidebar-warapper
      ==========================================
      this is use to show the side bar (by increasing width) when Jquery button click
      #WrapperMain.MenuDiaplay #Page-Main-Content
      ==========================================
      this used to make room for side bar when it showing. doing that by padding left same width as side bar
      simple
      */
      #WrapperMain.MenuDiaplay #Sidebar-warapper {
      width: 250px;
      }
      #WrapperMain.MenuDiaplay #Page-Main-Content {
      padding-left: 250px;
      }
      /*Other styling*/
      .Sidebar-Navx{
      padding: 0;
      list-style: none;
      }
      .Sidebar-Navx li {
      text-indent: 20px;
      line-height: 40px;
      }
      .Sidebar-Navx li a {
      display: block;
      text-decoration:none;
      color: #ddd;
      }
      .Sidebar-Navx li a:hover {
      background: black;
      }

    • @AsangaChandrakumara
      @AsangaChandrakumara 7 лет назад

      you need to minified above

  • @gilbertvelez8184
    @gilbertvelez8184 7 лет назад

    Can someone help me? What's that icon on the javascript at 11:55 on both before the "menu-toggle" and "wrapper"
    Is it this "&"? I haven't learn jquery or javasript is yet. But soon I will after I finish this Bootstrap playlist tutorial.
    BTW Thanks for the tutorial vids. I am learning so much. Future Web Designer here :)

  • @vanessaanasco3590
    @vanessaanasco3590 5 лет назад

    can you please show us the real actual of your coding output before it finished. I'm just curios how it looks like.

    • @codingidea201
      @codingidea201 Год назад

      ruclips.net/video/vNzAfMxnfhQ/видео.html

  • @gleblischishyn6348
    @gleblischishyn6348 7 лет назад +2

    where I can download this menu?

    • @codingidea201
      @codingidea201 Год назад

      ruclips.net/video/vNzAfMxnfhQ/видео.html

    • @codingidea201
      @codingidea201 Год назад

      drive.google.com/file/d/1omB2jbdR-_6A8tbeTIiT-QML7jPbdTpo/view?usp=sharing

    • @codingidea201
      @codingidea201 Год назад

      menue code
      drive.google.com/file/d/1omB2jbdR-_6A8tbeTIiT-QML7jPbdTpo/view?usp=sharing

  • @mikehawwke
    @mikehawwke 6 лет назад

    COOLEST GUY ON PLANET

    • @codingidea201
      @codingidea201 Год назад

      ruclips.net/video/vNzAfMxnfhQ/видео.html

  • @mld3698
    @mld3698 3 года назад +1

    do you have another channel or is someone stealing your videos?

    • @mld3698
      @mld3698 3 года назад

      ruclips.net/video/ktGbK9wUaC0/видео.html

    • @codingidea201
      @codingidea201 Год назад

      ruclips.net/video/vNzAfMxnfhQ/видео.html

  • @arrengomera903
    @arrengomera903 6 лет назад

    how to change the toggle button to triple-lined button?

    • @codingidea201
      @codingidea201 Год назад

      ruclips.net/video/vNzAfMxnfhQ/видео.html

    • @codingidea201
      @codingidea201 Год назад

      navbar toggle code
      drive.google.com/file/d/1omB2jbdR-_6A8tbeTIiT-QML7jPbdTpo/view?usp=sharing

  • @boyscout_86
    @boyscout_86 7 лет назад

    what editor are you using

    • @draganaaagaga6923
      @draganaaagaga6923 7 лет назад

      In notepad++ also working :D

    • @joshwalsh4453
      @joshwalsh4453 7 лет назад

      Isnt he using itelliJ by jetbrains?

    • @Sn0pY96
      @Sn0pY96 7 лет назад

      No, it's Pycharm yes is my JetBrains

    • @nathancarnelos
      @nathancarnelos 7 лет назад

      phpstorm by JetBrains.

    • @shadowmd2727
      @shadowmd2727 7 лет назад

      If you can see the logo it's Intellij, so...

  • @binihalex8097
    @binihalex8097 3 года назад

    *Bucky* my boyy

    • @codingidea201
      @codingidea201 Год назад

      ruclips.net/video/vNzAfMxnfhQ/видео.html

  • @ccwwaallkkeerr
    @ccwwaallkkeerr 7 лет назад +1

    lol are these 2.3 BTC in the top right corner or like 2319 BTC!?!?

    • @codingidea201
      @codingidea201 Год назад

      ruclips.net/video/vNzAfMxnfhQ/видео.html

  • @pradeepvishwakarma5507
    @pradeepvishwakarma5507 9 лет назад

    how long time sir

    • @codingidea201
      @codingidea201 Год назад

      ruclips.net/video/vNzAfMxnfhQ/видео.html

  • @tejaskolwankar2026
    @tejaskolwankar2026 4 года назад

    am i supposed to remember all the class and attirbutes...its quite a lot u see

    • @codingidea201
      @codingidea201 Год назад

      ruclips.net/video/vNzAfMxnfhQ/видео.html

  • @jeathtunes769
    @jeathtunes769 8 лет назад

    where is the css code ?

    • @KingJaffeJoe973
      @KingJaffeJoe973 8 лет назад

      +Diego Maradonna use bootstrap: getbootstrap.com/

    • @jeathtunes769
      @jeathtunes769 8 лет назад +2

      +Roberto Flores Thanks man for very useful advice. I didn't know before that u need to go to bootstrap website. That's why i watched this video so someone can link me to boostrap website. I cant use google for that, in fact i dont know how to use google, never used it. Thanks man ur a
      *** star ***..........

    • @yadunandanpillai2899
      @yadunandanpillai2899 8 лет назад

      +Diego Maradonna When you are actually hosting a website on a server, you should use CDNs. These are basically links to where the files are hosted on other websites. If you use those from home though, make sure to have a good internet connection. The main thing that they do is reduce the amount of downloading you need to do because everything is already set up

    • @codingidea201
      @codingidea201 Год назад

      ruclips.net/video/vNzAfMxnfhQ/видео.html

  • @boboboboboboo7522
    @boboboboboboo7522 5 лет назад

    prefer to watch from start.

    • @codingidea201
      @codingidea201 Год назад

      ruclips.net/video/vNzAfMxnfhQ/видео.html

  • @kanavgilhotra4456
    @kanavgilhotra4456 6 лет назад

    bro why we use CSS instead of Bootstrap?

    • @codingidea201
      @codingidea201 Год назад

      ruclips.net/video/vNzAfMxnfhQ/видео.html

    • @codingidea201
      @codingidea201 Год назад

      bahi bootstrap gives us classes then we use bootstrap classes used complete work but some time bootstrap overwride then the css is better as compare to bootstrap

  • @dakwanderer
    @dakwanderer 8 лет назад +2

    hmmm..bitcoin

    • @codingidea201
      @codingidea201 Год назад

      ruclips.net/video/vNzAfMxnfhQ/видео.html

  • @ThePhoxProject
    @ThePhoxProject 9 лет назад +1

    first

    • @codingidea201
      @codingidea201 Год назад

      ruclips.net/video/vNzAfMxnfhQ/видео.html

  • @jonatanflores4025
    @jonatanflores4025 6 лет назад

    Lie!!!!!

    • @codingidea201
      @codingidea201 Год назад

      ruclips.net/video/vNzAfMxnfhQ/видео.html

  • @foundcause898
    @foundcause898 7 лет назад +1

    I love how he builds a website then shows us a completely different website that has no real applicability to this.....
    "look i did it guys" worst tutorial ever

    • @foundcause898
      @foundcause898 7 лет назад

      +awman thisgirl If I struggled believing this person has any idea what theyre doing why would I continue tormenting myself

    • @codingidea201
      @codingidea201 Год назад

      ruclips.net/video/vNzAfMxnfhQ/видео.html