Outros - RibaFS Portal

Engine Game Maker

2017-08-01T15:26:04-03:00

Game Maker -Uma Game Engine Fácil de Usar

https://www.yoyogames.com/get

Escolha a versão 1.4 ou a 2.

Elas já vem com tudo que você precisa para lidar com fontes, texturas, sons e músicas, assim como qualquer outra coisa que você possa precisar para o desenvolvimentos dos seus jogos.

Tudo isso com um sistema de "arraste-e-solte" para agilizar e tornar ainda mais intuitivo sua interação com a ferramenta. Com o Game Maker: Studio você poderá criar jogos digitais de qualidade mesmo sem ter conhecimento de programação.

Para te ajudar a deixar seu jogo livre de erros, o Game Maker conta com uma opção chamada debugging mode. Quando operando em debugging mode, o Game Maker lhe dá acesso a uma série de funções para debugging que mostram mensagens para ajudar a identificar os possíveis erros.

O Game maker lhe permite testar seus jogos diretamente na plataforma alvo (celulares ou tablets, por exemplo) sem precisar criar um arquivo executável ou mesmo instalar o jogo no dispositivo: basta escolher a plataforma alvo e o Game Maker cuidará do resto para você.

http://producaodejogos.com/fazendo-jogos-com-gamemaker/

Framework Ionic

2017-07-12T10:22:18-03:00

Ionic Framework

Mais um dentre a quantidade enorme de ferramentas para criação de aplicativos móveis. Mas o Ionic não é apenas mais um, ele se destaca entre os demais, pois tem como base o Cordova e oferece uma grande quantidade de componentes prontos e recursos em seu site.

https://ionicframework.com/
http://creator.ionic - uma ferramenta online com interface drag-&-drop para você criar protótipos de aplicativos
https://apps.ionic.io/apps/
https://ionic.io/products/creator
https://docs.ionic.io/services/package/.io
http://view.ionic.io
http://ngcordova.com
http://play.ionic.io
https://apps.ionic.io/
http://ionicframework.com/docs/v1/guide/
http://showcase.ionicframework.com/apps/top
https://market.ionic.io/ - um lugar onde você pode encontrar plugins, templates e exemplo de aplicativos.
http://lab.ionic.io/ - uma IDE para você desenvolver seu aplicativo. (Não é obrigatório, você pode utilzar qualquer IDE de sua preferência)
https://github.com/IonicBrazil
Slack - http://ionicworldwide.herokuapp.com/
https://github.com/ionic-team/ionic

Criar app Ionic e build

ionic start ola tabs
ionic serve
ionic login email senha
ionic link (indicar a app da nuvem ou criar uma nova e depois linkar)
ionic package build android --prod (release)
ionic cordova build android
ionic cordova resources android - cria os ícones e splashscreens
Requer ícone em resources/icon.png com pelo menos 1024x1024px e resources/splash.png com 2732x2732px. Se usamos ionic start já existem reources default. Este comando atualizará a apsta resources e o config.xml
ionic upload

Mais comandos com detalhes

ionic start appname template - cria um app do ionic
ionic start agenda sidemenu
cd agenda
ionic serve - - inicia servidor logal. Mostrará IP:porta
ionic login - login com https://apps.ionic.io. Ou: ionic login email password
ionic link
ionic upload - compacta o app local e envia para a nuvem
ionic cordova build android - prepara e compila uma app para uma certa plataforma
ionic cordova compile android
ionic cordova emulate android
ionic cordova plugin <acoes><plugin>
ionic cordova plugin ls
ionic cordova resources android - cria os ícones e splashscreens
Requer ícone em resources/icon.png com pelo menos 1024x1024px e resources/splash.png com 2732x2732px. Se usamos ionic start já existem reources default. Este comando atualizará a apsta resources e o config.xml
ionic cordova run - executa app em dispositivos reais
ionic info - mostra informações do ambiente
ionic link <app> - conecta app com ionic build - caso tenha um app em https://apps.ionic.io este poderá ser linkado para a app local
ionic package lisk - lista apps das nuvens

Configurar ambiente no Windows
http://matheuslao.github.io/2015/06/09/ambiente-desenvolvimento-ionic-framework-ubuntu-vagrant

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs

sudo npm install -g cordova ionic

node -v - 6.11
npm -v - 3.10.10

Criar app myApp tendo tabs como template
ionic start {appname} {template}

Criar app usando template

ionic start nomeApp tempalte
ionic start myApp tabs

Com template blank
ionic start myApp blank

Com sidemenu
ionic start myApp sidemenu

Geradores: blank, tabs (default), sidemenu, super e tutorial

Aplicativo simples
https://www.sitepoint.com/building-simple-app-using-ionic-advanced-html5-mobile-app-framework/
https://scotch.io/tutorials/create-your-first-mobile-app-with-angularjs-and-ionic

https://ionicframework.com/docs/intro/deploying/
https://tableless.com.br/tutorial-ionic-meu-primeiro-app/

https://developer.android.com/studio/index.html

Extrair para a pasta "android-studio"
Acessar o terminal
cd android-studio/bin
./studio.sh

Instalar Gradle
sudo apt-get install gradle

Habilitar a licensa do Android
sdkmanager --licenses
Concordar sempre com y

Listar versões do Cordova Android instalados
cordova platform ls

Rodando a app em emulador de android

git config --global user.email "you@example.com"
git config --global user.name "Your Name"

sudo npm install -g ionic@latest

ionic start myApp2 tutorial
npm link cordova
npm link ionic

ionic cordova run android --device
ionic cordova build android

https://ionicframework.com/docs/cli/cordova/build/

adb kill-server
adb start-server

Upload
cd app
ionic upload (envia para view.ionic.io)

adb devices

Após tudo instalado e configurado
cordova run --emulator

avdmanager list avd
touch ~/.android/repositories.cfg
../android update sdk -u --filter platform-tools,android-26 --use-sdk-wrapper
../android list target

Criar imagem
sdkmanager "system-images;android-25;google_apis;x86"

Criar AVD
avdmanager create avd -n test -k "system-images;android-25;google_apis;x86" -b x86 -c 100M -d 7 -f

Criar Exemplos do Ionic partindo da documentsção Componentes
https://ionicframework.com/docs/components/

Criar um app e aplicar o código nela

ionic start componentes tabs

cd componentes
ionic serve

cordova build android

ionic cordova --run emulate android

cordova run --emulator (erro: falta imagem AVD)

No celular
cordova run android -- --gradleArg=-PcdvMinSdkVersion=20

Assinando uma app
cordova run android --release -- --keystore=../AgendaChave.keystore --storePassword=password --alias=agenda_chave --password=password

Outra Lista de comandos do ionic:

docs Open the Ionic documentation website
generate Generate pipes, components, pages, directives, providers, and tabs (ionic-angular >= 3.0.0)
info Print system/environment info
link Connect your local app to Ionic
login Login with your Ionic ID
serve Start a local dev server for app dev/testing
signup Create an Ionic account
start Create a new project
telemetry Opt in and out of telemetry
upload Upload a new snapshot of your app
cordova build Build (prepare + compile) an Ionic project for a given platform
cordova compile Compile native platform code
cordova emulate Emulate an Ionic project on a simulator or emulator
cordova platform Manage Cordova platform targets
cordova plugin Manage Cordova plugins
cordova prepare Transform metadata to platform manifests and copies assets to Cordova platforms
cordova resources Automatically create icon and splash screen resources
cordova run Run an Ionic project on a connected device
package build Start a package build
package download Download your packaged app
package info Get info about a build
package list List your cloud builds

Exemplo completo de criação de app

Criar app
ionic start exemplos tabs (ionic start CalculoIMC blank --appname "Cálculo de IMC")

Executar app no navegador
ionic serve

Executar app
ionic platform android

Build - gerar executável

Instalando plugin
npm install --save-dev --save-exact @ionic/clip-plugin-cordova@latest

cordova platform add --save android

ionic cordova build android
Cria em /home/ribafs/exemplos/platforms/android/build/outputs/apk/android-debug.apk
https://ionicframework.com/docs/cli/cordova/build/

ionic cordova emulate android
https://ionicframework.com/docs/cli/cordova/emulate/

Rodar no celular
ionic run android

Ícone e Splash Screen

Ícone

Inclua um arquivo icon.png, icon.psd ou icon.ai na pasta resources do projeto. Certifique que o tamanho mínimo da imagem seja 192px x 192px e que não tenha cantos arredondados. Com isso basta rodar o comando abaixo que o Ionic gera todos os tamanhos possíveis para cada plataforma.

ionic resources --icon

Splash Screen

Inclua um arquivo splash.png, splash.psd ou splash.ai na pasta resources do projeto. Certifique que o tamanho mínimo da imagem seja 2208px x 2208px. Com isso basta rodar o comando abaixo que o Ionic gera todos os tamanhos possíveis para cada plataforma.

ionic resources --splash

Criar Aplicativos com Ionic
https://www.youtube.com/watch?v=yoCvd-ksu6w

Tutorial Abrangente

https://hollyschinsky.github.io/ConferenceTracker/install-ionic.html

Outro

Ionic Framework tutorial

http://ccoenraets.github.io/ionic-tutorial/install-ionic.html

Ionic - Dicas

2017-07-12T10:22:18-03:00

Ionic - Dicas

Bons Tutoriais

Understanding Ionic 2 Components (Tutorial)
https://coursetro.com/posts/code/37/Understanding-Ionic-2-Components-(Tutorial)

Getting Started with Ionic 2 for Beginners
https://coursetro.com/courses/11/Getting-Started-with-Ionic-2-for-Beginners

Ionic Quick Guide
http://www.tutorialspoint.com/ionic/

Getting Started With Ionic: Introduction
https://code.tutsplus.com/tutorials/getting-started-with-ionic-introduction--cms-25919

Getting Started With Ionic: JavaScript Components
https://code.tutsplus.com/tutorials/getting-started-with-ionic-javascript-components--cms-26168

Getting Started With Ionic: Services
https://code.tutsplus.com/tutorials/getting-started-with-ionic-services--cms-26278

WebSQL para Mobile

2017-07-11T20:51:28-03:00

WebSQL é uma tecnologia do HTML5 que usa SQL do lado do cliente para armazenar dados.

Para quem está acostumado com bancos de dados SQL fica bem confortável.

Diferente do localStorage e do IndexedDb, que não usam SQL e com isso ficam um pouco mais trabalhosos.

O WebSQL foi descontinuado pelo consórcio W3C e por alguns navegadores, mas continua sendo suportado pelas últimas versões do Google Chrome, Opera, Safari e Android e iOS. É o preferido por boa parte dos desenvolvedores.

Algumas referências sobre o WebSQL e seu uso

https://www.turbosite.com.br/blog/sql-do-lado-do-cliente-web-sql-database-com-html5/
https://www.w3.org/TR/webdatabase/
http://codigofonte.uol.com.br/artigos/trabalhando-com-o-web-sql-database-do-html5
http://html5doctor.com/introducing-web-sql-databases/
https://html5demos.com/
https://www.tutorialspoint.com/html5/html5_web_sql.htm
http://caniuse.com/#feat=sql-storage
http://caniuse.com/#feat=indexeddb

Discussão sobre a depreciação do WebSQL
https://softwareengineering.stackexchange.com/questions/220254/why-is-web-sql-database-deprecated
https://www.html5rocks.com/en/tutorials/webdatabase/websql-indexeddb/

Extensão para Firefox suportar WebSQL
https://addons.mozilla.org/pt-br/firefox/addon/html5-websql-for-firefox/
IndexedDb, WebSQL e localStorage
https://github.com/yathit/ydn-db
https://www.npmjs.com/package/lib-websql
http://html5sql.com/
http://alasql.org/
https://github.com/localForage/localForage
http://blog.teamtreehouse.com/using-localforage-offline-data-storage
https://github.com/matthew-andrews/ft-style-offline-web-app-part-2
https://labs.ft.com/2012/09/ft-style-web-app-on-firefox-and-ie6-to-ie10/?mhq5j=e3
https://github.com/cesarjr/crud-offline

WebSQL - Exemplos

2017-07-11T20:51:28-03:00

WebSQL - Exemplos

agenda.zip

agenda2.zip

websql_ex.zip

crud-offline - três exemplos usando o WebSQL

<html>
<head>
<title>Look at WebSQL</title>
<script>
//https://gist.github.com/andyj/1599544
	// Through the code below remember essentialy there are just 3 core methods we tend to use
	// openDatabase
	// transaction
	// executeSql
	// Opening a connection 
	// window.openDatabase( database name , version , database description, estimated size );
	// The size is flexible but some browsers put a restriction of 5mb so know your environment
	var db = window.openDatabase("myDatabase", "1.0", "My WebSQL test database", 5*1024*1024);
	if(!db) {
		// Test your DB was created
		alert('Your DB was not created this time');
		return false
	}
		
	// Prepare you statement 
	// With your DB working we can add tables and run queries via the transaction function
	// db.transactions( transaction, error callback, ready callback )
	db.transaction(
		function(tx){
			// Execute the SQL via a usually anonymous function 
			// tx.executeSql( SQL string, arrary of arguments, success callback function, failure callback function)
			// To keep it simple I've added to functions below called onSuccessExecuteSql() and onFailureExecuteSql()
			// to be used in the callbacks
			tx.executeSql(
				"CREATE TABLE IF NOT EXISTS fightclub (id INTEGER PRIMARY KEY AUTOINCREMENT, rules TEXT)",
				[],
				onSuccessExecuteSql,
				onError
			)
		},
		onError,
		onReadyTransaction
	)
	// At this point you now know everything to continue. All I'm am going to do now is add
	// a single record to our table
	db.transaction(
		function(tx){
			tx.executeSql( "INSERT INTO fightclub(rules) VALUES(?)",
			['You do not talk about Fight Club'],
			onSuccessExecuteSql,
			onError )
		},
		onError,
		onReadyTransaction
	)
		
	// All thats left is to get the results on the page
	// There where clause below is weak, but its just an example of preparing your statement
	db.transaction(
		function(tx){
			tx.executeSql( "SELECT * FROM fightclub WHERE id > ?",
			['0'],
			displayResults,
			onError )
		},
		onError,
		onReadyTransaction
	)
		
	function onReadyTransaction( ){
		console.log( 'Transaction completed' )
	}
	function onSuccessExecuteSql( tx, results ){
		console.log( 'Execute SQL completed' )
	}
	function onError( err ){
		console.log( err )
	}
	function displayResults( tx, results ){
		
		if(results.rows.length == 0) {
			alert("No records found");
			return false;
		}
		
		var row = "";
		for(var i=0; i<results.rows.length; i++) {
			row += results.rows.item(i).rules + "<br/>";
		}
		document.body.innerHTML = row
	}
</script>

</head>
<body>

</body>
</html>

IndexedDb para Mobile

2017-07-11T16:32:44-03:00

IndexedDb

O indexedDb é uma forma de persistência local do HTML 5. Ele é suportado pela maioria dos navegadores.

O WebSQL é mais popular entre os desenvolvedores por ser SQL, mas o WebSQL foi rejeitado pelo W3 Consórcio e por alguns navegadores.

Alguns exemplos de uso do IndexedDb:

AgendaSimples.zip

BuscaSimples.zip

BuscaSimplesJQM.zip

indexeddb-part-two.zip

indexedDB_sample.zip

todo-list-indexeddb.zip

Jogos Web

2017-07-11T16:32:44-03:00

Alguns bons jogos Web, que podem ser convertidos em mobile.

cron-naves.zip - Original em https://github.com/BlackScorp/cron

pacman-master.zip - Original em https://github.com/daleharvey/pacman

Introdução à jQueryMobile

2017-07-11T16:32:44-03:00

jQueryMobile

Mesmo que tenha jquery em seu nome, jQueryMobile encoraja uma forma inteiramente diferente da que temos visto com jQuery.

É um framework para desenvolver aplicativos mobile responsives e com ele geralmente não usamos CSS nem JavaScript, apenas indicamos suas classes e IDs que ele faz o resto.

Para conhecer mais sobre o jQueryMobile veja seus demos na pasta completa do download.

Algo interessante do jQueryMobile é que ele cria opaginas lógicas em apenas um arquivo html, que funcional como se fossem vários arquivos.

Para criar uma página lógica precisamos de uma div contendo um ID e um data-role="page", assim:

<section id="Pagina1" data-role="page">

Para chamar esta página acima usamos:
<a href="http://backup/portal/#pagina1">Página 1</a>

No pacote baixado a jQueryMobile já traz uns 50 ícones.

Primeira página a ser aberta
Lembrando que a pripeira das páginas lógicas a ser aberta é a primeira na ordem de criação.

Exemplo:

<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>

<body>
<div data-role="page" id="pag1">
<div data-role="header">
<h1>Título 1</h1>
</div>

<div data-role="content">
<h3>Esta é a página 1</h3>
<a href="http://backup/portal/#pag2">Página 1...</a>
</div>

<div data-role="footer">
<h1>Rodapé 1</h1>
</div>
</div>

<div data-role="page" id="pag2">
<div data-role="header">
<h1>Título 2</h1>
</div>

<div data-role="content">
<h3>Esta é a página 2</h3>
<a href="http://backup/portal/#pag1">... Página 1</a>
</div>

<div data-role="footer">
<h1>Rodapé 2</h1>
</div>
</div>

<div data-role="page" id="pag3">
<div data-role="header">
<h1>Título 3</h1>
</div>

<div data-role="content">
<h3>Esta é a página 3</h3>
<a href="http://backup/portal/#pag2">... Página 2</a>
</div>

<div data-role="footer">
<h1>Rodapé 3</h1>
</div>
</div>

</body>
</html>

Read more: http://www.linhadecodigo.com.br/artigo/3514/jquery-mobile-estrutura-da-pagina.aspx#ixzz45SlI2MaU

Plataformas
Algo importante de um framework como o jQueryMobile é que ele suporta plataformas distintas como iOS e Android. O programador não precisa se preocupar com as diferenças entre as plataformas e seu código será compatível com ambas.

Usando como mobile

Podemos criar um site web normal, mas que use jQueryMobile e fornecer sua URL para o cliente para que acesse em seu celular.

jQueryMobile - Exemplos

2017-07-11T16:32:44-03:00

jQueryMobile Exemplos

jq_paginas_logicas.html

Pizzas.zip

jQueryMobile - Resumo

2017-07-11T16:32:44-03:00

jQueryMobile - Resumo

http://jquerymobile.com

CDN
<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.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

É um framework para a interface do usuário, que é criada usando o core da jQuery e da jQuery UI.
É usada para desenvolver aplicativos mobile e sites web responsives.
Criado pela equipe da jQuery em 2010.

Características:
- Usada da mesma forma em dispositivos mobile, tablets e desktop.
- Compatível com os frameworks Ionic, Phonegap, Whitelight, etc
- Traz um conjunto de inputs de forms touch-friendly e widgets UI
- É open source e cross plataforma e cross browser
- É escrito em JavaScript e usa recursos da jQuery e jQuery UI para criar sites mobile-friendly
- Ele integra HTML5, CSS3 jQuery e jQuery UI em um único framework para a criação de páginas com o mínimo de scripts.
- Inclue o sistema de navegação com Ajax que usa animação nas mudanças de página

Vantagens

- Fácil de aprender e desenvolver aplicações para quem conhece HTML e CSS.
- Podemos criar o tema personalizado usando ThemeRoller sem escrever nenhuma linha de código. Suporta todos os HTML5 navegadores.
- Escreva o mesmo código para mobile e desktop

Exemplo Simples:

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width = device-width, initial-scale = 1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
    <div data-role="page" id="pageone">
        <div data-role="header">
            <h1>Header Text</h1>
        </div>
        <div data-role="main" class="ui-content">
            <h2>Welcome to TutorialsPoint</h2>
        </div>
        <div data-role="footer">
            <h1>Footer Text</h1>
        </div>
    </div>
</body>

</html>

Demos
http://demos.jquerymobile.com/1.4.5/

Diálogos

<a href="http://backup/portal/dialog.html" class="ui-shadow ui-btn ui-corner-all ui-btn-inline" data-transition="pop">Open dialog</a>

<a href="http://backup/portal/dialog.html" role="button" class="ui-shadow ui-btn ui-corner-all ui-btn-inline" data-transition="slidedown">data-transition="slidedown"</a>
http://demos.jquerymobile.com/1.4.0/pages-dialog/
https://api.jquerymobile.com/dialog/

Botões

http://demos.jquerymobile.com/1.4.5/button-markup/

<a href="http://backup/portal/#" class="ui-btn">Anchor</a>
<button class="ui-btn">Button</button>

<a href="http://backup/portal/#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">No text</a>
<div id="custom-border-radius">
<a href="http://backup/portal/#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">No text</a>
</div>

<a href="http://backup/portal/#" class="ui-btn ui-btn-inline">Anchor</a>
<button class="ui-btn ui-btn-inline">Button</button>

<a href="http://backup/portal/#" class="ui-btn">Anchor - Inherit</a>
<a href="http://backup/portal/#" class="ui-btn ui-btn-a">Anchor - Theme swatch A</a>
<a href="http://backup/portal/#" class="ui-btn ui-btn-b">Anchor - Theme swatch B</a>
<button class="ui-btn">Button - Inherit</button>
<button class="ui-btn ui-btn-a">Button - Theme swatch A</button>
<button class="ui-btn ui-btn-b">Button - Theme swatch B</button>

PopUps

<a href="http://backup/portal/#popupBasic" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-transition="pop">Basic Popup</a>
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.</p>
</div>

ToolTip
<p>A paragraph with a tooltip. <a href="http://backup/portal/#popupInfo" data-rel="popup" data-transition="pop" class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext" title="Learn more">Learn more</a></p>
<div data-role="popup" id="popupInfo" class="ui-content" data-theme="a" style="max-width:350px;">
<p>Here is a <strong>tiny popup</strong> being used like a tooltip. The text will wrap to multiple lines as needed.</p>
</div>

Menu

<a href="http://backup/portal/#popupMenu" data-rel="popup" data-transition="slideup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a">Actions...</a>
<div data-role="popup" id="popupMenu" data-theme="b">
<ul data-role="listview" data-inset="true" style="min-width:210px;">
<li data-role="list-divider">Choose an action</li>
<li><a href="http://backup/portal/#">View details</a></li>
<li><a href="http://backup/portal/#">Edit</a></li>
<li><a href="http://backup/portal/#">Disable</a></li>
<li><a href="http://backup/portal/#">Delete</a></li>
</ul>
</div>

Formulários

<a href="http://backup/portal/#popupLogin" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" data-transition="pop">Sign in</a>
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<form>
<div style="padding:10px 20px;">
<h3>Please sign in</h3>
<label for="un" class="ui-hidden-accessible">Username:</label>
<input name="user" id="un" value="" placeholder="username" data-theme="a" type="text">
<label for="pw" class="ui-hidden-accessible">Password:</label>
<input name="pass" id="pw" value="" placeholder="password" data-theme="a" type="password">
<button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Sign in</button>
</div>
</form>
</div>

Diálogos

<a href="http://backup/portal/#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-b">Delete page...</a>
<div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="a">
<h1>Delete Page?</h1>
</div>
<div role="main" class="ui-content">
<h3 class="ui-title">Are you sure you want to delete this page?</h3>
<p>This action cannot be undone.</p>
<a href="http://backup/portal/#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
<a href="http://backup/portal/#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Delete</a>
</div>
</div>

ToolBar

<div data-role="header">
<a href="http://backup/portal/#" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-delete">Cancel</a>
<h1>My App</h1>
<button class="ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-check">Save</button>
</div>

<div data-role="header">
<div data-role="controlgroup" data-type="horizontal" class="ui-mini ui-btn-left">
<a href="http://backup/portal/#" class="ui-btn ui-btn-icon-right ui-icon-plus">Add</a>
<a href="http://backup/portal/#" class="ui-btn ui-btn-icon-right ui-icon-arrow-u">Up</a>
<a href="http://backup/portal/#" class="ui-btn ui-btn-icon-right ui-icon-arrow-d">Down</a>
</div>
<h6>My header</h6>
</div>

Select

<form>
<div class="ui-field-contain">
<label for="select-native-1">Basic:</label>
<select name="select-native-1" id="select-native-1">
<option value="1">The 1st Option</option>
<option value="2">The 2nd Option</option>
<option value="3">The 3rd Option</option>
<option value="4">The 4th Option</option>
</select>
</div>
</form>

Exemplos

Two Pages

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
<div data-role = "page" id = "page1">
<div data-role = "header">
<h2>Header</h2>
</div>

<div role = "main" class = "ui-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p> For more information <a href = "#page2">click here</a></p>
</div>

<div data-role = "footer">
<h4>Footer</h4>
</div>
</div>

<div data-role = "page" id = "page2">
<div data-role = "header">
<h1>Header Text</h1>
</div>

<div role = "main" class = "ui-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s.</p>

<p><a href = "#page1">Back to previous page</a></p>
</div>

<div data-role = "footer">
<h4>Footer Text</h4>
</div>
</div>
</body>
</html>

Grid 3 Colunas

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
<h2>Three Column Grid Example</h2>
<div class = "ui-grid-b">
<div class = "ui-block-a">
<div class = "ui-bar ui-bar-a">First Block</div>
</div>

<div class = "ui-block-b">
<div class = "ui-bar ui-bar-b">Second Block</div>
</div>

<div class = "ui-block-c">
<div class = "ui-bar ui-bar-a">Third Block</div>
</div>
</div>

<h2>Three Column Grid button Example</h2>
<fieldset class = "ui-grid-b">
<div class = "ui-block-a">
<a class = "ui-btn ui-corner-all ui-shadow ui-btn-b">Button 1</a>
</div>

<div class = "ui-block-b">
<a class = "ui-btn ui-corner-all ui-shadow ui-btn-a">Button 2</a>
</div>

<div class = "ui-block-c">
<a class = "ui-btn ui-corner-all ui-shadow ui-btn-b">Button 3</a>
</div>
</fieldset>
</body>
</html>

Ícones

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
<div data-role = "main" class = "ui-content">
<a href = "#" class = "ui-btn ui-btn-icon-left ui-icon-grid">Grid Button</a>
<button class = "ui-btn ui-btn-icon-left ui-icon-arrow-d-r">arrow-d-r</button>
<button class = "ui-btn ui-btn-icon-left ui-icon-arrow-l">arrow-l</button>
<button class = "ui-btn ui-btn-icon-left ui-icon-arrow-r">arrow-r</button>
<button class = "ui-btn ui-btn-icon-left ui-icon-arrow-u">arrow-u</button>
<button class = "ui-btn ui-btn-icon-left ui-icon-arrow-u-l">arrow-u-l</button>
<button class = "ui-btn ui-btn-icon-left ui-icon-arrow-u-r">arrow-u-r</button>
<button class = "ui-btn ui-btn-icon-left ui-icon-audio">audio</button>
<button class = "ui-btn ui-btn-icon-left ui-icon-calendar">calendar</button>
<button class = "ui-btn ui-btn-icon-left ui-icon-camera">camera</button>
<button class = "ui-btn ui-btn-icon-left ui-icon-carat-l">carat-l</button>
<button class = "ui-btn ui-btn-icon-left ui-icon-carat-r">carat-r</button>
<button class = "ui-btn ui-shadow ui-corner-all ui-btn-icon-left
ui-icon-check">check</button>
<button class = "ui-btn ui-shadow ui-corner-all ui-btn-icon-left
ui-icon-clock">clock</button>
<button class = "ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-eye">
eye</button>
</div>
</body>
</html>

Posicionamento de Ícones

<!DOCTYPE html>
<html>
<head>
<title>Icon Setting</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
<div data-role = "main" class = "ui-content">
<a href = "" class = "ui-btn ui-icon-home ui-btn-icon-left">Left</a>
<a href = "" class = "ui-btn ui-icon-home ui-btn-icon-right">Right</a>
<a href = "" class = "ui-btn ui-icon-home ui-btn-icon-top">Top</a>
<a href = "" class = "ui-btn ui-icon-home ui-btn-icon-bottom">Bottom</a>
</div>
</body>
</html>

Referência

https://www.tutorialspoint.com/jquery_mobile/index.htm

BootStrap - Resumo

2017-07-11T16:32:44-03:00

BootStrap - Resumo

O Bootstrap é um projeto criado pela equipe do Twitter e tendo seu código fonte aberto para a comunidade.
Hoje é o framework front end mais popular atualmente. Usado na web e para mobile.

http://getbootstrap.com/

Download
http://getbootstrap.com/getting-started/#download

Em Pt-br
http://getbootstrap.com.br/

No GitHub
https://github.com/twbs/bootstrap

Suporta todos os navegadores populares: safari, FF, opera, chrome e IE

Responsive -
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://backup/portal/assets/css/bootstrap-responsive.css" rel="stylesheet">
Este exemplo era para a versão 2 do BS. Na versão 3 o bootstrap-responsive.css agora faz parte do bootstrap.css.

Template simples do Bootstrap 3

<!DOCTYPE html>
<html>

<head>
<title>Bootstrap 101 Template</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<!-- Bootstrap -->
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src = "https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src = "js/bootstrap.min.js"></script>
</body>
</html>

Como o bootstrap usa o jquery, então sempre precisamos incluir o jquery antes do bootstrap, como no exemplo acima.

Sistema de Grid
Uma grid é uma grade com linhas e colunas.

Uma grid deve vir contida na classe .container para adequado alinhamento e padding
Uma linha pode ter até 12 colunas e a linha é criada com a classe row, com grupos de colunas e somente colunas nas rows.
Colunas com as classes como .col-xs-4

Media Queries
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Occasionally these are expanded to include a max-width to limit CSS to a narrower set of devices.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Opções de grid
Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto ~62px ~81px ~97px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

Grid Básico
<div class = "container">
<div class = "row">
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
</div>
<div class = "row">...</div>
</div>

<div class = "container">
....
</div>

Exemplo completo

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>
.fundo{
background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;
}
</style>
</head>

<div class = "container">
<h1>Olá Bootstrap Grid!</h1>

<div class="row">
<div class="col-md-1 fundo">.col-md-1</div>
<div class="col-md-1 fundo">.col-md-1</div>
<div class="col-md-1 fundo">.col-md-1</div>
<div class="col-md-1 fundo">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1 fundo">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8 fundo">.col-md-8</div>
<div class="col-md-4 fundo">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4 fundo">.col-md-4</div>
<div class="col-md-4 fundo">.col-md-4</div>
<div class="col-md-4 fundo">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6 fundo">.col-md-6</div>
<div class="col-md-6 fundo">.col-md-6</div>
</div>
</div>
</div>

Offsetting Column
Para deixar um espaço de 4 colunas em branco entre duas colunas colunas use:
.col-md-offset-4

Exemplo:

<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

Tabelas

O Bootstrap trabalha com as seguintes tags:

<table>
<thead>
<tbody>
<tr>
<td>

<table class="table table-stripped">
.table-bordered
.table-hover

Colorindo células ou a tabela inteira:

.active Applies the hover color to a particular row or cell
.success Indicates a successful or positive action
.info Indicates a neutral informative change or action
.warning Indicates a warning that might need attention
.danger Indicates a dangerous or potentially negative action

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>

.table-responsive

<div class="table-responsive">
<table class="table">
...
</table>
</div>

Formulários

<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

Form em linha:

<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>

Validação de forms

<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>

Com íconeso pcionais:

<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

Largura da coluna dos campos

<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>

Botões

<a class="btn btn-default" href="http://backup/portal/#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Tamanho dos botões:

<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

Glyphicons

Lista no site - http://getbootstrap.com/components/#glyphicons

Usando

<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>

Barras de Navegação

<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="http://backup/portal/#">Home</a></li>
<li role="presentation"><a href="http://backup/portal/#">Profile</a></li>
<li role="presentation"><a href="http://backup/portal/#">Messages</a></li>
</ul>

<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="http://backup/portal/#">Home</a></li>
<li role="presentation"><a href="http://backup/portal/#">Profile</a></li>
<li role="presentation"><a href="http://backup/portal/#">Messages</a></li>
</ul>

Link desabilitado
<li role="presentation" class="disabled"><a href="http://backup/portal/#">Disabled link</a></li>

DropDown

<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="http://backup/portal/#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>

Exemplo de Barra de Navegação

<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://backup/portal/#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="http://backup/portal/#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="http://backup/portal/#">Link</a></li>
<li class="dropdown">
<a href="http://backup/portal/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="http://backup/portal/#">Action</a></li>
<li><a href="http://backup/portal/#">Another action</a></li>
<li><a href="http://backup/portal/#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="http://backup/portal/#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="http://backup/portal/#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="http://backup/portal/#">Link</a></li>
<li class="dropdown">
<a href="http://backup/portal/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="http://backup/portal/#">Action</a></li>
<li><a href="http://backup/portal/#">Another action</a></li>
<li><a href="http://backup/portal/#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="http://backup/portal/#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

<nav class="navbar navbar-inverse">

Rótulos/Labels

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Jumbotron

<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="http://backup/portal/#" role="button">Learn more</a></p>
</div>

Cabeçalho de Página

<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>

Alerts

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Obs.: Os alerts são plugins que requerem o plugin alert do JavaScript

<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Links em Alerts

<div class="alert alert-success" role="alert">
<a href="http://backup/portal/#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="http://backup/portal/#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="http://backup/portal/#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="http://backup/portal/#" class="alert-link">...</a>
</div>

Paineis

<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>

<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>

Alinhamento em navbars

<!--Left Align-->
<ul class = "nav navbar-nav navbar-left">
...
</ul>

<!--Right Align-->
<ul class = "nav navbar-nav navbar-right">
...
</ul>

<nav class = "navbar navbar-default navbar-fixed-top" role = "navigation">
...
</nav>

<nav class = "navbar navbar-default navbar-fixed-bottom" role = "navigation">
...
</nav>

Plugins - os plugins do Bootstrap usam o jQuery.
São 12

Para usá-los precisamos incluir os arquivos .js do bootstrap, tanto o bootstrap.js quanto o jquery.js.
Lembre de inserir o jquery antes.
http://getbootstrap.com.br/javascript/

Exemplo - janela modal

<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Título do modal</h4>
</div>
<div class="modal-body">
<p>One fine body&hellip;</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary">Salvar mudanças</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Modal larga e estreita

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
...
</div>
</div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
...
</div>
</div>
</div>

ToolTips
Ao mover o mouse

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

Recursos

Scaffolding Bootstrap 3
https://www.bootply.com/ZSXdC6EajA

Bootstrap 3 snippets
https://www.bootply.com/tagged/bootstrap%203

Coding Groud
http://www.tutorialspoint.com/codingground.htm
https://www.tutorialspoint.com/try_bootstrap_online.php

Texto de teste
http://www.lipsum.com/

Tutoriais
https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-responsive-layout.php
https://www.tutorialspoint.com/bootstrap/index.htm