تحسين إصدار Bootstrap Sidebar الديناميكي

الشريط الجانبي يلعب دورًا كبيرًا في التصميم المتجاوب، عندما يصبح الشاشة صغيرة مثل شاشة الهاتف، الشريط الجانبي الذي يمكنه التكيف مع حجم الشاشة يمكن أن يضيف لونًا إلى الموقع، وبالنسبة للإطارBootstrap، يقدم مكونات شريط التنقل والمENU المنسدل، يرجى الرجوع إلى وثائق Bootstrap الرسمية على الموقع الرسمي، حيث لن يتم شرح ذلك هنا.
هذا المقال يجمع بين شريط التنقل والمENU المنسدل، ثم يصمم ويحسن إنتاج الشريط الجانبي.

html:　

<div class="container">
 <nav class="navbar navbar-default mynavbar">
 <div class="container-fluid">
  <!--按钮-->
  <div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed btn-sider" data-toggle="collapse" data-target="#side-menu" aria-expanded="false">
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
  </button>
  </div>
  <!-- 导航条内容 -->
  <div class="collapse navbar-collapse" id="side-menu">
  <ul class="nav navbar-nav" id="side-item">
   <li><a href="#">后端开发</a></li>
   <li><a href="#">数据库</a></li>
   <li class="dropdown">
   <a href="#" class="dropdown-toggle" id="web-item" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">前端开发 <span class="caret"></span></a>
   <!--下拉菜单按钮-->
   <ul class="dropdown-menu">
    <li><a href="#">HTML/CSS</a></li>
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">jQuery</a></li>
    <li><a href="#">Bootstrap</a></li>
    <li><a href="#">node.js</a></li>
   </ul>
   </li>
   <li><a href="#">移动开发</a></li>
   <li><a href="#">视觉设计</a></li>
   <li><a href="#">云计算</a></li>
  </ul>
  </div>
 </div>
 </nav>
</div>

　css:

 .mynavbar{
  background-color: #fff;
  border:none;
 }
 .navbar-header,#side-item{
  background-color: #0b3558;
 }
 #side-menu>ul>li>a{
  color:#fff;
  font-size: 18px;
  font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato;
 }
 #side-menu>ul{
  width: 100%;
 }
 #side-menu>ul>li{
  text-align: center;
  width: 16%;
  margin-left: 5px;
 }
 #side-menu .dropdown-menu {
  border: none;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
 }
 #side-item .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover,#side-item>li>a:focus,#side-item >li>a:hover {
  color: #24b0ff;
  text-decoration: none;
  background-color: transparent;
 }
 .btn-sider{
  float: left;
  border:none;
  outline: none;
  margin-left: 10px;
 }
 .mynavbar .btn-sider .icon-bar{
  background-color:#fff;
  width:23px;
  height:3px;
 }
 .mynavbar .btn-sider:focus, .mynavbar .btn-sider:hover {
  background-color: transparent;
 }
 @media (max-width: 768px) {
  .container {
  padding-left: 0px;
  }
  #side-menu{
  border: none;
  }
  #side-item{
  background: rgba(43, 54, 67, 0.97);
  }
  #side-menu>ul {
  margin-top: 0px;
  margin-right: 0px;
  margin-left: -15px;
  margin-bottom: 0px;
  width: 40%;
  height: 999px;
  }
  #side-menu>ul>li {
  text-align: left;
  width:100%;
  margin-left:0px;
  }
  #side-menu>ul>li a{
  font-size:16px;
  }
  #side-item>li>a:focus,#side-item >li>a:hover,#side-item .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
  background-color: #38a99c;
  color:#fff;
  }
  #side-menu .dropdown-menu{
  box-shadow:none;
  }
  #side-menu .dropdown-menu li a{
  padding-top:10px;
  color:#fff;
  }
 }

هذا هو نهاية محتوى هذا المقال، نأمل أن يكون قد ساعد في تعلمك، ونأمل أيضًا أن تدعموا ونتعاونوا مع دروس النطق.

إذا أردت التعمق أكثر في التعلم، يمكنك الضغط هنا للتعلم، وسنقدم لك أيضًا موضوعين رائعين: تعليم Bootstrap، تعليم Bootstrap العملي

البيان: محتويات هذا المقال تم جمعها من الإنترنت، ويحق للمالك الأصلي حقوق النسخ، ويتم توفير المحتوى من قبل مستخدمي الإنترنت الذين يقدمون المساهمات بشكل متعاوني وهم يرفعونها بأنفسهم، ولا يمتلك هذا الموقع حقوق الملكية، ولا يتم تعديل المحتوى بشكل إنساني، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا كنت قد وجدت محتوى يشتبه في حقوق النسخ، فالرجاء إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) لإبلاغنا، وتقديم الدليل على ذلك، وسنقوم بإزالة المحتوى المزعوم عن حقوق النسخ فورًا.