IFOP › Cheatsheet

Cheatsheet

Actualizado al 27.ago.2024

Typography

Documentation

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a lead paragraph. It stands out from regular paragraphs.

You can use the mark tag to highlight text.

~~This line of text is meant to be treated as deleted text.~~

~~This line of text is meant to be treated as no longer accurate.~~

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

A well-known quote, contained in a blockquote element.
Someone famous in Source Title

This is a list.
It appears completely unstyled.
Structurally, it’s still a list.
However, this style only applies to immediate child elements.
Nested lists:
- are unaffected by this style
- will still show a bullet
- and have appropriate left margin
This may still come in handy in some situations.

This is a list item.
And another one.
But they’re displayed inline.

Images

Documentation

Tables

Documentation

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Class	Heading	Heading
Default	Cell	Cell
Primary	Cell	Cell
Secondary	Cell	Cell
Success	Cell	Cell
Danger	Cell	Cell
Warning	Cell	Cell
Info	Cell	Cell
Light	Cell	Cell
Dark	Cell	Cell

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Figures

Documentation

A caption for the above image.

Forms

@example.com

Your vanity URL

https://example.com/users/

$

.00

With textarea

Floating labels

Documentation

Validation

Documentation

Components

Accordion

Documentation

This is the first item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Alerts

Documentation

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Badge

Documentation

Example heading New

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

Buttons

Documentation

Button group

Documentation

Card

Documentation

Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Go somewhere

Featured

Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Go somewhere

2 days ago

Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

An item
A second item
A third item

Card link
Another link

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Carousel

Documentation

First slide label

Some representative placeholder content for the first slide.

Second slide label

Some representative placeholder content for the second slide.

Third slide label

Some representative placeholder content for the third slide.

Dropdowns

Documentation

List group

Documentation

A disabled item
A second item
A third item
A fourth item
And a fifth one

An item
A second item
A third item
A fourth item
And a fifth one

A simple default list group item

A simple primary list group item
A simple secondary list group item
A simple success list group item
A simple danger list group item
A simple warning list group item
A simple info list group item
A simple light list group item
A simple dark list group item

Navs

Documentation

This is some placeholder content the Home tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Profile tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Contact tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

Pagination

Documentation

Popovers

Documentation

Progress

Documentation

25%

50%

75%

100%

Scrollspy

Documentation

First heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Cheatsheet

Contents

Typography

Images

Tables

Figures

Forms

Overview

Disabled forms

Sizing

Input group

Floating labels

Validation

Components

Accordion

Accordion Item #1

Accordion Item #2

Accordion Item #3

Alerts

Well done!

Badge

Breadcrumb

Buttons

Button group

Card

Card title

Card title

Card title

Card title

Carousel

First slide label

Second slide label

Third slide label

Dropdowns

Dropdown header

Dropdown header

Dropdown header

Dropdown header

Dropdown header

Dropdown header

Dropdown header

List group

Modal

Navs

Navbar

Pagination

Popovers

Progress

Scrollspy

First heading

Second heading

Third heading

Fourth heading

Fifth heading

Spinners

Toasts

Tooltips

Buscador de informes de proyectos

Reporte de Gestión Mensual

Indicadores IFOP

Indicadores

Boletines Técnicos

DATOS.GOB Repositorio de datos

Política de la calidad

Sitios Relacionados

Instituto de Fomento Pequero