Member 13336451 Ответов: 1

Asp.net меню с навигационной панелью

Дорогие все, я хочу использовать стиль меню bootstrap в asp.new меню, но все мои попытки не работают.

меню, которое я хочу использовать, это 

<pre>   <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
      <div class="container">
        <a class="navbar-brand" href="Default.aspx">web name </a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="aboutus.aspx">aboutus</a>
            </li>
           
            <li class="nav-item">
              <a class="nav-link" href="contact.html">contact</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Portfolio
              </a>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio">
                <a class="dropdown-item" href="portfolio-1-col.html">1 Column Portfolio</a>
                <a class="dropdown-item" href="portfolio-2-col.html">2 Column Portfolio</a>
                <a class="dropdown-item" href="portfolio-3-col.html">3 Column Portfolio</a>
                <a class="dropdown-item" href="portfolio-4-col.html">4 Column Portfolio</a>
                <a class="dropdown-item" href="portfolio-item.html">Single Portfolio Item</a>
              </div>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Blog
              </a>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
                <a class="dropdown-item" href="blog-home-1.html">Blog Home 1</a>
                <a class="dropdown-item" href="blog-home-2.html">Blog Home 2</a>
                <a class="dropdown-item" href="blog-post.html">Blog Post</a>
              </div>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Other Pages
              </a>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
                <a class="dropdown-item" href="full-width.html">Full Width Page</a>
                <a class="dropdown-item" href="sidebar.html">Sidebar Page</a>
                <a class="dropdown-item" href="faq.html">FAQ</a>
                <a class="dropdown-item" href="404.html">404</a>
                <a class="dropdown-item" href="pricing.html">Pricing Table</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav>


и мое меню АСП

<pre>  <asp:SiteMapDataSource ID="SiteMapDataSource2" runat="server" ShowStartingNode="false" />

<asp:Menu ID="Menu2" runat="server" Orientation="Horizontal" RenderingMode="List" DataSourceID="SiteMapDataSource2">
 </asp:Menu>



Что я уже пробовал:

вот что я пытаюсь сделать


<pre>
                        <asp:SiteMapDataSource ID="SiteMapDataSource2" runat="server" ShowStartingNode="false" />


        <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
            <div class="container">
                <a class="navbar-brand" href="Default3.aspx">صندوق الزمالة </a>
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">

                    
                    <asp:Menu ID="Menu2" runat="server" Orientation="Horizontal" RenderingMode="List" DataSourceID="SiteMapDataSource2"

                        IncludeStyleBlock="false" StaticMenuStyle-CssClass="" DynamicMenuStyle-CssClass="">

                        <StaticSelectedStyle CssClass="nav-item nav-link" />

                        <StaticHoverStyle CssClass="nav-item nav-link"  />
                 

                    </asp:Menu>
                      
                </div>
            </div>
        </nav>

ZurdoDev

И в чем же вопрос?

Matias Lopez

Мы предполагаем, что вы включаете файлы .css и .js, необходимые для включения BootStrap, и ваш код поддерживается в этой используемой версии, не так ли?

Member 13336451

это все что у меня есть,

Matias Lopez

Bootstrap | W3Schools
А еще онлайн звонок:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Member 13336451

и все же это не сработало со мной

1 Ответов

Рейтинг:
0

alexvw

Привет,

Предполагая, что у вас есть все необходимые ссылки для Bootstrap 3.3.7 (js и css), а также JQuery, как и упоминал Матиас Лопес; следующий пример кода может предложить некоторую помощь.

Он изображает меню с тремя пунктами, где последний является подменю. Для этого конкретного случая были использованы кнопки LinkButtons, но если ваша цель-простая навигация, то вы можете использовать HTML и просто завершить href="..." Идентификаторы тегов ссылок также могут быть ненужными в этом случае.

//Markup (content page .aspx)
<div id="MnuCliente" runat="server" class ="collapse navbar-collapse" >
	<ul class="nav navbar-nav">
        	<li><asp:LinkButton id="Mnu00" runat="server" Text="Datos Cliente" OnClick="Link_Click" /></li>
                <li><asp:LinkButton id="Mnu01" runat="server" Text="Operaciones" OnClick="Link_Click" /></li>
                <li class="dropdown-submenu">
                	<a href="#" class="dropdown-toggle" data-toggle="dropdown">Documentos</a>
                        <ul class="dropdown-menu">
                            <li><asp:LinkButton id="Mnu02" runat="server" Text="Vigentes" OnClick="Link_Click" /></li>   
                            <li><asp:LinkButton id="Mnu03" runat="server" Text="Morosos" OnClick="Link_Click" /></li>   
                            <li><asp:LinkButton id="Mnu04" runat="server" Text="Cancelados" OnClick="Link_Click" /></li>   
                            <li><asp:LinkButton id="Mnu05" runat="server" Text="Prorrogados" OnClick="Link_Click" /></li>   
                            <li><asp:LinkButton id="Mnu06" runat="server" Text="Protestados" OnClick="Link_Click" /></li>   
                            <li><asp:LinkButton id="Mnu07" runat="server" Text="Excedentes" OnClick="Link_Click" /></li>   
                        </ul>
		</li>
	</ul>
</div>


//Rendered HTML (href="..." have been removed for brevity)
<div id="MnuClient" class="collapse navbar-collapse">

	<ul class="nav navbar-nav">
                    
		<li><a id="Mnu00" href="...">Datos Cliente</a></li>

                <li><a id="Mnu01" href="...">Operaciones</a></li>
                    
		<li class="dropdown-submenu">
                        
			<a href="#" class="dropdown-toggle" data-toggle="dropdown">Documents</a>

			<ul class="dropdown-menu">

				<li><a id="Mnu02" href="...">Vigentes</a></li>
				<li><a id="Mnu03" href="...">Morosos</a></li>
				<li><a id="Mnu04" href="...">Cancelados</a></li>
				<li><a id="Mnu05" href="...">Prorrogados</a></li>
				<li><a id="Mnu06" href="...">Protestados</a></li>
				<li><a id="Mnu07" href="...">Excedentes</a></li>
			</ul>

                </li>

	</ul>
</div>


Ваше здоровье!