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.
Related
Sorry for the newbie question, but...
Say I have three images in a paragraph/div, displayed as
A B C
in desktop view.
If I switch to mobile view, the images do not resize, so they appear as
A B
C
...but my goal is to always keep them on one single line, shrinking the entire line to fit.
Every solution I tried resizes stuff individually instead than as a group, so the result is always the same.
In fact, It would be extremely useful if there was a generic solution I could apply to shortcode outputs too!
Please have mercy on this absolute beginner... Thanks!
You could just use Bootstrap, which comes with Flex. https://getbootstrap.com/docs/4.4/utilities/flex/
Here's an example. Most of the example is the starter template from https://getbootstrap.com/docs/4.4/getting-started/introduction/ to which I added the div container with the 3 images.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="d-flex bd-highlight">
<div class="p-2 flex-grow-1 bd-highlight"><img style="width:100%;" src="https://images.pexels.com/photos/3994840/pexels-photo-3994840.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"/></div>
<div class="p-2 flex-grow-1 bd-highlight"><img style="width:100%;" src="https://images.pexels.com/photos/3994840/pexels-photo-3994840.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"/></div>
<div class="p-2 flex-grow-1 bd-highlight"><img style="width:100%;" src="https://images.pexels.com/photos/3994840/pexels-photo-3994840.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"/></div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
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 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!
I'm kind of new to Foundation and I'm trying to create a top bar, but my code does not create the top bar for me. Can you help??? I've reviewed the documentation for the top bar, but I'm still stuck.
Thank you in advance.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/foundation.css">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<!--<div class="row">
<div class="meduim-6 columns"><img src="http://placehold.it/300x100"></div>
</div>-->
<div class="contain-to-grid sticky">
<nav class="top-bar" >
</nav>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<!-- Other JS plugins can be included here -->
<script>
$(document).foundation({
topbar : {
custom_back_text: false,
is_hover: false,
mobile_show_parent_link: true
}
});
</script>
</body>
</html>
Thank you in advance.
Your app.css and app.js are missing
<head>
<!-- Included CSS Files -->
<link rel="stylesheet" href="stylesheets/foundation.min.css">
<link rel="stylesheet" href="stylesheets/app.css">
<!-- Custom Modernizr -->
<script src="javascripts/foundation/modernizr.foundation.js"></script>
</head>
<body>
<!-- jQuery -->
<script src="javascripts/jquery.js"></script>
<!-- JS Files-->
<script src="javascripts/foundation.min.js"></script>
<!-- Initialize JS Plugins -->
<script src="javascripts/app.js"></script>
</body>