I'm working on a webpage for a friend as training using bootstrap 4 for the first time following along with a tutorial and I seem to be doing everything alright up to the point where the teacher starts styling using a sass file. I can't figure out why the code on the scss file isn't doing anything.
I started following along from scratch a couple of times to find possible incongruences but didn't find anything. Could be something related to deprecated versions of GitHub project?
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<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/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<title>As Maiores Duvidas</title>
</head>
<body id="home">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<div class="container">
<a href="index.html" class="navbar-brand">As Maiores
Duvidas</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Sobre o Livro
</li>
<li class="nav-item">
Sobre o Autor
</li>
<li class="nav-item">
Compre o Livro
</li>
<li class="nav-item">
Entre em contato
</li>
</ul>
</div>
</div>
</nav>
<!-- nav tag with a couple of classes sm creates the hamburget to show only in small screens-->
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Here's the SCSS code
$bg-color:red;
$font-color:#fff;
$primary-color:#008ed6;
body{
background:$bg-color;
color: $font-color;
}
.navbar {
border-bottom: $primary-color 3px solid;
opacity: 0.8;
}
package.json content:
{
"name": "bs4starter",
"version": "1.0.0",
"description": "Bootstrap 4 starter workflow",
"main": "index.js",
"scripts": {
"start": "gulp"
},
"author": "Brad Traversy",
"license": "MIT",
"dependencies": {
"bootstrap": "^4.1.1",
"font-awesome": "^4.7.0",
"jquery": "^3.2.1",
"node-sass": "^4.12.0",
"popper.js": "^1.11.1"
},
"devDependencies": {
"browser-sync": "^2.18.13",
"gulp": "^3.9.1",
"gulp-sass": "^3.1.0"
}
}
You probably didn't compile the SCSS file into CSS. I see that you have node-sass in your package.json file. You can either run
node-sass src/style.scss dest/style.css
or add it to a start script so it runs every time you start the server. I don't recommend doing this though, as you don't always modify this file and it adds time to your boot
Related
I keep seeing this effect used on a lot of websites and am wondering how they're doing it
Example: https://app.uniswap.org/#/?intro=true
When you hover over one of the navbar links, it looks like a button instead of a different colored text link. How would I do this? Also using bootstrap v5.3.0-alpha1 if that makes any difference
I have this navbar as an example:
import './App.css';
import React, { useState, useEffect } from "react";
const App = () => {
return (
<div className="App">
<nav className="navbar navbar-expand-sm">
<div className="container-fluid">
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<a className="navbar-brand d-none d-md-block" href='/'>
<img src={"./logo.png"} style={{ height: '50px', width: '50px'}} alt='' />
</a>
<div className="collapse navbar-collapse text-center justify-content-center" id="navbarTogglerDemo01">
<div className="navbar-nav">
<a className="nav-link active" aria-current="page" href="/#">Home</a>
<a className="nav-link" href="/#">about_1</a>
<a className="nav-link" href="/#">about_2</a>
<a className="nav-link disabled" href='/'>Disabled</a>
</div>
</div>
<div className="btn-group">
<WagmiConfig client={wagmiClient}>
<RainbowKitProvider
chains={chains}
initialChain={mainnet}
theme={lightTheme({
borderRadius: 'small'
})}
>
<ConnectButton accountStatus='address' chainStatus='none' showBalance={false} />
</RainbowKitProvider>
</WagmiConfig>
<div className="dropdown">
<button className="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
<i className="bi bi-three-dots"></i>
</button>
<ul className="dropdown-menu dropdown-menu-end" style={{ width: '30vw'}}>
<li><a className="dropdown-item" href="#">Action</a></li>
<li><a className="dropdown-item" href="#">Another action</a></li>
<li><a className="dropdown-item" href="#">Something else here</a></li>
{/* <li><i className={darkMode ? 'fas fa-sun' : 'fas fa-moon'}></i></li> */}
</ul>
</div>
</div>
</div>
</nav>
);
};
export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
It's just adding a background-color on hover. Also, add some padding around the links by default.
ul {
display: flex;
list-style: none
}
li {
margin-right: 15px;
}
a {
padding: 8px 15px;
color: #000;
text-decoration: none;
}
li:hover a {
background: #e1e1e1;
border-radius: 5px;
}
<nav>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</nav>
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-right: 20px;
}
nav a {
text-decoration: none;
color: #000;
transition: color 0.3s ease;
}
nav a:hover {
color: #fff;
background-color: #000;
}
In the CSS code above, we first define the basic styles for the navbar,
including a flexbox layout for the ul element and some margin and padding
adjustments for the li elements.
Then, we style the a elements with text-decoration: none and a default
color of black. We also add a transition property to animate the color
change when the link is hovered over.
Finally, we define the :hover styles for the a elements. When a link is
hovered over, we change the color to white and add a background-color of
black to create a contrast with the text. This creates a simple but
effective hover effect for the navbar links.`
I'm loading data from a json file in which i plan to use on html list with links, i'm not sure if the problem is the how i wrote the json file or how i access the data in the file.
according http://jsonlint.com/ the json file is correct
the menu.json file
[
{
"opciones": {
"oferta": [
{
"tipo": "1001"
},
{
"tipo": "1002"
},
{
"tipo": "1003"
},
{
"tipo": "1004"
}
]
}
},
{
"opciones": {
"demanda": [
{
"tipo": "2001"
},
{
"tipo": "2002"
},
{
"tipo": "2003"
}
]
}
}
]
Here is how i try to fill the html list code:
<html ng-app="App">
<head>
<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>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<title>test html</title>
<script src="json_load_menu.js"></script> <!--script que cargar archivo json-->
<link rel = "stylesheet" type = "text/css" href = "./css/style.css" /> <!--css con colores de celdas -->
</head>
<body ng-controller="menuCtrl">
<div class="container">
<ul >
<li ng-repeat="menuOpcion in menu"><a href="#" >{{menuOpcion.opciones.oferta}}</a></li>
</ul>
<ul >
<li ng-repeat="menuOpcion in menu"><a href="#" >{{menuOpcion.opciones.demanda}}</a></li>
</ul>
</div>
</body>
</html>
this is the result:
[{"tipo":"1001"},{"tipo":"1002"},{"tipo":"1003"},{"tipo":"1004"}]
*
[{"tipo":"2001"},{"tipo":"2002"},{"tipo":"2003"}]
*
what is supposed to do:
*1001
*1002
*etc
*2001
*2002
How to avoid this?
EDIT:i have tried
<ul >
<li ng-repeat="menuOpcion in menu"><a href="#" >{{menuOpcion.opciones.oferta.tipo}}</a></li>
</ul>
Try
<ul>
<li ng-repeat="menuOpcion in menu[0].opciones.oferta"><a href="#" >{{menuOpcion.tipo}}</a></li>
</ul>
<ul >
<li ng-repeat="menuOpcion in menu[0].opciones.demanda"><a href="#" >{{menuOpcion.tipo}}</a></li>
</ul>
I have a website I'm creating, still in it's beginning stages. I have it hosted locally, but when I click the links, it says the files cannot be found even though they do in fact exist. Also, the styling won't apply. My index.html is below:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<base href="/">
<title>Sports</title>
<!-- CSS -->
<link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="libs/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="css/style.css"> <!-- custom styles -->
<!-- JS -->
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<!-- ANGULAR CUSTOM -->
<script src="js/controllers/MainCtrl.js"></script>
<script src="js/controllers/TeamsCtrl.js"></script>>
<script src="js/services/TeamsService.js"></script>
<script src="js/appRoutes.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="myApp" ng-controller="MainController">
<div class="container">
<!-- HEADER -->
<nav class="container-fluid navbar navbar-default navbar-fixed-top" role="navigation" ng-controller="HeaderController">
<div class="navbar-header">
<a class="navbar-brand" href="/"><i class="fa fa-home fa-lg"></i>Sports</a>
</div>
<ul class="nav navbar navbar-nav">
<li ng-class="{ active: isActive('/teams') }">Teams</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-user"></i> Log In</li>
</ul>
</nav>
<!-- ANGULAR DYNAMIC CONTENT -->
<div ng-view></div>
</div>
</body>
</html>
The part I do not understand is that this runs fine on my work computer. I zipped it up, sent it to myself at home, and it doesn't run correctly. When I click the Teams link, it takes me here: file:///C:/teams, which isn't correct. I have no idea where to even start looking, as this is my first web project. Any help would be greatly appreciated as to where I should start/what the issue could be. Thank you ahead of time.
use ~ symbol infront of all your links. For example use ~/teams instead of /teams.
~ symbol will take you current folder where the files are located.
I wasn't running a localhost web server on my machine. Once I did, everything worked fine.
I'm having difficulty with ScrollSpy on my web page. I've tried to put the class file indicators into the correct locations but they are still not showing up.
fiddle
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Unix Command Crib Sheet</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico">
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="command-crib-sheet.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-target=".thingy">
<div class="navbar-fixed-top">
<h2>Unix Command Crib Sheet</h2>
</div>
<div class="container">
<div class="col-md-3">
<div id="centered-nav" class="bs-sidebar hidden-print affix">
<nav id="thingy" class="nav bs-sidenav">
<li>
...
Yes, just add a class 'thingy' to
<div class="container thingy">
added new css to highlight the text(change style accordingly)
li.active a {
color: red;
}
and finally add this script to page
<script type="text/javascript">
$('body').scrollspy({
target: '.thingy'
});
</script>
last but not least i have changed <nav> to <ul>
<nav id="thingy" class="nav bs-sidenav">
to
<ul id="thingy" class="nav bs-sidenav">
That's it..!
I'm sure this is a really simple question, but I'm a noob and can't figure it out. I'm trying to mess around with the Twitter-Bootstrap starter template to help myself learn HTML, CSS, and JS. I copied and pasted the source code into TextWrangler and opened the html file in Firefox. No bootstrap functionality.
I'm almost certain it's because lines like <link href="../assets/css/bootstrap.css" rel="stylesheet"> need to be altered to reflect the css/js files' addresses on my own computer. If that's the problem, how do I do this?
Here is the source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<h1>Bootstrap starter template</h1>
<p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
You're right in your assumption that it's because of the <link href="../assets/css/bootstrap.css" rel="stylesheet"> line.
This line is a reference to the css file. What you will need to do is save the bootstrap files to your computer in folder somewhere.
To do this, download bootstrap from http://twitter.github.io/bootstrap/ and copy the css, img and js folders into your folder.
Now in your file in TextWrangler change the href attribute to "css/bootstrap.css" it will look like this <link href="css/bootstrap.css" rel="stylesheet">.
Now save your file as index.html in the same directory as the other folders you copied in.
You will want to do the same for all other references like this one for instance <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">.
You will also see at the bottom there are references to some JavaScript files. Change those too.
Good luck!