I'm still wrapping my head around bootstrap's grid system, and I'd like to set up a photo grid consisting of three images, with this layout. How would I go about it?
Here is an example of the grid system. You need to create a row to hold all of the sections. Then inside the row, create 2 columns, left and right. On the right column, create 2 rows.
So the structure should be like this:
- row
- column
- column
- row
- row
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col" style="padding:100px; background:red;">
1
</div>
<div class="col">
<div class="row" style="padding:100px; background:blue;">
2
</div>
<div class="row" style="padding:100px; background:gray;">
3
</div>
</div>
</div>
</div>
</body>
</html>
Related
I am trying to apply a slide transition between divs with Jquery Mobile.
I have the below HTML structure:
// More content ... No jQuery Mobile needs
<div data-role="page">
Go to #1.
Go to #2.
</div>
<div id="p1" data-role="page">
<div data-role="main">I am P 1</div>
</div>
<div id="p2" data-role="page">
<div data-role="main">I am P 2</div>
</div>
I copied the structure from a W3School demo. But doesn't work for me.
In first place, #p1 and #p2 hace display:block. And when i click the links the content doesn't change.
Any ideas ?
Have you included jQuery and jQueryMobile correctly.Your code is working
as follows.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<div data-role="page">
Go to #1.
Go to #2.
</div>
<div id="p1" data-role="page">
<div data-role="main">I am P 1</div>
</div>
<div id="p2" data-role="page">
<div data-role="main">I am P 2</div>
</div>
</body>
</html>
The below given code is not working even after including all the script files.I cannot see the toggle happen on the panel.
What needs to be added to the code?
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="row aet-content-fluid">
<div class="panel-group ud-accordion" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<div class="panel-title">
<h2>
<a role="button" data-parent="#accordion"
data-toggle="collapse" href="javascript:void(0);#tab1" aria-controls="tab1"
class="" aria-expanded="false"><span>Office Information</span>
</a>
</h2>
</div>
</div>
<div id="tab1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body office-detail-panelBody">
This content is straight in the template.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It took me a while but it seems the problem is in scripts you included.
First you need a jquery included.
And the second: Order is important.
When I set the <head> section to:
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="example.js"></script>
</head>
It worked! Three first inclusions (link and two scripts) is the order recommended by bootstrap creators.
Ok, im probably doing this wrong... But in my main _Layout I have this:
<div id="navigation">
#RenderSection("Navigation")
</div>
which points to this in my Index.cshtml view:
#section Navigation{
<-- Need this to point to Views/Shared/Navigation.cshtml -->
}
But I don't want to have a huge file with all my code in it, so I need to know how to point to a file called "Navigation.cshtml" inside of this section - basically so I have all my sections in separate, independent files.
I tried just doing #RenderPage("Navigation.cshtml") in the _Layout instead of #RenderSection, and that gives errors.
--EDIT--
If I add this instead of #RenderSection()
<div id="navigation">
= #RenderPage("~Views/Shared/Navigation.cshtml")
</div>
I get this:
The file "~/Views/Shared/~Views/Shared/Navigation.cshtml" could not be rendered, because it does not exist or is not a valid page.
--EDIT--
FULL _Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"> </script>
</head>
<body>
<div id="wrapper">
<div id="content">
<!-- BANNER -->
<div id="banner">
</div>
<!-- NAVIGATION -->
<div id="navigation">
#RenderPage("Navigation.cshtml")
</div>
<!-- MAIN DISPLAY -->
<div id="main">
#RenderBody()
</div>
<!-- FOOTER -->
<div id="footer">
</div>
</div>
</div>
Try with full path of view or you can use Html.Partial() or #Html.RenderPartial():
<div id="navigation">
#RenderPage("Navigation.cshtml")
</div>
Html.Partial():
<div id="navigation">
#Html.Partial("~/Views/Shared/Navigation.cshtml")
</div>
Html.RenderPartial():
<div id="navigation">
#{ Html.RenderPartial("~/Views/Shared/Navigation.cshtml"); }
</div>
If you want to keep the #RenderSection("Navigation") in your _Layout you can try below code in your view.
#section Navigation{
#Html.Partial("~/Views/Shared/Navigation.cshtml")
}
OR you can change the _Layout as below.
<div id="navigation">
#Html.Partial("~/Views/Shared/Navigation.cshtml")
</div>
Try just to render a page "Views/Shared/Navigation.cshtml" as a partial view like this:
<div id="navigation">
#Html.RenderPartial("Navigation")
</div>
I need a clickable "table" in my app.
The closest I have gotten is using listviewer and links in combination with grid.
The example below is what I need (a clickable tablerow and a separate button to the right).
My problem is that I cant line up the "body-columns" with the "header-titles" becuase the button in my "table body" offsets the grid.
http://jsfiddle.net/lokkin/p9M8p/3/
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<ul data-role="listview" data-split-icon="gear" data-inset="true">
<li data-role="list-divider">
<div class="ui-grid-d">
<div class="ui-block-a">TRK</div>
<div class="ui-block-b">STATUS</div>
<div class="ui-block-c">NR</div>
<div class="ui-block-d">PFIX</div>
<div class="ui-block-e">EHNR</div>
</div>
</li>
<li> <a href="#Select" class="ui-grid-d">
<div class="ui-block-a">
TRUCK1
</div>
<div class="ui-block-b">
123
</div>
<div class="ui-block-c">
ABC123
</div>
<div class="ui-block-d">
456
</div>
<div class="ui-block-e">
789
</div>
</a>
Details
</li>
</ul>
</div>
</body>
</html>
Just add right padding to the divider to match the listitems:
.ui-li-divider{
padding-right: 56px !important;
}
Updated FIDDLE
I have one template which consist of several pages (data-role="page").
Also I have data which should be generated by script. Generated data depends on page, where script launch.
How I can get page id or another unique info about it in events, connected with changing pages?
I've tried pageshow event, but I cant get where page id.
Thanks.
Here's an working example: http://jsfiddle.net/Gajotres/ecXuk/
Also take a look at my other article on similar question: https://stackoverflow.com/a/14010308/1848600
Here's a code example:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
Test button
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second">
<div data-theme="a" data-role="header">
Back
<h3>
Second Page
</h3>
</div>
<div data-role="content">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
And js part:
$('#index').live('pagebeforeshow',function(e,data){
alert('Index Page');
});
$("#second").live('pagebeforeshow', function () {
alert('Second Page');
});