Bootstrap’s JavaScript modal is a child form that overlays the parent form. Usually, the purpose is to display a separate piece of content that can have some interaction without leaving the parent form. Subforms can customize content and provide functions such as information display and interaction. 01-A simple, basic modal box sample code <!DOCTYPE html> […]
Tag: bootstrap
How to use bootStrap adaptive
bootStrap responsive development can be used on PC, mobile and tablet terminals 1. Divide each size 2. Give a large layout container, and then modify the arrangement according to the width: the core is to change the size of the container inside by changing the size of the layout container: Generally, we design the layout […]
Knowledge about Bootstrap’s card components
Knowledge about Bootstrap’s card components 01-Card introduction and common occasions Bootstrap’s card component (Card) is a commonly used UI element, or a commonly used structure, used to present information and content. It is usually used in the following situations in web pages and applications: Blog posts and news articles: Cards can be used to display […]
Use Bootstrap’s paging component to achieve paging effects
In the process of web development, if there is too much content, paging is generally used. in Add the pagination class to the element, in Add the page-item class to the element and the page-link class to the hyperlink to implement a simple paging. Directory 00-Basic knowledge 01-A simple paging example 02-Use icons to replace […]
Bootstrap list group related knowledge
Directory 01-Basic knowledge about list groups 02-A simple list group example 03 – Activate or deactivate one or more rows of a list group 04-Set the color of list items 05-Add badges to list items 01-Basic knowledge about list groups Bootstrap’s list-group is a CSS class used to create list components, usually used to display […]
Tree structure table using bootstrap
<div class=”container”> <table id=”table”> </table> </div> bootstrap needs to introduce some js and css Quote at top <html> <head> <meta charset=”utf-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>Login to the system</title> <link rel=”stylesheet” href=”${staticGlobalPath}/bootstrap/css/bootstrap.min.css”/> <link rel=”stylesheet” href=”${staticGlobalPath}/bootstrap-table/bootstrap-table.min.css”/> </head> <body> Files referenced in script <script src=”${staticGlobalPath}/jquery/jquery-1.11.3.min.js”></script> <script src=”${staticGlobalPath}/bootstrap/js/bootstrap.min.js”></script> <script src=”${staticGlobalPath}/bootstrap-table/bootstrap-table.min.js”></script> <script src=”${staticGlobalPath}/plugins/admin/locale/bootstrap-table-zh-CN.min.js”></script> <script src=”${staticGlobalPath}/bootstrap-treegrid.min.js”></script> […]
Knowledge about Bootstrap’s form components
01-The most basic form component usage example The sample code is as follows: <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>Using form components</title> <meta name=”viewport” content=”width=device-width,initial-scale=1, shrink-to-fit=no”> <link rel=”stylesheet” href=”bootstrap-4.5.3-dist/css/bootstrap.css”> <script src=”jquery-3.5.1.slim.js”></script> <script src=”bootstrap-4.5.3-dist/js/bootstrap.min.js”></script> </head> <body class=”container”> <h2 align=”center”>Use form components</h2> <form> <div class=”form-group”> <label for=”formGroup1″>Account name</label> <input type=”text” class=”form-control” id=”formGroup1″ placeholder=”Name”> </div> <div class=”form-group”> <label […]
Bootstrap navigation bar design related knowledge
Blogger’s Note: This blog post and blog post https://blog.csdn.net/wenhao_ir/article/details/133819035 are talking about the same thing. Bootstrap navigation bar design related knowledge Directory 01-Basic knowledge 02-The most basic navigation bar design example 03-Navigation with drop-down menu 04-Add form elements to the navigation bar 05-Fix the position of the navigation bar (such as fixed to the top […]
Bootstrap’s media object component (image and text display component) is a very useful component.
Bootstrap’s .media class is used to create media objects. Media objects are usually used to display a combination of images (pictures) and text content. This layout is very common in displaying news articles, blog posts, etc. . The .media class makes it very simple to create such media objects, which usually contain an image and […]
Knowledge about Bootstrap’s navigation menu component
Blogger’s Note: This blog post and the blog post https://blog.csdn.net/wenhao_ir/article/details/133901596 are talking about the same thing. Directory 01-The most basic navigation example 02-Set the alignment of navigation 02-1-Set the horizontal alignment of navigation 02-2-Set navigation to be laid out in the vertical direction 03-Design tab navigation 04-Tab navigation with drop-down menu 05-Design capsule navigation 05-1-Basic […]