I use bellow code to add a right button, which is "订阅按钮":
<!doctypoe html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
www.<strong>google</strong>.com
<ul class="nav navbar-nav">
<li class="active">课程</li>
<li>博客</li>
<li>手册</li>
</ul>
订阅课程
</div>
</nav>
<div class="container" style="height:5000px;">
<div>
<h1>title123</h1>
<p>按时打算是多少对阿斯达方的方式斯蒂芬斯蒂芬按时打算</p>
</div>
</div>
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
But however the button is not vertical align center, you can see my snapshot bellow:
Tested your code and it's not vertically centered in bootstrap versions 3.0.0-3.0.2 but centered in 3.0.3-3.3.7
I suspect you are using an old version of bootstrap. Upgrade?
Related
I have this code and I want to use the "menu icon" in the code, but it did not appear, and I did not know why?
And this file contains a set of instructions containing the icon and other things, and as it is clear, the icon was placed in the Navbar, but it did not appear
<html DOCTYPE="html5">
<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">
<title>Website Using Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="logo">
<h1>Portfolio</h1>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Process</li>
<li>Testimony</li>
<li>Contact</li>
</ul>
<box-icon name="menu" type="solid"></box-icon>
</nav>
</header>
<script src="https://unpkg.com/boxicons#2.0.9/dist/boxicons.js"></script>
<script src="app.js"></script>
</body>
</html>
It seems element with attribute name="menu" has not attribute type="solid". However, element with attribute name="menu" has attribute type="regular" .
Removing type="solid" or swapping it to type="regular" will make it work.
<box-icon name="menu" type="regular"></box-icon>
<box-icon name="menu"></box-icon>
check demo in Full Page
put your boxicons script in <head></head> tag and it will start working here is the working demo update me if any change is required.
<html doctype="html5">
<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">
<title>Website Using Flexbox</title>
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/boxicons#2.0.9/dist/boxicons.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<nav>
<div class="logo">
<h1>Portfolio</h1>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Process</li>
<li>Testimony</li>
<li>Contact</li>
</ul>
<box-icon name="menu" type="solid"></box-icon>
</nav>
</header>
</body>
</html>
I solved the problem by adding the "Font Awesome" library
As you can see on my code, on the left panel, i have an UL and 2 LI.
I want all LI as white color.
I've set style but is not professional, perhaps setting my own style:
lblBiancoMenu does not affect
what can i do?
.lblBiancoMenu {
color: white;
}
;
.subCat .li {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Pushy - Off-Canvas Navigation Menu</title>
<meta name="description" content="Pushy is an off-canvas navigation menu for your website.">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Icons list-> https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<div data-role="page" id="pageone">
<div style=" background-color: #101010; color: #ffffff;">
<h2 id="listCateg">Categories</h2>
<div id="SubCat3" class='subCat'>
<ul>
<li><a style="color:white" href="#">3</a></li>
<li><a class="lblBiancoMenu" href="#">4</a></li>
</ul>
</div>
</div>
</div>
</body>
</HTML>
The theme you're importing has its own CSS styles. The color rule being imported has a higher specificity than your rule, so your rule is being overridden.
To override the theme styles, either use inline CSS (as you have done). Embedding the CSS in the HTML tag gives it higher specificity.
Or use the !important annotation, which overrides all other CSS declarations.
Use this in your code:
.lblBiancoMenu {
color: white !important;
}
.lblBiancoMenu {
color: white !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Pushy - Off-Canvas Navigation Menu</title>
<meta name="description" content="Pushy is an off-canvas navigation menu for your website.">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Icons list-> https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<div data-role="page" id="pageone">
<div style=" background-color: #101010; color: #ffffff;">
<h2 id="listCateg">Categories</h2>
<div id="SubCat3" class='subCat'>
<ul>
<li><a style="color:white" href="#">3</a></li>
<li><a class="lblBiancoMenu" href="#">4</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
I am new in Bootstrap and developed a web page using bootstrap,My page works fine pc/laptop browsers but when i use uc browser my grid layout does not work .is there any way to fix this?
heres my code:
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>MD</title>
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css"
href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link
href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700"
rel="stylesheet">
</head>
<body>
<div class="container">
<section class="itsolutions" id="it">
<h2>IT Solutions</h2>
<div class="row">
<div class="col-lg-6 col-sm-12 col-12">
<i class="ion-settings icon-big ic"></i>
<h3>Website Design & Development</h3>
<p>texts</p>
</div>
<div class="col-lg-6 col-sm-12 col-12">
<i class="ion-android-bulb icon-big ic"></i>
<h3>Software Solutions</h3>
<p>texts</p>
</div>
</div>
</section>
</div>
</body>
</html>
Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile's Turbo mode, UC Browser, Amazon Silk) are not supported.
You welcome to Bootstrap. You just need change some part of your html code to use bootstrap classes for extra-small(xs) scales.
<div class="row">
<div class="col-lg-6 col-sm-12 col-xs-12"> <!--Here is changed-->
<i class="ion-settings icon-big ic"></i>
<h3>Website Design & Development</h3>
<p>texts</p>
</div>
<div class="col-lg-6 col-sm-12 col-xs-12"> <!--Here is changed-->
<i class="ion-android-bulb icon-big ic"></i>
<h3>Software Solutions</h3>
<p>texts</p>
</div>
</div>
Also this link may help you to know which class related to which screen width in pixel.
I have the newest Foundation complete version and I am following this tutorial. https://www.youtube.com/watch?v=RK_k__4Y4TU
I am trying to get a menu but there is nothing on my website at all. It is just blank.
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<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">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<ul class="menu vertical">
<li>Links</li>
<li>Links</li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content></div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
I tried your code and only mistake is you have written off-canvas insted of off-canvas-wrap.
No class exist with name off-canvas.
<div class="off-canvas-wrap position-left" id="offCanvas" data-off-canvas>
I am learning on how to make a canvas menu with Foundation & I made this example but it does not work at all!
Here's the code:
<!DOCTYPE html>
<!--[if IE 9]>
<html class="lt-ie10" lang="en">
<![endif]-->
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>thenewboston</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="main.css">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<!-- Toggle button -->
<a class="left-off-canvas-toggle" href="#">Toggle Menu</a>
<!-- Offcanvas menu -->
<aside class="left-off-canvas-menu">
<ul class="no-bullet">
<li>Home</li>
<li>Profile</li>
<li>Logout</li>
</ul>
</aside>
<!-- Main content -->
<div class="row">
<div class="medium-6 columns bg-2">Hey now dude</div>
<div class="medium-6 columns bg-3">This is some sample content</div>
</div>
<!-- Exit overlay -->
<a class="exit-off-canvas"></a>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Everything looks perfect and my css & js folders are correctly placed at the same directory. I also test if foundation works or not with another simple example and it worked fine. I really don't know why it's not working. Please if you know how to solve it ,please let me know.. Thanks!