I have the following layout based on angular material layout:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Angular Material - Starter App</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"/>
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,700'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.8.3/angular-material.css"/>
<link rel="stylesheet" href="./style.css"/>
</head>
<body ng-app="starterApp" layout="column">
<div flex="20" flex-gt-md="25" flex-lg="25" flex-gt-lg="25" layout="column">
<div flex="30" layout="row" layout-align="center">
<div flex flex-gt-md="40" flex-lg="40" flex-gt-lg="40" layout="row">
<md-toolbar flex="20" id="home" layout="row">
<h1>Navi1</h1>
</md-toolbar>
<md-toolbar flex layout="row">
<h1>Navi1</h1>
</md-toolbar>
</div>
</div>
<div flex layout="row" layout-align="center">
<md-toolbar flex-gt-md="40" flex-lg="40" flex-gt-lg="40" layout="row">
<h1>Navi2</h1>
</md-toolbar>
</div>
</div>
<div flex style="background-color:green">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-aria.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.8.3/angular-material.js"></script>
<script type="text/javascript">
angular
.module('starterApp', ['ngMaterial'])
.run(function ($log) {
$log.debug("starterApp + ngMaterial running...");
});
</script>
</body>
</html>
Please try it on firefox and chrome, and you will see it works not the same, why?
Put the initial code on this order:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"/>
<meta charset="utf-8">
<meta name="description" content="">
<title>Angular Material - Starter App</title>
Related
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 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?
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 using Bootstrap 3 and have a container with rows, all overflowing content will get white background. Any idea where to look for?
This is just some example how the page looks like, not the original code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<title></title>
<link href="css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row">
.....
</div>
</div>
</body>
</html>
i am using ratchet framework but it showing black flash screen before starts my application on mobile and it is very annoying
how can i remove that screen or suggest me some other framework
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Notes</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Roboto -->
<link rel="stylesheet" href="../../dist/css/ratchet.min.css">
<link rel="stylesheet" href="../../dist/css/ratchet-theme-android.min.css">
<script src="../../dist/js/ratchet.min.js"></script>
</head>
<body>
<header class="bar bar-nav">
<a class="icon icon-left-nav pull-left"></a>
<a class="icon icon-compose pull-right"></a>
<h1 class="title">Title</h1>
</header>
</body>