Ein Buch schreiben/css

Aus Handbuch.io

Inhaltsverzeichnis

Abide<a class="docs-heading-icon" href="#abide"></a>

<a class="docs-code-toggle">Toggle Code</a>

<form data-abide="f2gwou-abide" novalidate>

<label>Number Required <input type="text" placeholder="1234" aria-describedby="exampleHelpText" required="" pattern="number"> Yo, you had better fill this out, it's required. </label>

Here's how you use this input field!

<label>Nothing Required! <input type="text" placeholder="Use me, or don't" aria-describedby="exampleHelpTex" data-abide-ignore=""> </label>

This input is ignored by Abide using data-abide-ignore

<label>Password Required <input type="password" id="password" placeholder="yeti4preZ" aria-describedby="exampleHelpText" required=""> I'm required! </label>

Enter a password please.

<label>Re-enter Password <input type="password" placeholder="yeti4preZ" aria-describedby="exampleHelpText2" required="" pattern="alpha_numeric" data-equalto="password"> Hey, passwords are supposed to match! </label>

This field is using the data-equalto="password" attribute, causing it to match the password field above.

<label>URL Pattern, not required, but throws error if it doesn't match the Regular Expression for a valid URL. <input type="text" placeholder="http://foundation.zurb.com" pattern="url"> </label>


<label>European Cars, Choose One, it can't be the blank option. <select id="select" required=""> <option value=""></option> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </label>


<fieldset class="large-6 columns"> <legend>Choose Your Favorite, and this is required, so you have to pick one.</legend> <input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Red</label> <input type="radio" name="pokemon" value="Blue" id="pokemonBlue" required=""><label for="pokemonBlue">Blue</label> <input type="radio" name="pokemon" value="Yellow" id="pokemonYellow"><label for="pokemonYellow">Yellow</label> </fieldset> <fieldset class="large-6 columns"> <legend>Choose Your Favorite - not required, you can leave this one blank.</legend> <input type="radio" name="pockets" value="Red" id="pocketsRed"><label for="pocketsRed">Red</label> <input type="radio" name="pockets" value="Blue" id="pocketsBlue"><label for="pocketsBlue">Blue</label> <input type="radio" name="pockets" value="Yellow" id="pocketsYellow"><label for="pocketsYellow">Yellow</label> </fieldset> <fieldset class="large-6 columns"> <legend>Check these out</legend> <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label> <input id="checkbox2" type="checkbox" required=""><label for="checkbox2">Checkbox 2</label> <input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label> </fieldset>

<fieldset class="large-6 columns"> <button class="button" type="submit" value="Submit"> Submit </button> </fieldset> <fieldset class="large-6 columns"> <button class="button" type="reset" value="Reset"> Reset </button> </fieldset>

</form>


Accordion<a class="docs-heading-icon" href="#accordion"></a>

<a class="docs-code-toggle">Toggle Code</a>

  • <a href="#panel1d" role="tab" class="accordion-title" id="panel1d-label" aria-controls="panel1d" aria-expanded="true" aria-selected="true">Accordion 1</a>

    Panel 1. Lorem ipsum dolor


  • <a href="#panel1d" role="tab" class="accordion-title" id="panel1d-label" aria-controls="panel1d" aria-expanded="false" aria-selected="false">Accordion 1</a>

    Panel 2. Lorem ipsum dolor


  • <a href="#panel1d" role="tab" class="accordion-title" id="panel1d-label" aria-controls="panel1d" aria-expanded="false" aria-selected="false">Accordion 1</a>

    Panel 3. Lorem ipsum dolor



Accordion Menu<a class="docs-heading-icon" href="#accordion-menu"></a>

<a class="docs-code-toggle">Toggle Code</a>


Badge<a class="docs-heading-icon" href="#badge"></a>

<a class="docs-code-toggle">Toggle Code</a>

2 3 A B


<a class="docs-code-toggle">Toggle Code</a>

<nav aria-label="You are here:" role="navigation">

</nav>


Button<a class="docs-heading-icon" href="#button"></a>

<a class="docs-code-toggle">Toggle Code</a>

<a href="#" class="button">Learn More</a> <a href="#features" class="button">View All Features</a>

<button type="button" class="success button"> Save </button> <button type="button" class="alert button"> Delete </button> <a class="tiny button" href="#">So Tiny</a> <a class="small button" href="#">So Small</a> <a class="large button" href="#">So Large</a> <a class="expanded button" href="#">Such Expand</a>

<a class="button">One</a> <a class="button">Two</a> <a class="button">Three</a>



Callout<a class="docs-heading-icon" href="#callout"></a>

<a class="docs-code-toggle">Toggle Code</a>

This is a callout.

It has an easy to override visual style, and is appropriately subdued.

<a href="#">It's dangerous to go alone, take this.</a>


This is a secondary callout

It has an easy to override visual style, and is appropriately subdued.

<a href="#">It's dangerous to go alone, take this.</a>


This is a success callout

It has an easy to override visual style, and is appropriately subdued.

<a href="#">It's dangerous to go alone, take this.</a>


This is a warning callout

It has an easy to override visual style, and is appropriately subdued.

<a href="#">It's dangerous to go alone, take this.</a>


This is an alert callout

It has an easy to override visual style, and is appropriately subdued.

<a href="#">It's dangerous to go alone, take this.</a>



Close Button<a class="docs-heading-icon" href="#close-button"></a>

<a class="docs-code-toggle">Toggle Code</a>

<button class="close-button" aria-label="Close alert" type="button"> × </button>

This is a static close button example.


Drilldown Menu<a class="docs-heading-icon" href="#drilldown-menu"></a>

<a class="docs-code-toggle">Toggle Code</a>


<a class="docs-code-toggle">Toggle Code</a>


<a class="docs-code-toggle">Toggle Code</a>

<button class="button" type="button" data-toggle="example-dropdown" aria-controls="example-dropdown" data-is-focus="false" data-yeti-box="example-dropdown" aria-haspopup="true" aria-expanded="false"> Toggle Dropdown </button>


Equalizer<a class="docs-heading-icon" href="#equalizer"></a>

<a class="docs-code-toggle">Toggle Code</a>

<img src="assets/img/generic/square-1.jpg">


Pellentesque habitant morbi tristique senectus et netus et, ante.

<img src="assets/img/generic/rectangle-1.jpg">



Flex Grid<a class="docs-heading-icon" href="#flex-grid"></a>

<a class="docs-code-toggle">Toggle Code</a>

6 columns

6 columns

12/6/4 columns

12/6/8 columns


Flex Video<a class="docs-heading-icon" href="#flex-video"></a>

<a class="docs-code-toggle">Toggle Code</a>

<iframe width="420" height="315" src="https://www.youtube.com/embed/V9gkYw35Vws" frameborder="0" allowfullscreen> </iframe>


Float Classes<a class="docs-heading-icon" href="#float-classes"></a>

<a class="docs-code-toggle">Toggle Code</a>

<a class="button float-left">Left</a> <a class="button float-right">Right</a>



Forms<a class="docs-heading-icon" href="#forms"></a>

<a class="docs-code-toggle">Toggle Code</a>

<form> <label>Input Label <input type="text" placeholder=".small-12.columns" aria-describedby="exampleHelpText"> </label>

Here's how you use this input field!

<label> How many puppies? <input type="number" value="100"> </label> <label> What books did you read over summer break? <textarea placeholder="None"> </textarea> </label> <label>Select Menu <select> <option value="husker">Husker</option> <option value="starbuck">Starbuck</option> <option value="hotdog">Hot Dog</option> <option value="apollo">Apollo</option> </select> </label>

<fieldset class="large-6 columns"> <legend>Choose Your Favorite</legend> <input type="radio" name="pokemon" value="Red" id="pokemonRed" required=""><label for="pokemonRed">Red</label> <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Blue</label> <input type="radio" name="pokemon" value="Yellow" id="pokemonYellow"><label for="pokemonYellow">Yellow</label> </fieldset> <fieldset class="large-6 columns"> <legend>Check these out</legend> <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label> <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label> <input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label> </fieldset>

<label for="middle-label" class="text-right middle">Label</label>


<input type="text" id="middle-label" placeholder="Right- and middle-aligned text input">


$ <input class="input-group-field" type="url"> <a class="input-group-button button">Submit</a>


</form>


Grid<a class="docs-heading-icon" href="#grid"></a>

<a class="docs-code-toggle">Toggle Code</a>

2/3/4 columns

4/3/4 columns

6/6/4 columns

12/12/3 columns

12/12/6 columns

12/12/3 columns

6/6/2 columns

6/6/8 columns

12/12/2 columns

3 columns

9 columns

12/8/4 columns

12/4/8 columns


Interchange<a class="docs-heading-icon" href="#interchange"></a>

<a class="docs-code-toggle">Toggle Code</a>

<img data-interchange="[assets/img/interchange/small.jpg, small], [assets/img/interchange/medium.jpg, medium], [assets/img/interchange/large.jpg, large]" src="assets/img/interchange/large.jpg">


Label<a class="docs-heading-icon" href="#label"></a>

<a class="docs-code-toggle">Toggle Code</a>

Secondary Label Success Label Alert Label Warning Label


Magellan<a class="docs-heading-icon" href="#magellan"></a>

<a class="docs-code-toggle">Toggle Code</a>


Media Object<a class="docs-heading-icon" href="#media-object"></a>

<a class="docs-code-toggle">Toggle Code</a>

Dreams feel real while we're in them.

I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.


<a class="docs-code-toggle">Toggle Code</a>


Off-canvas<a class="docs-heading-icon" href="#off-canvas"></a>

<a class="docs-code-toggle">Toggle Code</a>

<a class="docs-code-toggle">Toggle Code</a>

<button type="button" class="button" data-toggle="offCanvasLeft" aria-expanded="false" aria-controls="offCanvasLeft"> Open Menu </button>


Orbit<a class="docs-heading-icon" href="#orbit"></a>

<a class="docs-code-toggle">Toggle Code</a>

    <button class="orbit-previous" aria-label="previous" tabindex="0"> Previous Slide◀ </button> <button class="orbit-next" aria-label="next" tabindex="0"> Next Slide▶ </button>
  • You can also throw some text in here!

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.

    This Orbit slide has chill

<nav class="orbit-bullets"> <button class="is-active" data-slide="0"> First slide details.Current Slide </button> <button data-slide="1" class> Second slide details. </button> <button data-slide="2" class> Third slide details. </button> <button data-slide="3" class> Fourth slide details. </button> </nav>



Pagination<a class="docs-heading-icon" href="#pagination"></a>

<a class="docs-code-toggle">Toggle Code</a>


Progress Bar<a class="docs-heading-icon" href="#progress-bar"></a>

<a class="docs-code-toggle">Toggle Code</a>

25%

50%

75%


Responsive Menu<a class="docs-heading-icon" href="#responsive-menu"></a>

<a class="docs-code-toggle">Toggle Code</a>


Responsive Toggle<a class="docs-heading-icon" href="#responsive-toggle"></a>

<a class="docs-code-toggle">Toggle Code</a>


Reveal<a class="docs-heading-icon" href="#reveal"></a>

<a class="docs-code-toggle">Toggle Code</a>

<a data-open="exampleModal1" aria-controls="exampleModal1" aria-haspopup="true" tabindex="0">Click me for a modal</a>


Slider<a class="docs-heading-icon" href="#slider"></a>

<a class="docs-code-toggle">Toggle Code</a>

<input type="hidden" id="7st9as-slider" max="200" min="0" step="1" value="50">


<input type="hidden" id="14ia00-slider" max="200" min="0" step="1" value="25">


<input type="hidden" id="grpgpq-slider" max="100" min="0" step="1" value="25"> <input type="hidden" value="75" id="0b04kq-slider" max="100" min="0" step="1">



Sticky<a class="docs-heading-icon" href="#sticky"></a>

<a class="docs-code-toggle">Toggle Code</a>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<img class="thumbnail" src="assets/img/generic/rectangle-3.jpg">



Switch<a class="docs-heading-icon" href="#switch"></a>

<a class="docs-code-toggle">Toggle Code</a>

<input class="switch-input" id="tinySwitch" type="checkbox" name="exampleSwitch"> <label class="switch-paddle" for="tinySwitch"> Tiny Sandwiches Enabled </label>


<input class="switch-input" id="smallSwitch" type="checkbox" name="exampleSwitch"> <label class="switch-paddle" for="smallSwitch"> Small Portions Only </label>


<input class="switch-input" id="largeSwitch" type="checkbox" name="exampleSwitch"> <label class="switch-paddle" for="largeSwitch"> Show Large Elephants </label>



Table<a class="docs-heading-icon" href="#table"></a>

<a class="docs-code-toggle">Toggle Code</a>

<thead> </thead> <tbody> </tbody>

Table Header

Table Header

Table Header

Table Header

Content Goes Here

This is longer content Donec id elit non mi porta gravida at eget metus.

Content Goes Here

Content Goes Here

Content Goes Here

This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.

Content Goes Here

Content Goes Here

Content Goes Here

This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.

Content Goes Here

Content Goes Here


Tabs<a class="docs-heading-icon" href="#tabs"></a>

<a class="docs-code-toggle">Toggle Code</a>

one

Check me out! I'm a super cool Tab panel with text content!

two

<img class="thumbnail" src="assets/img/generic/rectangle-7.jpg">


three

Check me out! I'm a super cool Tab panel with text content!

four

<img class="thumbnail" src="assets/img/generic/rectangle-2.jpg">


five

Check me out! I'm a super cool Tab panel with text content!

six

<img class="thumbnail" src="assets/img/generic/rectangle-8.jpg">



Thumbnail<a class="docs-heading-icon" href="#thumbnail"></a>

<a class="docs-code-toggle">Toggle Code</a>

<img class="thumbnail" src="assets/img/thumbnail/01.jpg" alt="Photo of Uranus.">


<img class="thumbnail" src="assets/img/thumbnail/02.jpg" alt="Photo of Neptune.">


<img class="thumbnail" src="assets/img/thumbnail/03.jpg" alt="Photo of Pluto.">



Title Bar<a class="docs-heading-icon" href="#title-bar"></a>

<a class="docs-code-toggle">Toggle Code</a>

<button class="menu-icon" type="button"> </button> Foundation


<button class="menu-icon" type="button"> </button>


Toggler<a class="docs-heading-icon" href="#toggler"></a>

<a class="docs-code-toggle">Toggle Code</a>

<a data-toggle="menuBar" aria-controls="menuBar">Expand!</a>


Tooltip<a class="docs-heading-icon" href="#tooltip"></a>

<a class="docs-code-toggle">Toggle Code</a>

The scarabaeus hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.


Top Bar<a class="docs-heading-icon" href="#top-bar"></a>

<a class="docs-code-toggle">Toggle Code</a>


Visibility Classes<a class="docs-heading-icon" href="#visibility-classes"></a>

<a class="docs-code-toggle">Toggle Code</a>

You are on a small screen or larger.

You are on a medium screen or larger.

You are on a large screen or larger.

You are definitely on a small screen.

You are definitely on a medium screen.

You are definitely on a large screen.

You are not on a medium screen or larger.

You are not on a large screen or larger.

You are definitely not on a small screen.

You are definitely not on a medium screen.

You are definitely not on a large screen.

Can't touch this.

You are in landscape orientation.

You are in portrait orientation.

This text can only be read by a screen reader.

There's a line of text above this one, you just can't see it.

This text can be seen, but won't be read by a screen reader.

<a class="show-on-focus" href="#mainContent">Skip to Content</a>

<header id="header" role="banner"> </header> <main id="mainContent" role="main" tabindex="0"> </main>