Twitter Bootstrap

Med Twitter Bootstrap er det nemt at lave et pænt og responsivt layout der virker på alle skærm størrelser. Et flot eksempel er CollaborationToday.info hvor Per Lausten har lavet Bootstrap delen – alt er selvfølgelig lavet med XPages.

Bootstrap håndterer et fluid grid med 12 kolonner. Udvalgte elementer kan nemt vises/skjules på forskelige devices ved at give dem en class:

  • .visible-phone / .hidden-phone
  • .visible-tablet / .hidden-tablet
  • .visible-desktop / .hidden-desktop

Der følger en del ikoner med som nemt kan indsættes i html koden:

<i class=”icon class name”></i>

Alle ikoner kan ses på Bootstraps hjemmeside

Hvis du vil i gang, så følg nedenstående links – der er både guides, tutorials og tips:

Bootstrap på en XPages

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
	xmlns:xc="http://www.ibm.com/xsp/custom">
	<xp:this.resources>
		<xp:metaData name="viewport"
			content="width=device-width, initial-scale=1.0">
		</xp:metaData>

		<xp:metaData name="charset" content="utf-8"></xp:metaData>

		<xp:styleSheet href="/css/bootstrap.css"></xp:styleSheet>
		<xp:styleSheet href="/css/bootstrap-responsive.css"></xp:styleSheet>
		<xp:styleSheet href="/custom.css"></xp:styleSheet>
	</xp:this.resources>

	<xc:layout_topmenu></xc:layout_topmenu>
	<div class="container">

		<!-- Content row -->
		<xp:callback facetName="facet_1" id="callback1"></xp:callback>
		<!-- end content row -->

	</div>
	<!-- End container -->
	<!-- Placed in the bottom for faster load times -->
	<script type="text/javascript" src="js/jquery-1.8.2.min.js"
		clientSide="true">
	</script>
	<script type="text/javascript" src="js/bootstrap.js"
		clientSide="true">
	</script>
	<xc:ccDebugToolbar load="true" defaultCollapsed="false"
		collapseTo="left" rendered="false">
	</xc:ccDebugToolbar>

</xp:view>

2 tanker om "Twitter Bootstrap"

  1. Pingback: Quick search i views lavet med en Repeat Control | XPages.dk

  2. Pingback: Dynamisk Dropdown menu med Boostrap | XPages.dk

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *

*