Bootstrap Styleguide
How do I make an bootstrap styleguide?
What is a bootstrap styleguide? How do you make a bootstrap styleguide? This script and codes were developed by Mark Peck on 13 October 2022, Thursday.
Bootstrap Styleguide - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bootstrap Styleguide</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link rel="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css">
<h1 id="headings">Headings</h1>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<hr />
<h1 id="headings-with-text">Headings with Text</h1>
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p>
<h4>Heading 4</h4>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p>
<h5>Heading 5</h5>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p>
<h6>Heading 6</h6>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p>
<hr />
<h1 id="paragraph">Paragraph</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.</p>
<p>Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.</p>
<p><img alt="Placeholder Image and Some Alt Text" src="http://placehold.it/350x150" title="A title element for this placeholder image."></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.</p>
<blockquote> "This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl."
</blockquote>
<h1 id="text-elements"> Text Elements</h1>
<p>The <a href="#">a element</a> example</p>
<p>The <abbr>abbr element</abbr> and an <abbr title="Abbreviation">abbr</abbr> element with title examples</p>
<p>The <acronym title="A Cowboy Ran One New York Marathon">ACRONYM</acronym> element example
<p>The <b>b element</b> example</p>
<p>The <cite>cite element</cite> example</p>
<p>The <code>code element</code> example</p>
<p>The <em>em element</em> example</p>
<p>The <del>del element</del> example</p>
<p>The <dfn>dfn element</dfn> and <dfn title="Title text">dfn element with title</dfn> examples</p>
<p>The <i>i element</i> example</p>
<p>The <ins>ins element</ins> example</p>
<p>The <kbd>kbd element</kbd> example</p>
<p>The <mark>mark element</mark> example</p>
<p>The <q>q element</q> example</p>
<p>The <q>q element <q>inside</q> a q element</q> example</p>
<p>The <s>s element</s> example</p>
<p>The <samp>samp element</samp> example</p>
<p>The <small>small element</small> example</p>
<p>The <span>span element</span> example</p>
<p>The <strong>strong element</strong> example</p>
<p>The <sub>sub element</sub> example</p>
<p>The <sup>sup element</sup> example</p>
<p>The <u>u element</u> example</p>
<p>The <var>var element</var> example</p>
<hr />
<h1 id="monospace">Monospace / Preformatted</h1>
<p>Code block wrapped in "pre" and "code" tags</p>
<pre><code>// Loop through Divs using Javascript.
var divs = document.querySelectorAll('div'), i;
for (i = 0; i < divs.length; ++i) { divs[i].style.color = "green";
}</code></pre>
<p>Monospace Text wrapped in "pre" tags</p>
<pre><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p></pre>
<hr />
<h1 id="list_types">List Types</h1>
<h3>Ordered List</h3>
<ol> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li>
</ol>
<h3>Unordered List</h3>
<ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li>
</ul>
<h3>Definition List</h3>
<dl> <dt>Definition List Term 1</dt> <dd>This is a definition list description.</dd> <dt>Definition List Term 2</dt> <dd>This is a definition list description.</dd> <dt>Definition List Term 3</dt> <dd>This is a definition list description.</dd>
</dl>
<hr />
<h1 id="tables">Tables</h1>
<table cellspacing="0" cellpadding="0"> <tr> <th>Table Header 1</th><th>Table Header 2</th><th>Table Header 3</th> </tr> <tr> <td>Division 1</td><td>Division 2</td><td>Division 3</td> </tr> <tr class="even"> <td>Division 1</td><td>Division 2</td><td>Division 3</td> </tr> <tr> <td>Division 1</td><td>Division 2</td><td>Division 3</td> </tr>
</table>
<hr />
<h1 id="form_elements">Media and Form Elements</h1>
<h2>Media</h2>
<p>The Audio Element:</p>
<audio controls> <source src="https://www.w3schools.com/tags/horse.ogg" type="audio/ogg"> <source src="https://www.w3schools.com/tags/horse.mp3" type="audio/mpeg"> Your browser does not support the audio element.
</audio>
<p>The Video Element:</p>
<video width="320" height="240" controls> <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"> <source src="https://www.w3schools.com/tags/movie.ogg" type="video/ogg"> Your browser does not support the video tag.
</video>
<h2>Form Elements</h2>
<p>The Fieldset:</p>
<fieldset> <legend>Legend</legend> <p>The Form:</p> <form> <p><label for="text_field">Text Field:</label><br /> <input type="text" id="text_field" /></p> <p><label for="text_area">Text Area:</label><br /> <textarea id="text_area"></textarea></p> <p><label for="select_element">Select Element:</label><br /> <select id="select_element"> <optgroup label="Option Group 1"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </optgroup> <optgroup label="Option Group 2"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </optgroup> </select></p> <p>Radio Buttons:<br /> <label><input type="radio" class="radio" name="radio_button" value="radio_1" /> Radio 1</label><br/> <label><input type="radio" class="radio" name="radio_button" value="radio_2" /> Radio 2</label><br/> <label><input type="radio" class="radio" name="radio_button" value="radio_3" /> Radio 3</label><br/> </p> <p>Checkboxes:<br /> <label><input type="checkbox" class="checkbox" name="checkboxes" value="check_1" /> Radio 1</label><br/> <label><input type="checkbox" class="checkbox" name="checkboxes" value="check_2" /> Radio 2</label><br/> <label><input type="checkbox" class="checkbox" name="checkboxes" value="check_3" /> Radio 3</label><br/> </p> <p><label for="password">Password:</label><br /> <input type="password" class="password" id="password" /> </p> <p><label for="file">File Input:</label><br /> <input type="file" class="file" id="file" /> </p> <h3>HTML5-specific Form Elements</h3> <p><label for="email">Email:</label><br /> <input type="email" id="email"> </p> <p><label for="url">URL:</label><br /> <input type="url" id="url"> </p> <p><label for="tel">Telephone:</label><br /> <input type="tel" id="tel"> </p> <p><label for="number">Number:</label><br /> <input type="number" id="number" min="0" max="10" step="1" value="5"> </p> <p><label for="search">Search:</label><br /> <input type="search" id="search"> </p> <p><label for="date">Date:</label><br /> <input type="date" id="date"> </p> <p><label for="time">Time:</label><br /> <input type="time" id="time"> </p> <p><label for="color">Color:</label><br /> <input type="color" id="color"> </p> <p><label for="datalist">Datalist:</label><br /> <input list="browsers" name="browser" type="datalist" id="datalist"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </p> <p><label for="range">Range:</label><br /> <input type="range" id="range" name="points" min="1" max="10"> </p> <p> <input class="button" type="reset" value="Clear" /> <input class="button" type="submit" value="Submit" /> </p> </form>
</fieldset> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Bootstrap Styleguide - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700);
body { font-family: 'Source Sans Pro', sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; color: #222; font-size: 18px;
}
Developer | Mark Peck |
Username | doodlemarks |
Uploaded | October 13, 2022 |
Rating | 3 |
Size | 3,710 Kb |
Views | 18,216 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Colors | 2,707 Kb |
Styling Selects in CSS SUCKSSS | 1,574 Kb |
Hexagons in CSS | 1,861 Kb |
Basic line animation vivus | 1,694 Kb |
Crown Loader Animation | 2,331 Kb |
Subtle Wiggle Animation | 2,072 Kb |
Refract Light Overlay | 2,181 Kb |
3D Styled CSS Browser Mockup | 1,956 Kb |
Simple Accurate Counter | 1,538 Kb |
A Pen by Mark Peck | 2,619 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
A Pen by Gregory Potdevin | GregoryPotdevin | 1,713 Kb |
SlideupBoxes | Gavra | 23,772 Kb |
Ball bouncing loading animation | Adam2326 | 3,144 Kb |
Playing with transition timing | Mattgrosswork | 1,993 Kb |
Speech bubbles | Something | 1,547 Kb |
CSS3 Form | Tusharbandal | 1,836 Kb |
RPG Style Text Dialogue | Odylic | 2,635 Kb |
Twitch | SarahDunlap | 2,937 Kb |
Twitch.tv API | Ryzokuken | 2,618 Kb |
Canvas stripes | Adrianparr | 1,948 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!