智能侧边栏怎么变成一个圆圈

Posted 2023-03-19

您好，要将智能侧边栏变成一个圆圈，首先需要使用CSS来实现。CSS（层叠样式表）是一种用于定义html元素的样式的语言。您可以使用以下CSS代码来实现：

border-radius: 50%;
width: 200px;
height: 200px;

这将使智能侧边栏变成一个圆圈，其中border-radius设置为50％，width和height设置为200px。您可以根据您的需要调整width和height的大小。

此外，您还可以使用以下CSS代码来添加边框：

border: 1px solid #000;

这将为您的圆圈添加一个1像素宽的黑色边框。您可以根据您的需要调整边框的宽度和颜色。

希望我的回答能够帮助您。如果您有其他问题，请随时联系我。 参考技术A 您好，要将智能侧边栏变成一个圆圈，首先需要准备一个圆形的图片，然后在您的网页代码中添加一个div元素，并将该div元素的宽度和高度设置为您准备的圆形图片的宽度和高度，然后将该div元素的背景图片设置为您准备的圆形图片，最后将该div元素的border-radius属性设置为50%!，(MISSING)这样就可以将智能侧边栏变成一个圆圈了。 参考技术B AI中使用椭圆工具就可以实现,具体操作如下:
1.
打开AI,在侧边栏选择“椭圆工具”在画布上画出一个正圆形
2.
点击T,选择“路径文字工具”然后点击一下圆形
3.
点击圆形后在右上角点击“居中对齐”
4.
在圆弧上输入“肥周先森潮物”文字,文字大小可在右上角调整

将响应式侧边栏菜单引导到顶部导航栏

【中文标题】将响应式侧边栏菜单引导到顶部导航栏

【英文标题】：Bootstrap responsive sidebar menu to top navbar

【发布时间】：2018-07-06 11:12:20

【问题描述】：

所以我一直在寻找和寻找这方面的指导，但无济于事。

基本上，我只是想要一个侧边栏，但是当屏幕变小，也就是智能手机的屏幕尺寸时，它会变成一个导航栏。

我的侧边栏 HTML 代码是这样的：

<nav class="col-sm-3 ">
  <div class="col-sm-12" id="fixed-sidebar">
    <!-- <a href="index.html"><img id="home-logo" src="../media/logo-prueba.jpg" ></a>  -->
    <ul>
      <li class="fuente-fjalla ul-personalizada">Animación</li>
      <li class="fuente-fjalla ul-personalizada">Ilustración</li>
      <li class="fuente-fjalla ul-personalizada">Interacción</li>
      <br>
      <li class="fuente-fjalla ul-personalizada">Blog</li>
      <br>
      <li class="fuente-fjalla ul-personalizada"><a href="acerca.html">Acerca</a></li>
      <li class="fuente-fjalla ul-personalizada">Contacto</li>
    </ul>
  </div>
</nav>

我的 CSS：

#fixed-sidebar 
    position: fixed;
    max-width: 20%;
    color: white;

我不知道如何将其放入导航栏。我所知道的是如何从一开始就制作导航栏，但我不想要那个！我不想要任何花哨的动画叠加多色手风琴——不管是什么东西，拜托-

谢谢你:)

【问题讨论】：

请张贴你的css

我不确定 css @media 属性是否是您正在寻找的。它允许您根据屏幕大小显示不同的 CSS。例如，您可以在最小宽度为 1080 的屏幕上使用红色背景，在最大宽度为 780 的屏幕上使用蓝色背景。但是，为了进一步的帮助，我需要您发布您的 CSS 代码。跨度>

@Jonny 我认为没有必要；我没有任何与普通 CSS “不同”的东西来使其具有响应性（因为我不知道）。

@CelticTree 为 #fixed-sidebar 添加了简单的 CSS

【参考方案1】：

引导程序 5（2021 年更新）

Bootstrap 5 的一些分类有变化，但概念仍然相同。这是更新的Bootstrap 5 sidebar to navbar example

Bootstrap 4（原始答案）

这可以在 Bootstrap 4 中使用响应式网格列来完成。一栏用于侧边栏，一栏用于主要内容。

Bootstrap 4 Sidebar switch to Top Navbar on mobile

<div class="container-fluid h-100">
    <div class="row h-100">
        <aside class="col-12 col-md-2 p-0 bg-dark">
            <nav class="navbar navbar-expand navbar-dark bg-dark flex-md-column flex-row align-items-start">
                <div class="collapse navbar-collapse">
                    <ul class="flex-md-column flex-row navbar-nav w-100 justify-content-between">
                        <li class="nav-item">
                            <a class="nav-link pl-0" href="#">Link</a>
                        </li>
                        ..
                    </ul>
                </div>
            </nav>
        </aside>
        <main class="col">
            ..
        </main>
    </div>
</div>

Alternate sidebar to topFixed sidebar to top

对于反向（顶部变成侧边栏的导航栏），可以像this example

【讨论】：

嘿，很好的解决方案。包装器在哪里定义？我在 bootstrap4 文档中找不到它

解决方案的良好开端。我发现垂直时导航栏的宽度与浏览器宽度成正比，而水平时导航栏的高度与浏览器窗口的高度成正比。有没有办法避免这种情况？

@Zim 我可能错了，但是当你使用引导行和列时，你不能让侧边栏“粘住”如果你想让侧边栏随着主要内容滚动，那么我相信不幸的是，您必须使用 div 标签并进行更多自定义。看看这个bootstrapious.com/p/bootstrap-sidebar

我不确定你的意思。替代示例和固定示例演示了带有网格的固定侧边栏。

这太棒了，我一直在尝试使用下拉类添加“可折叠”菜单，但标准导航栏解决方案在充当侧边栏时会打开“单独”菜单，而不是一个可折叠的，因为当导航栏在顶部时这是很常见的。我猜 boostrap 默认不支持这个开箱即用。

【参考方案2】：

如果出于任何原因这不是一个好的解决方案，请告诉我。对我来说效果很好。

我所做的是隐藏侧边栏，然后使用 断点

显示导航栏

@media screen and (max-width: 771px) 
    #fixed-sidebar 
        display: none;
    
    #navbar-superior 
        display: block !important;
    

【参考方案3】：

大屏幕：

小屏幕（移动）

如果这是你想要的，这就是代码 https://plnkr.co/edit/PCCJb9f7f93HT4OubLmM?p=preview

CSS + HTML + JQUERY：

    
    @import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
    body 
      font-family: 'Poppins', sans-serif;
      background: #fafafa;
    
    
    p 
      font-family: 'Poppins', sans-serif;
      font-size: 1.1em;
      font-weight: 300;
      line-height: 1.7em;
      color: #999;
    
    
    a,
    a:hover,
    a:focus 
      color: inherit;
      text-decoration: none;
      transition: all 0.3s;
    
    
    .navbar 
      padding: 15px 10px;
      background: #fff;
      border: none;
      border-radius: 0;
      margin-bottom: 40px;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    
    
    .navbar-btn 
      box-shadow: none;
      outline: none !important;
      border: none;
    
    
    .line 
      width: 100%;
      height: 1px;
      border-bottom: 1px dashed #ddd;
      margin: 40px 0;
    
    /* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
    
    #sidebar 
      width: 250px;
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      z-index: 999;
      background: #7386D5;
      color: #fff !important;
      transition: all 0.3s;
    
    
    #sidebar.active 
      margin-left: -250px;
    
    
    #sidebar .sidebar-header 
      padding: 20px;
      background: #6d7fcc;
    
    
    #sidebar ul.components 
      padding: 20px 0;
      border-bottom: 1px solid #47748b;
    
    
    #sidebar ul p 
      color: #fff;
      padding: 10px;
    
    
    #sidebar ul li a 
      padding: 10px;
      font-size: 1.1em;
      display: block;
      color:white;
    
    
    #sidebar ul li a:hover 
      color: #7386D5;
      background: #fff;
    
    
    #sidebar ul li.active>a,
    a[aria-expanded="true"] 
      color: #fff;
      background: #6d7fcc;
    
    
    a[data-toggle="collapse"] 
      position: relative;
    
    
    a[aria-expanded="false"]::before,
    a[aria-expanded="true"]::before 
      content: '\e259';
      display: block;
      position: absolute;
      right: 20px;
      font-family: 'Glyphicons Halflings';
      font-size: 0.6em;
    
    
    a[aria-expanded="true"]::before 
      content: '\e260';
    
    
    ul ul a 
      font-size: 0.9em !important;
      padding-left: 30px !important;
      background: #6d7fcc;
    
    
    ul.CTAs 
      padding: 20px;
    
    
    ul.CTAs a 
      text-align: center;
      font-size: 0.9em !important;
      display: block;
      border-radius: 5px;
      margin-bottom: 5px;
    
    
    a.download 
      background: #fff;
      color: #7386D5;
    
    
    a.article,
    a.article:hover 
      background: #6d7fcc !important;
      color: #fff !important;
    
    /* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
    
    #content 
      width: calc(100% - 250px);
      padding: 40px;
      min-height: 100vh;
      transition: all 0.3s;
      position: absolute;
      top: 0;
      right: 0;
    
    
    #content.active 
      width: 100%;
    
    /* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
    
    @media (max-width: 768px) 
      #sidebar 
        margin-left: -250px;
      
      #sidebar.active 
        margin-left: 0;
      
      #content 
        width: 100%;
      
      #content.active 
        width: calc(100% - 250px);
      
      #sidebarCollapse span 
        display: none;
      
    

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Collapsible sidebar using Bootstrap 3</title>

  <!-- Bootstrap CSS CDN -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- Our Custom CSS -->
  <link rel="stylesheet" href="style2.css">
  <!-- Scrollbar Custom CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">

</head>

<body>



  <div class="wrapper">
    <!-- Sidebar Holder -->
    <nav id="sidebar">
      <div class="sidebar-header">
        <h3>Header as you want </h3>
        </h3>
      </div>

      <ul class="list-unstyled components">
        <p>Dummy Heading</p>
        <li class="active">
          <a href="#menu">Animación</a>

        </li>
        <li>
          <a href="#menu">Ilustración</a>


        </li>
        <li>
          <a href="#menu">Interacción</a>
        </li>
        <li>
          <a href="#">Blog</a>
        </li>
        <li>
          <a href="#">Acerca</a>
        </li>
        <li>
          <a href="#">contacto</a>
        </li>


      </ul>


    </nav>

    <!-- Page Content Holder -->
    <div id="content">

      <nav class="navbar navbar-default">
        <div class="container-fluid">

          <div class="navbar-header">
            <button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
                                <i class="glyphicon glyphicon-align-left"></i>
                                <span>Toggle Sidebar</span>
                            </button>
          </div>

          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Page</a></li>
            </ul>
          </div>
        </div>
      </nav>


    </div>
  </div>





  <!-- jQuery CDN -->
  <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
  <!-- Bootstrap Js CDN -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!-- jQuery Custom Scroller CDN -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function() 


      $('#sidebarCollapse').on('click', function() 
        $('#sidebar, #content').toggleClass('active');
        $('.collapse.in').toggleClass('in');
        $('a[aria-expanded=true]').attr('aria-expanded', 'false');
      );
    );
  </script>
</body>

</html>

如果这是你想要的。

【讨论】：

他要求使用 Bootstrap 4，但这是使用 Bootstrap 3，看起来很像 bootstrapious.com/p/bootstrap-sidebar