library-mirrors/pure
1
0
Fork 0
mirror of https://github.com/pure-css/pure.git synced 2025-01-13 02:04:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

doc: update bootstrap example to v5

Browse Source
This commit is contained in:
redonkulus 2022-01-27 09:49:24 -08:00
parent b387306830
commit 27e1163cba
1 changed files with 42 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
site/src/pages/extend/index.js
View File

@ -101,7 +101,7 @@ function Extend() {
<SectionHeader heading="Pure + Bootstrap + JavaScript" /> <SectionHeader heading="Pure + Bootstrap + JavaScript" />
<p> <p>
Pure plays well with other libraries, including Bootstrap and jQuery. As a developer, you can pull in Pure as a foundational CSS framework, and then include specific Bootstrap or jQuery modules that your application may require. There are several benefits to doing this: Pure plays well with other libraries, including Bootstrap. As a developer, you can pull in Pure as a foundational CSS framework, and then include specific Bootstrap modules that your application may require. There are several benefits to doing this:
</p> </p>
<ul> <ul>
@ -115,68 +115,57 @@ function Extend() {
You get Pure's minimalist look that's easy to build on top of. No need to overwrite styles! You get Pure's minimalist look that's easy to build on top of. No need to overwrite styles!
</p> </p>
</li> </li>
<li>
<p>
You can take advantage of Bootstrap's ecosystem without pulling in a monolithic Bootstrap CSS file.
</p>
</li>
</ul> </ul>
<p> <p>
For example, here's a Bootstrap Modal. It's created by including the Pure CSS Rollup, and just adding Bootstrap's <a href="/css/bootstrap/modal.css"><code>modal.css</code></a> along with the jQuery plugin. For example, here's a Bootstrap Modal. It's created by including the Pure CSS Rollup, and just adding Bootstrap's <a href="https://getbootstrap.com/docs/5.0/components/modal/">Modal component</a> CSS and JS plugin.
</p> </p>
<CodeBlock> <CodeBlock>
{stripIndent` {stripIndent`
<!-- Button to trigger modal --> <!-- Button to trigger modal -->
<p> <button type="button" class="pure-button-primary pure-button" data-bs-toggle="modal" data-bs-target="#exampleModal">
<a href="#myModal" role="button" class="pure-button-primary pure-button" data-toggle="modal"> Launch Pure + Bootstrap Modal
Launch Pure + Bootstrap Modal </button>
</a>
</p>
<!-- Modal --> <!-- Modal -->
<!-- <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
* Bootstrap v2.3.2 <div class="modal-dialog">
* <div class="modal-content">
* Copyright 2012 Twitter, Inc <div class="modal-header">
* Licensed under the Apache License v2.0 <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
* http://www.apache.org/licenses/LICENSE-2.0 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
* </div>
* Designed and built with all the love in the world @twitter by @mdo and @fat. <div class="modal-body">
--> <p>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> This modal is launched by including <em>just</em> the <code>modal.css</code> and <code>modal.js</code> file from Bootstrap, and including Pure to drive all low-level styles. The result is a fully-functional Modal using just a fraction of the CSS.
<div class="modal-header"> </p>
<h1 id="myModalLabel">A Bootstrap Modal with Pure</h1> <form class="pure-form pure-form-stacked">
</div> <legend>A Stacked Form</legend>
<div class="modal-body"> <label for="email">Email</label>
<p> <input id="email" type="text" placeholder="Email">
This modal is launched by including <em>just</em> the <code>modal.css</code> and <code>modal.js</code> file from Bootstrap, and including Pure to drive all low-level styles. The result is a fully-functional Modal using just a fraction of the CSS. <label for="password">Password</label>
</p> <input id="password" type="password" placeholder="Password">
<form class="pure-form pure-form-stacked"> <label for="state">State</label>
<legend>A Stacked Form</legend> <select id="state">
<label for="email">Email</label> <option>AL</option>
<input id="email" type="text" placeholder="Email"> <option>CA</option>
<label for="password">Password</label> <option>IL</option>
<input id="password" type="password" placeholder="Password"> </select>
<label for="state">State</label> <label class="pure-checkbox">
<select id="state"> <input type="checkbox"> Remember me
<option>AL</option> </label>
<option>CA</option> </form>
<option>IL</option> </div>
</select> <div class="modal-footer">
<label class="pure-checkbox"> <button type="button" class="pure-button" data-bs-dismiss="modal">Close</button>
<input type="checkbox"> Remember me <button type="button" class="pure-button pure-button-primary">Save changes</button>
</label> </div>
</form>
</div>
<div class="modal-footer">
<button class="pure-button" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="pure-button pure-button-primary">Submit</button>
</div> </div>
</div> </div>
<script src="//code.jquery.com/jquery-1.9.1.js"></script> </div>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
`} `}
</CodeBlock> </CodeBlock>
</div> </div>