I have big HTML project and I want to divide one big HTML file into separate small html files. Is there a good way to do it?
This is an example of my HTML file (this is not all since the original html is much bigger)
http://plnkr.co/edit/gwdAHfGIeac9WusLKMlV?p=preview
<!DOCTYPE html>
<html>
<head>
<title>toolbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="toggle-button">
<div class="wrapper">
<div class="menu-bar menu-bar-top"></div>
<div class="menu-bar menu-bar-middle"></div>
<div class="menu-bar menu-bar-bottom"></div>
</div>
</div>
<!-- remove from here!!!! -->
<nav id="navi" class="navbar-inverse menuBar">
<div class="container-fluid back">
<div class="navbar-header">
<a class="navbar-brand glyphicon glyphicon-plus" title="Home" href="#"></a>
</div>
<ul class="nav navbar-nav">
<li id="dropdown1" title="Dropdown one" class="dropdown keep-open">
<a id="qlabel" class="dropdown-toggle glyphicon glyphicon-ok" data-toggle="dropdown" href="#">
<span class="caret"></span></a>
<ul class="dropdown-menu">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3" title="Third group" >
Collapsible Group 3</a>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
</div>
</div>
</div>
</div>
</ul>
</li>
<li></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle glyphicon glyphicon-time" title="Notifications" data-toggle="dropdown" href="#" >
<span class="badge badge-print">2</span><span class="caret"></span>
</a>
<ul class="dropdown-menu notif" style="padding:20%;">
<li>Hello</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle glyphicon glyphicon-user" title="Languages" data-toggle="dropdown" href="#">
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>English</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-log-in"></span> </li>
</ul>
</div>
</nav>
<p style="margin-left:25%; margin-top:5%;"><iframe src="http://stackextance.com" frameborder="0" width="660px" height="270px" marginheight="0" marginwidth="0" scrolling="No"><p>See the World Forests Clock at http://www.cifor.org/fileadmin/world-forest-c/wfc-cifor.htm.</p></iframe></p>
<!-- until here!!!! -->
<script src="app.js"></script>
</body>
</html>
For example, how can I have the part starting at <!-- remove from here!!!! --> and going to <!-- until here!!!! --> in index2.html file and load it inside index.html?
I can copy all the relevant lines(22-78) to index2.html but how should I make it work together without using iFrame or frame...
https://www.tutorialspoint.com/html/html_frames.htm
Try using jQueries get function for that
$.get( "index2.html", function( data ) {
$( ".result" ).html( data );
//code to insert data into desirable container
});
Data in this case will be your html2 page content
Here is full documentation https://api.jquery.com/jquery.get/
In fact by reading difference between .get and .load functions i'd now prefer using .load, they do the same thing except that .load won't perform ajax call if there is no container in first place. Here is example of load method
$("your container selector").load("desired data (index2.html)"[, optional callback function when data is loaded]);
Related
I am learning MySQL and for this I am creating a simple inventory system.
I've created a side menu that also has a top navigation bar, from a simple template created with just html, bootstrap.
From this menu, we will have access to all the content of the application: Users, Products, Categories, etc...
I want this side menu to be displayed in all views or pages that are added to the application in the future, that is, all views must have this side menu (Sidebar) and the navigation bar (NavBar)
Each view is created independently, for now the application only has 3 views: home, login and 404
The teacher has created a system to call the different views from the index.php, since the application will have a login as follows:
<?php require "./inc/sesionStart.php" ?>
<!DOCTYPE html>
<html lang="es">
<head>
<?php include "./inc/headsidebar.php" ?>
<title>Administrador de inventario</title>
</head>
<body>
<?php
if (!isset($_GET['vista']) || $_GET['vista'] == "") {
$_GET['vista'] = "login";
}
if (is_file("./vistas/" . $_GET['vista'] . ".php") && $_GET['vista'] != "login" && $_GET['vista'] != "404") {
include "./inc/sidebar.php";
include "./vistas/" . $_GET['vista'] . ".php";
} else {
if ($_GET['vista'] == "login") {
include "./vistas/login.php";
} else {
include "./vistas/404.php";
}
}
?>
</body>
</html>
The Login and 404 Views work perfectly, since these pages should not have the side menu (Sidebar) and the Navigation Bar (NavBar)
The problem arises when I have added a new View (HOME), this view needs to have the Side Menu and the Navigation Bar.
However, when I add the URL to the browser: http://localhost:8888/index.php?vista=home , it shows what you see in the screenshot below, the interface created for the HOME View, it shows after of the Sidebar view, that is, we must scroll to be able to see the content of HOME.
Actually, HOME and all views (except Login and 404) must have the SIDEBAR and the NAVBAR
And this is what is displayed when I want to enter HOME:
How can I correct this?
What do I have to do so that all the views that I create in the future have a Side Menu and a Navigation Bar?
I am really following the course and trying to learn with the structure system that the tutorial shows, I do not have the knowledge to make my corrections.
This is the file system I have in the project:
I show the file with which the Side Menu and the NavBar are created and the HOME view file with its corresponding css.
If you don't understand the code, I've created a repository on GitHub to record the changes I make to the project:
https://github.com/dianacuentagithub/inventario
I don't want to continue with the tutorial until I get this corrected, I hope to find an idea or advice to learn how to avoid this.
I hope to see explained well what I need for the application, it is difficult to use the translator
Thank you
sidebar.php
<head>
<?php include "./inc/headsidebar.php" ?>
</head>
<body>
<div class="wrapper">
<nav id="sidebar">
<div class="sidebar-header">
<img src="./img/gato-2.png" class="rounded-circle" alt="logo">
<h3 class="tituloPanel"> Panel Administrador </h3>
<strong>PA</strong>
</div>
<ul class="list-unstyled components">
<li class="usuarioColor active ">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="sidebaruser dropdown-toggle">
<i class="fas fa-user"></i>
Usuarios
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Nuevo
</li>
<li>
Lista
</li>
<li>
Buscar
</li>
</ul>
</li>
<li class="categoriasColor">
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Categorias
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Nuevo
</li>
<li>
Buscar
</li>
</ul>
</li>
<li class="productosColor">
<a href="#pageProductos" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-cubes"></i>
Productos
</a>
<ul class="collapse list-unstyled" id="pageProductos">
Nuevo
Lista
Por Categoria
Buscar
</ul>
</li>
</nav>
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-justify"></i>
<span></span>
</button>
<button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-align-justify"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<button type="button" class="btn btn-outline-success">Mi Cuenta</button>
<button type="button" class="btn btn-outline-danger">Salir</button>
</ul>
</div>
</div>
</nav>
</div>
</div>
<?php include "inc/script.php"; ?>
</body>
</html>
home.php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/homeStyle.css">
<title>home</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="jimena">
<div class="row">
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9" id="texto">
<h1 class="text-center hi">Hello...
<link rel="stylesheet" href="./css/homeStyle.css">
</h1>
<div class="div-center underline">
</div>
<p class="text-center intro"> This is the view of HOME</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
headsidebar.php
<title>Menu Lateral</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="./css/sidebarStyle.css">
<link rel="stylesheet" href="./css/styles.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
script.php
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#sidebarCollapse').on('click', function() {
$('#sidebar').toggleClass('active');
});
});
</script>
<script src="./js/ajax.js"></script>
I have searched the internet for examples similar to what I need for my project and studied their code, but my limited experience in the php language prevents me from correcting it by myself, so I have come to this place in search of advice
Your sidebar.php is defining the <body> tag which is conflicting with the <body> tag in home.php
Remove the <head> and <body> tags from sidebar.php
Once you do that your layout should work correctly.
Heres how youre files should look:
home.php
<link rel="stylesheet" href="./css/homeStyle.css">
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 h-100" id="jimena">
<div class="row h-100">
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 h-100" id="texto">
<h1 class="text-center hi">Hello...
<link rel="stylesheet" href="./css/homeStyle.css">
</h1>
<div class="div-center underline">
</div>
<p class="text-center intro"> This is the view of HOME</p>
<!--<p class="text-center nombre"> Miguel Espeso </p>-->
</div>
</div>
</div>
</div>
</div>
sidebar.php
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<img src="./img/gato-2.png" class="rounded-circle" alt="logo">
<h3 class="tituloPanel"> Panel Administrador </h3>
<strong>PA</strong>
</div>
<ul class="list-unstyled components">
<li class="usuarioColor active ">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="sidebaruser dropdown-toggle">
<i class="fas fa-user"></i>
Usuarios
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Nuevo
</li>
<li>
Lista
</li>
<li>
Buscar
</li>
</ul>
</li>
<li class="categoriasColor">
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Categorias
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Nuevo
</li>
<li>
Lista
</li>
<li>
Buscar
</li>
</ul>
</li>
<li class="productosColor">
<a href="#pageProductos" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-cubes"></i>
Productos
</a>
<ul class="collapse list-unstyled" id="pageProductos">
Nuevo
Lista
Por Categoria
Buscar
</ul>
</li>
<!-- <li>
<a href="#">
<i class="fas fa-briefcase"></i>
Detalles
</a>
</li>
<li class="alertasColor">
<a href="#">
<i class="fas fa-image"></i>
Alertas
</a>
</li>
<li>
<a href="#">
<i class="fas fa-question"></i>
FAQ
</a>
</li>
<li>
<a href="#">
<i class="fas fa-paper-plane"></i>
Contacto
</a>
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>
Muestra
</li>
<li>
Muestras
</li>
</ul> -->
</nav>
<!-- Nav Bar -->
<?php include "inc/script.php"; ?>
index.php
<?php require "./inc/sesionStart.php" ?>
<!DOCTYPE html>
<html lang="es">
<head>
<?php include "./inc/headsidebar.php" ?>
<title>Administrador de inventario</title>
</head>
<body>
<?php
if (!isset($_GET['vista']) || $_GET['vista'] == "") {
$_GET['vista'] = "login";
}
if (is_file("./vistas/" . $_GET['vista'] . ".php") && $_GET['vista'] != "login" && $_GET['vista'] != "404") {
#include "./inc/navbar.php";
?>
<div class="row h-100" style="margin:0 !important">
<div class="col-auto h-100" style="padding: 0px !important; margin: 0px !important;">
<?php include "./inc/sidebar.php";?>
</div>
<div class="col h-100" style="padding: 0px !important; margin: 0px !important;">
<?php include "./vistas/" . $_GET['vista'] . ".php";?>
</div>
</div>
<?php
#include "./inc/script.php";
} else {
if ($_GET['vista'] == "login") {
include "./vistas/login.php";
} else {
include "./vistas/404.php";
}
}
?>
</body>
</html>
I was just following the tutorial at linda.com and faced problem
I have index bootstrap.js and are being used in different folder
I think this is file location problem....or not.
I attached a photo of my project
structure
and my index code is like this
<!doctype>
<html>
<head>
<title>Happy Card---Home</title>
<meta charset="utf-8">
<meta http-equiv="X-US-Compatible" content="Chrome">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/mystyle.css">
<link rel="stylesheet" href="js/myscript.js">
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
<link href="https://fonts.googleapis.com/css?family=Chewy|Covered+By+Your+Grace|Dancing+Script|Graduate|Great+Vibes|Orbitron|Oswald|Permanent+Marker|Saira+Extra+Condensed" rel="stylesheet">
</head>
<body id="Home">
<section class="container">
<?php include "_/component/php/header.php"?>
<div class="content row">
<section class="main col col-lg-8">
</section><!---main--->
<section class="sidebar col col-lg-4">
</section><!---sidebar--->
</div><!---content--->
</section><!---container--->
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/myscript.js"></script>
</body>
$(function(){
$('ul.nav il.dropdown').hover(function(){
$('.dropdown-menu',this).fadeIn();
}, function(){
$('.dropdown-menu',this).fadeout('fast');
});
});
<!doctype>
<html>
<head>
<title>Happy Card---Home</title>
<meta charset="utf-8">
<meta http-equiv="X-US-Compatible" content="Chrome">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="css/mystyle.css">
<link rel="stylesheet" href="js/myscript.js">
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
</head>
<body id="Home">
<section class="container">
<?php include "_/component/php/header.php"?>
<div class="content row">
<section class="main col col-lg-8">
</section><!---main--->
<section class="sidebar col col-lg-4">
</section><!---sidebar--->
</div><!---content--->
</section><!---container--->
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/myscript.js"></script>
</body>
<footer>
</footer>
</html>
And header is like this
<div class="content row">
<div class="col-lg-12">
<header class="clearfix">
<section id="branding">
</section><!---branding-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile
display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-
expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Batam Tour &
Living Info</a>
</div>
<!-- Collect the nav links, forms, and other content for
toggling -->
<div class="collapse navbar-collapse" id="bs-example-
navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Home <span class="sr-only">(current)
</span></a></li>
<li>About us</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown" role="button" aria-haspopup="true" aria-
expanded="false">Batam Tour <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>ATTRACTION</li>
<li>SHOPPING MALL</li>
<li>THINGS TO DO</li>
<li role="separator" class="divider"></li>
<li>RENT CAR</li>
<li role="separator" class="divider"></li>
<li>HAPPY CARD</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown" role="button" aria-haspopup="true" aria-
expanded="false">Living Info <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>REAL ESTATE</li>
<li>BUSINESS ENVIRONMENT</li>
<li role="separator" class="divider"></li>
<li>BUSINESS CONSULTING</li>
<li role="separator" class="divider"></li>
<li>LIVING Q&A</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control"
placeholder="Search">
</div>
<button type="submit" class="btn btn-
default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header><!---header-->
</div><!---column-->
</div><!---content-->
You have two typos
il instead of li and fadeout instead of fadeOut and you unnecessary load myscript.js as a <link rel="stylesheet" - you can remove that line
If I add the JS and CSS and insert your header it works:
$(function() {
$('ul.nav li.dropdown').hover(function() {
$('.dropdown-menu', this).fadeIn();
}, function() {
$('.dropdown-menu', this).fadeOut('fast');
});
});
$(function() {
$('ul.nav li.dropdown').hover(function() {
$('.dropdown-menu', this).fadeIn();
}, function() {
$('.dropdown-menu', this).fadeOut('fast');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Chewy|Covered+By+Your+Grace|Dancing+Script|Graduate|Great+Vibes|Orbitron|Oswald|Permanent+Marker|Saira+Extra+Condensed" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<section class="container">
<div class="content row">
<div class="col-lg-12">
<header class="clearfix">
<section id="branding">
</section>
<!---branding-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile
display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria- expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Batam Tour &
Living Info</a>
</div>
<!-- Collect the nav links, forms, and other content for
toggling -->
<div class="collapse navbar-collapse" id="bs-example-
navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Home <span class="sr-only">(current)
</span></a></li>
<li>About us</li>
<li class="dropdown">
Batam Tour <span class="caret"></span>
<ul class="dropdown-menu">
<li>ATTRACTION</li>
<li>SHOPPING MALL</li>
<li>THINGS TO DO</li>
<li role="separator" class="divider"></li>
<li>RENT CAR</li>
<li role="separator" class="divider"></li>
<li>HAPPY CARD</li>
</ul>
</li>
<li class="dropdown">
Living Info <span class="caret"></span>
<ul class="dropdown-menu">
<li>REAL ESTATE</li>
<li>BUSINESS ENVIRONMENT</li>
<li role="separator" class="divider"></li>
<li>BUSINESS CONSULTING</li>
<li role="separator" class="divider"></li>
<li>LIVING Q&A</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-
default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</header>
<!---header-->
</div>
<!---column-->
</div>
<!---content-->
<div class="content row">
<section class="main col col-lg-8">
</section>
<!---main--->
<section class="sidebar col col-lg-4">
</section>
<!---sidebar--->
</div>
<!---content--->
</section>
<!---container--->
I'm learning bootstrap + asp.net mvc by making portfolio website.
It is based on bootstrap example.
On this example we see one page website. When we click e.g. "about" the site is using javascript and scrolling to about section. I understand that.
but... i want to try this 1 page website, spread on many Controllers (and views), use layout page with RenderBody() in it and keep the same funcionality like before(scrolling).
e.g my views:
About/Index
Portfolio/Index
Contact/Index
and layoutPage:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
<link href="#Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/font-awesome.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css"/>
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<!-- NAVI -->
<div id="Navigation" class="navbar navbar-default navbar-fixed-top navbar-mm">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse">
<span class="sr-only">Toggle navi</span> Menu<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#">Welcome to Site.com</a>
</div>
<div class="collapse navbar-collapse navbar-select">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="page-scroll">
Portfolio
</li>
<li class="page-scroll">
About
</li>
<li class="page-scroll">
Contact
</li>
<li class="page-scroll">
Blog
</li>
</ul>
</div>
</div>
</div>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="~/Img/lawl.png" alt="">
<div class="intro-text">
<span class="name">mySite.com</span>
<hr/>
<span class="skills">Developer</span>
</div>
</div>
</div>
</div>
</header>
<div class="container">
#RenderBody()
</div>
<footer class="footer text-center">
<div class="footer-upp">
<div class="container">
<div class="row">
<div class="footer-col col-lg-4 col-md-4 col-sm-4">
<h3>CONTACT</h3>
tel: 000-000-000 <br />
email: example#gmail.com <br />
City
</div>
<div class="footer-col col-lg-8 col-md-8 col-sm-8">
<h3>MEET ME</h3>
<ul class="list-inline">
<li>
<i class="fa fa-fw fa-facebook"></i>
</li>
<li>
<i class="fa fa-fw fa-linkedin"></i>
</li>
<li>
<i class="fa fa-fw fa-github"></i>
</li>
<li>
<i class="fa fa-fw fa-envelope"></i>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer-down">
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Copyright ©</p>
</div>
</div>
</div>
</div>
</footer>
<script src="~/Scripts/Site.js"></script>
There is anyway to make this?
It doesn't drop down when I click on it
why doesn't the drop down button work?
I used the bootstrap navbar found here :
Here is my code below:
Please ask if you need anything else from me
THanks in advance!!
DOCTYPE html>
<head>
<title>Unicity</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link type="text/css" rel="stylesheet" href="css/bootstrap.css"/>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.css"/>
<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.min.css"/>
<link type="text/css" rel="stylesheet" href="style/style.css"/>
<script src="U:\Desktop\jihad\unicityv1\js\bootstrap.js"></script>
<script src="U:\Desktop\jihad\unicityv1\js\bootstrap.js"></script>
<script src="U:\Desktop\jihad\unicityv1\js\bootstrap.min.js"></script>
<script src="U:\Desktop\jihad\unicityv1\js\npm.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="U:\Desktop\jihad\unicityv1\images\logo1.png" width="110" class="logo"/>
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">(current)</span></li>
<li>Buy Gold</li>
<li class="dropdown">
Sell Gold<span class="caret"></span>
<ul class="dropdown-menu">
<li>Runescape3</li>
<li>Oldschool Runecape</li>
<li>Darkscape</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Saving your money, we are cheap!</h3>
<p>At Unicity we save your money by...</p>
</div>
<div class="col-sm-4">
<h3>Saving your time, we are fast!</h3>
<p> At Unicity we save your time by...</p>
</div>
<div class="col-sm-4">
<h3>Protecting your information, we are secure!</h3>
<p> At Unicity we secure your information are make sure that...</p>
</div>
</div>
</div>
</body>
</html>
I tried with your code there seem's no problem with code,it seems it not finding the correct CSS and Javascript. Try this and let me know.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="U:\Desktop\jihad\unicityv1\images\logo1.png" width="110" class="logo"/>
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">(current)</span></li>
<li>Buy Gold</li>
<li class="dropdown">
Sell Gold<span class="caret"></span>
<ul class="dropdown-menu">
<li>Runescape3</li>
<li>Oldschool Runecape</li>
<li>Darkscape</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Saving your money, we are cheap!</h3>
<p>At Unicity we save your money by...</p>
</div>
<div class="col-sm-4">
<h3>Saving your time, we are fast!</h3>
<p> At Unicity we save your time by...</p>
</div>
<div class="col-sm-4">
<h3>Protecting your information, we are secure!</h3>
<p> At Unicity we secure your information are make sure that...</p>
</div>
</div>
</div>
Demo:https://jsfiddle.net/1rwdc9os/
add Jquery library file.
Use either bootstrap.css or bootstrap.min.css and bootstrap.min.js or bootstrap.js
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
Try in angular.... This is better than others...
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<p>This example shows how to fill a dropdown list using the ng-options directive.</p>
</body>
</html>
I've been using Twitter Bootstrap to create a navbar across the top of a page which has several dropdown menus. For some reason, the first list element aligns to the bottom of the bar by virtue of a empty link that fills the top space. I copied this first term for the other list items, but none of the other elements align to the bottom or have an empty link. Any ideas for how i can fix this?
<!DOCTYPE html>
<html>
<head>
<title>Nav Mockup</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a href="#" class="navbar-brand">NCTL<a>
<button class="navbar-toggle" data-toggle="collapse" data-target="navbarHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navbarHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>Challenge / Links</li>
<li>STEM Equity</li>
<li>Slannis Message</li>
<li>Supporters</li>
<li>MOS Press Room</li>
</ul>
</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>K12 Classroom</li>
<li>Museum Based</li>
<li>Traveling</li>
</ul>
</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>Achievements</li>
<li>Resources</li>
<li>Video Links</li>
</ul>
</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>Enews Archive</li>
<li>NCTL Studies</li>
<li>Media Coverage</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
You a error in your markup
<a href="#" class="navbar-brand">NCTL<a>
Should be:
NCTL
DEMO HERE