O que é

Isto aqui não passa de um esboço de uma ferramenta que estamos construindo.
Ele pretende facilitar a geração do HTML para BS3 e BS4.
Para quem é novo no BootStrap e em outros frameworks reponsivos este link pode ajudar
De qualquer forma, vai aqui umas pequenas dicas:

  1. Todo componente deve ser encaixado em uma célula
  2. Toda célula deve estar encaixada em uma linha
  3. A largura da célula não é fixa (por padrão) mas assumem valores lógicos entre 1 e 12
  4. A somatória das larguras de todas as células em uma linha, não pode ultrapassar de 12
  5. Ultrapassando, esta coluna e as seguintes caem para a seguinte linha mas ainda fica dentro da mesma linha lógica

Como usar

YouTube
  1. Clique na aba editor
  2. Nas ferramentas do lado direito, escolha a largura de cada célula de sua primeira linha (pode usar os botões ou digitar)
  3. Com o mouse, clique sobre "Colunas e linhas" e arraste sobre a superficie de edição à direita. Solte o botão.
  4. Se já tem em mente quantas linhas vai utilizar, repita o processo quantas vezes for necessário.
  5. Escolha o componente que deseja utilizar pelo título do mesmo (No exemplo: "Opções pela esquerda"
  6. Clique em qualquer coisa que quiser modificar (Verá sua seta se transformar em um caret)
  7. Repita tantas vezes como for necessário
  8. Clique no ícone de download
  9. Você pode apenas copiar o código para usar no seu HTML ou baixar o arquivo

Limitações

  1. Não tem undo/redo
  2. Não permite eliminar, mover, modificar os tamanhos
  3. Dependendo do componente tem um bug na hora de criar o nome
  4. Não permite criar um nome personalizado para o componente

Posso hackear e usar?

YeAPF é distribuido sob licença MIT
Este aplicativo está sob a pasta samples
Faça download, modifique use.
Não me deve nada a não ser o crédito

2019-07-19 18:34:19 (-3 DST)
Colunas e linhas
O sistema de 12 colunas por linha exige que a soma do número de colunas dê doze ou menos.
Ou seja, 12, 8+4, 11+1 são alguns valores válidos como nos exemplos a seguir:
Entrada
prefixo
sufixo
Checagens
Opções
Tabela
Coluna 1 Coluna 2 Coluna 3 Coluna 4 Coluna 5
#1
#2
#3
Botões