วิธ๊เปลียนสี Navbar

วิธีการเปลียนสีของ Navbar เขียนยังไหง ครับ ใช้ Bootflat

สร้าง css ไฟล์ใหม่แล้วเขียน css ใส่สีใหม่ตามต้องการดังนี้ครับ

/**

 * navbar

 * --------------------------------------------------

 */

.navbar-default {

  background-color: #37bc9b;

  border-color: #37bc9b;

}

.navbar-default .navbar-brand, .navbar-default .navbar-link, .navbar-default .btn-link {

  color: #26816a;

}

.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus, .navbar-default .navbar-link:hover, .navbar-default .btn-link:hover, .navbar-default .btn-link:focus {

  color: white;

  background-color: transparent;

}

.navbar-default .navbar-text, .navbar-default .navbar-nav > li > a {

  color: #26816a;

}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {

  color: white;

}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {

  color: white;

  background-color: #48cfad;

}

.navbar-default .btn-link[disabled]:hover, fieldset[disabled] .navbar-default .btn-link:hover, .navbar-default .btn-link[disabled]:focus, fieldset[disabled] .navbar-default .btn-link:focus, .navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:hover, .navbar-default .navbar-nav > .disabled > a:focus {

  color: #2e9c81;

  background-color: transparent;

}

.navbar-default .navbar-toggle {

  background-color: #26816a;

  border-color: #26816a;

}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {

  background-color: #2b957a;

  border-color: #2b957a;

}

.navbar-default .navbar-toggle .icon-bar {

  background-color: #37bc9b;

}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {

  border-color: #48cfad;

}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {

  color: white;

  background-color: #37bc9b;

}

@media (max-width: 767px) {

  .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {

    background-color: #48cfad;

  }

  .navbar-default .navbar-nav .open .dropdown-menu > .divider {

    background-color: #48cfad;

  }

  .navbar-default .navbar-nav .open .dropdown-menu > li > a {

    color: #26816a;

  }

  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus, .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {

    color: white;

    background-color: #48cfad;

  }

  .navbar-default .navbar-nav .open .dropdown-menu > .dropdown-header {

    color: #26816a;

  }

  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {

    color: #2b957a;

  }

}

.navbar-inverse {

  background-color: #333;

  border-color: #333;

}

.navbar-inverse .navbar-brand, .navbar-inverse .navbar-link, .navbar-inverse .btn-link {

  color: #8c8c8c;

}

.navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus, .navbar-inverse .navbar-link:hover, .navbar-inverse .btn-link:hover, .navbar-inverse .btn-link:focus {

  color: white;

  background-color: transparent;

}

.navbar-inverse .navbar-text, .navbar-inverse .navbar-nav > li > a {

  color: #8c8c8c;

}

.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {

  color: white;

}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {

  color: white;

  background-color: black;

}

.navbar-inverse .btn-link[disabled]:hover, fieldset[disabled] .navbar-inverse .btn-link:hover, .navbar-inverse .btn-link[disabled]:focus, fieldset[disabled] .navbar-inverse .btn-link:focus, .navbar-inverse .navbar-nav > .disabled > a, .navbar-inverse .navbar-nav > .disabled > a:hover, .navbar-inverse .navbar-nav > .disabled > a:focus {

  color: #666;

  background-color: transparent;

}

.navbar-inverse .navbar-toggle {

  background-color: black;

  border-color: black;

}

.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {

  background-color: #1a1a1a;

  border-color: #1a1a1a;

}

.navbar-inverse .navbar-toggle .icon-bar {

  background-color: #8c8c8c;

}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {

  border-color: black;

}

.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {

  color: white;

  background-color: black;

}

@media (max-width: 767px) {

  .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {

    background-color: black;

  }

  .navbar-inverse .navbar-nav .open .dropdown-menu > .divider {

    background-color: black;

  }

  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {

    color: #8c8c8c;

  }

  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {

    color: white;

    background-color: black;

  }

  .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {

    color: #bfbfbf;

  }

  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {

    color: #666;

  }

}

ขอบคุณ ครับ วิธีการวาง Components ต่างๆให้อยู่ซ้าย ขวา ตรงกลาง ทำยังไหง ครับมือใหม่หัดเล่น