1. Bootstrap layout

Global style style.css:

1. Remove the margin statement of the body

2. Set the background color of the body to white

3. Set the basic font, font size and line height for typesetting

4. Set the global link color, and the underline style will be displayed only when the link is in the floating ":hover" state

Title h1-h6

All title tags in HTML,

to

can be used. In addition, .h1 to .h6 class selectors are provided to give title styles to the text of inline attributes.

1. Reset the values of margin-top and margin-bottom

2. The values of h1~h3 after reset are all 20px; the values of h4~h6 after reset are all 10px

3. The line height of all titles is 1.1 (that is, 1.1 times the font-size), and the text color and font inherit the color and font of the parent element

4. Fixed Different levels of title font size, h1=36px, h2=30px, h3=24px, h4=18px, h5=14px and h6=12px

You can also include the tag in the title or give it the .small class element that can be used to mark subtitles.

Bootstrap heading Secondary Text

Copy after login

Bootstrap heading Secondary text

p Tag

(paragraph) element also The bottom margin is set to 10px.

    Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Copy after login

Paragraphs can be highlighted by adding the .lead class.


Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus . Nullam id dolor id nibh ultricies vehicula.

Tags that emphasize content

Generally used with paragraph tags

Emphasis on related classes

text-muted：  提示，使用浅灰色（#999）text-primary：主要，使用蓝色（#428bca）text-success：成功，使用浅绿色(#3c763d)text-info：   通知信息，使用浅蓝色（#31708f）text-warning：警告，使用黄色（#8a6d3b）text-danger： 危险，使用褐色（#a94442）

Copy after login

Text alignment style

text-left：   左对齐
text-center： 居中对齐
text-right：  右对齐
text-justify：两端对齐

Copy after login

List

1, ul, ol < ;span style="color:red;">Desequence：

class=“list-unstyled“

Copy after login

2, ul, ol Horizontal arrangement (Change the vertical list into a horizontal list, remove the bullets (numbers), and keep the horizontal display)

class=“list-inline”

Copy after login

3. dl horizontal list (when the screen is larger than 768px, add the class name ".dl-horizontal" ” has the horizontal definition list effect)

class=“dl-horizontal”

Copy after login

Picture

The method of use is very simple, just add the corresponding class name to the

tag
img-responsive: Responsive images, mainly for responsive design

img-rounded：   圆角图片
img-circle：    圆形图片
img-thumbnail： 缩略图片

Copy after login

Add it yourself and check the corresponding effect~ ~ ~

bootstrap icon

Bootstrap The framework also provides you with nearly 200 different icon images, and these icons are all icon effects achieved using the @font-face attribute of CSS3 in conjunction with fonts.

Any row-level element is acceptable, usually span tags are used as icon containers

Can be viewed on the bootstrap website;span>

Usage is very simple, just copy and paste the English under the icon into the class:

Copy after login

##2, bootstrap-table

Basic Example

Copy after login

Striped table

Using the .table-striped class, you can add a zebra stripe style to each row within .

The striped table is implemented by relying on the :nth-child CSS selector, and this feature is not supported by Internet Explorer 8.

Bordered table

Add the .table-bordered class to add borders to the table and each cell within it.

Mouseover

You can make each row in respond to the mouseover state by adding the .table-hover class.

Condensed table

By adding the .table-condensed class, the table can be made more compact, and the padding in the cells will be halved.

状态类

通过这些状态类可以为行或单元格设置颜色。

Class 描述

.active        鼠标悬停在行或单元格上时所设置的颜色.success    标识成功或积极的动作.info        标识普通的提示信息或动作.warning    标识警告或需要用户注意.danger        标识危险或潜在的带来负面影响的动作

Copy after login

响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

...

Copy after login

3、bootstrap表单

基本实例

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control类的、</code> 和 <code><select></code> 元素都将被默认设置宽度属性为 width: 100%;。将 <code>label</code> 元素和前面提到的控件包裹在 <code>.form-group</code>中可以获得最好的排列。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="hljs xml"><form role="form">告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色是个表单</form><form role="button">告诉设备，这是个按钮，可以点击。本质上是增强语义性，增强组件的可访问性、可用性</form></pre><div class="contentsignin">Copy after login</div></div><p>不要将表单组合输入框组混合使用，建议将输入框组嵌套到表单组中使用。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="hljs stata"><form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form></pre><div class="contentsignin">Copy after login</div></div><p>多个控件可以排列在同一行:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="hljs scala"><form class="form-inline"> <div class="form-group"> <label for="exampleInputName2">Name</label> <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> </div> <div class="form-group"> <label for="exampleInputEmail2">Email</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com"> </div> <button type="submit" class="btn btn-default">Send invitation</button> </form></pre><div class="contentsignin">Copy after login</div></div><h3>水平排列的表单</h3><p>通过为表单添加 <code>.form-horizontal</code> 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 <code>.form-group</code> 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。</p><h3>单选和多选框</h3><p>多选框<code>（checkbox）</code>用于选择列表中的一个或多个选项，而单选框<code>（radio）</code>用于从多个选项中只选择一个。</p><p>设置了<code>disabled</code>属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用的 <label> 标签，如果也希望将悬停于上方的鼠标设置为“禁止点击”的样式，请将 .disabled 类赋予 <code>.radio、.radio-inline、.checkbox、.checkbox-inline 或 <fieldset>。</code></p><p>多选框：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="hljs javascript"><div class="checkbox"> <label> <input type="checkbox" value=""> Option one is this and that—be sure to include why it's great </label></div> <div class="checkbox disabled"> <label><input type="checkbox" value="" disabled> Option two is disabled </label></div></pre><div class="contentsignin">Copy after login</div></div><p>单选框：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="hljs applescript"><div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label> </div> <div class="radio disabled"> <label> <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> Option three is disabled </label> </div></pre><div class="contentsignin">Copy after login</div></div><p>通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。</p><p>参考博文：bootstrap框架怎么用?</p></body></html> <p>The above is the detailed content of Summarize the usage examples of bootstrap front-end framework. For more information, please follow other related articles on the PHP Chinese website!</p> </div> </div> <div style="height: 25px;"> <div class="wzconBq" style="display: inline-flex;"> <span>Related labels：</span> <div class="wzcbqd"> <a onclick="hits_log(2,'www',this);" href-data="/search?word=bootstrap" target="_blank">bootstrap</a> <a onclick="hits_log(2,'www',this);" href-data="/search?word=use" target="_blank">use</a> <a onclick="hits_log(2,'www',this);" href-data="/search?word=frontend" target="_blank">front end</a> <a onclick="hits_log(2,'www',this);" href-data="/search?word=summarize" target="_blank">Summarize</a> <a onclick="hits_log(2,'www',this);" href-data="/search?word=frame" target="_blank">frame</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;">source：php.cn</div> </div> <div class="wzconOtherwz"> <a href="//m.sbmmt.com/faq/368129.html" title="What is the layout of Sticky footer?"> <span>Previous article：What is the layout of Sticky footer?</span> </a> <a href="//m.sbmmt.com/faq/368134.html" title="How can a junior front-end write high-quality code?"> <span>Next article：How can a junior front-end write high-quality code?</span> </a> </div> <div class="wzconShengming">  <div class="bzsmdiv">Statement of this Website</div> <div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div> </div> <div class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div> <div class="wzconZzwz"> <div class="wzconZzwztitle">Latest Articles by Author</div> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/370272.html">Example tutorial on passing parameters using NameValuePair method</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/370950.html">Use dom4j to parse xml document example</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/367928.html">Catalog Service - Analysis of Microsoft microservice architecture example code</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/367910.html">Detailed explanation of getting started with .net Elasticsearch examples</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/367667.html">Detailed introduction to Spring boot adding jsp support configuration examples</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/370887.html">How does JS detect whether the window opened by window.open is closed?</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/361869.html">Share a garbled problem in sqlyog connecting to the database and its solution</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/368866.html">Examples of using variable length parameters in Java</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/371694.html">The latest Amap API WEB development example tutorial</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/373276.html">Advantages and Disadvantages of AJAX</a> </div> <div>1970-01-01 08:00:00</div> </li> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle">Latest Issues</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/173434.html" target="_blank" title="Steps to install jQuery in Nuxt.js" class="wdcdcTitle">Steps to install jQuery in Nuxt.js</a> <a href="//m.sbmmt.com/wenda/173434.html" class="wdcdcCons">Although I try to add jQuery in my project, I get an error saying it's not defined. plugin...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2023-11-06 16:41:50</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>225</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/173295.html" target="_blank" title="Laravel 9 still can't find App.css and App.js, even after running npm run dev" class="wdcdcTitle">Laravel 9 still can't find App.css and App.js, even after running npm run dev</a> <a href="//m.sbmmt.com/wenda/173295.html" class="wdcdcCons">Being fairly new to Laravel, I made sure I did check out the documentation for Laravel9 be...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2023-10-26 23:41:22</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>489</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/173164.html" target="_blank" title="Customize Bootstrap 4's grid system breakpoints" class="wdcdcTitle">Customize Bootstrap 4's grid system breakpoints</a> <a href="//m.sbmmt.com/wenda/173164.html" class="wdcdcCons">I have an application where the design requires 1280 breakpoints from desktop to tablet or...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2023-10-18 23:01:50</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>2</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>197</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/172904.html" target="_blank" title="How to make header images, text and buttons responsive" class="wdcdcTitle">How to make header images, text and buttons responsive</a> <a href="//m.sbmmt.com/wenda/172904.html" class="wdcdcCons">I'm making a website using Bootstrap5. In the header of the website I am using carousel fr...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2023-09-17 09:51:15</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>283</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/172849.html" target="_blank" title="Why doesn't my Bootstrap navigation bar render correctly?" class="wdcdcTitle">Why doesn't my Bootstrap navigation bar render correctly?</a> <a href="//m.sbmmt.com/wenda/172849.html" class="wdcdcCons">I'm trying to make a navigation bar using Bootstrap4 but my code doesn't seem to work. My ...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2023-09-16 16:14:06</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>522</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>Related Topics</div> <a href="//m.sbmmt.com/faq/zt" target="_blank">More> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/faq/pythonqd"><img src="https://img.php.cn/upload/subject/202308/11/2023081110430696606.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Is python front-end or back-end?" /> </a> <a target="_blank" href="//m.sbmmt.com/faq/pythonqd" class="title-a-spanl" title="Is python front-end or back-end?"><span>Is python front-end or back-end?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/faq/qdrhsxjstx"><img src="https://img.php.cn/upload/subject/202310/09/2023100914535090897.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to implement instant messaging on the front end" /> </a> <a target="_blank" href="//m.sbmmt.com/faq/qdrhsxjstx" class="title-a-spanl" title="How to implement instant messaging on the front end"><span>How to implement instant messaging on the front end</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/faq/vscodesydkjjs"><img src="https://img.php.cn/upload/subject/202403/14/2024031416583697170.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Introduction to the framework used by vscode" /> </a> <a target="_blank" href="//m.sbmmt.com/faq/vscodesydkjjs" class="title-a-spanl" title="Introduction to the framework used by vscode"><span>Introduction to the framework used by vscode</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/faq/qdhhddqb"><img src="https://img.php.cn/upload/subject/202403/19/2024031911333543881.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="The difference between front-end and back-end" /> </a> <a target="_blank" href="//m.sbmmt.com/faq/qdhhddqb" class="title-a-spanl" title="The difference between front-end and back-end"><span>The difference between front-end and back-end</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/faq/phphqddgljs"><img src="https://img.php.cn/upload/subject/202403/22/2024032214510812131.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Introduction to the relationship between php and front-end" /> </a> <a target="_blank" href="//m.sbmmt.com/faq/phphqddgljs" class="title-a-spanl" title="Introduction to the relationship between php and front-end"><span>Introduction to the relationship between php and front-end</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/faq/zmqflgdzstz"><img src="https://img.php.cn/upload/subject/202309/18/2023091813593199095.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to distinguish whether two addresses are on the same site?" /> </a> <a target="_blank" href="//m.sbmmt.com/faq/zmqflgdzstz" class="title-a-spanl" title="How to distinguish whether two addresses are on the same site?"><span>How to distinguish whether two addresses are on the same site?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/faq/windowsxkzjjg"><img src="https://img.php.cn/upload/subject/202403/12/2024031217251067333.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="What should I do if my windows license is about to expire?" /> </a> <a target="_blank" href="//m.sbmmt.com/faq/windowsxkzjjg" class="title-a-spanl" title="What should I do if my windows license is about to expire?"><span>What should I do if my windows license is about to expire?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/faq/bqsdjyszxpm"><img src="https://img.php.cn/upload/subject/202402/18/2024021817024266683.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="The latest ranking of the top ten exchanges in the currency circle" /> </a> <a target="_blank" href="//m.sbmmt.com/faq/bqsdjyszxpm" class="title-a-spanl" title="The latest ranking of the top ten exchanges in the currency circle"><span>The latest ranking of the top ten exchanges in the currency circle</span> </a> </li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <div class="wzrOne"> <div class="wzroTitle">Popular Recommendations</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="What does url mean?" href="//m.sbmmt.com/faq/418772.html">What does url mean?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="What does DOM mean?" href="//m.sbmmt.com/faq/414303.html">What does DOM mean?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="What does 404 not found mean?" href="//m.sbmmt.com/faq/413685.html">What does 404 not found mean?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="How to change image size" href="//m.sbmmt.com/faq/414252.html">How to change image size</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="What HTML editors are there? Recommended 4 best HTML editors" href="//m.sbmmt.com/faq/412520.html">What HTML editors are there? Recommended 4 best HTML editors</a> </div> </li> </ul> </div> </div> <div class="wzrThree"> <div class="wzrthree-title"> <div>Popular Tutorials</div> <a target="_blank" href="//m.sbmmt.com/course.html">More> </a> </div> <div class="wzrthreelist swiper2"> <div class="wzrthreeTab swiper-wrapper"> <div class="check tabdiv swiper-slide" data-id="one">Related Tutorials <div></div></div> <div class="tabdiv swiper-slide" data-id="two">Popular Recommendations<div></div></div> <div class="tabdiv swiper-slide" data-id="three">Latest courses<div></div></div> </div> <ul class="one"> <li> <a target="_blank" href="//m.sbmmt.com/course/812.html" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" href="//m.sbmmt.com/course/812.html">The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)</a> <div class="wzrthreerb"> <div>1384352 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/74.html" title="PHP introductory tutorial one: Learn PHP in one week" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="PHP introductory tutorial one: Learn PHP in one week"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP introductory tutorial one: Learn PHP in one week" href="//m.sbmmt.com/course/74.html">PHP introductory tutorial one: Learn PHP in one week</a> <div class="wzrthreerb"> <div>4188944 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="74"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/286.html" title="JAVA Beginner's Video Tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA Beginner's Video Tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA Beginner's Video Tutorial" href="//m.sbmmt.com/course/286.html">JAVA Beginner's Video Tutorial</a> <div class="wzrthreerb"> <div>2264298 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/504.html" title="Little Turtle's zero-based introduction to learning Python video tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle's zero-based introduction to learning Python video tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle's zero-based introduction to learning Python video tutorial" href="//m.sbmmt.com/course/504.html">Little Turtle's zero-based introduction to learning Python video tutorial</a> <div class="wzrthreerb"> <div>486512 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/2.html" title="PHP zero-based introductory tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="PHP zero-based introductory tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP zero-based introductory tutorial" href="//m.sbmmt.com/course/2.html">PHP zero-based introductory tutorial</a> <div class="wzrthreerb"> <div>817234 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="2"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="two" style="display: none;"> <li> <a target="_blank" href="//m.sbmmt.com/course/812.html" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" href="//m.sbmmt.com/course/812.html">The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)</a> <div class="wzrthreerb"> <div >1384352 times of learning</div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/286.html" title="JAVA Beginner's Video Tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA Beginner's Video Tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA Beginner's Video Tutorial" href="//m.sbmmt.com/course/286.html">JAVA Beginner's Video Tutorial</a> <div class="wzrthreerb"> <div >2264298 times of learning</div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/504.html" title="Little Turtle's zero-based introduction to learning Python video tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle's zero-based introduction to learning Python video tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle's zero-based introduction to learning Python video tutorial" href="//m.sbmmt.com/course/504.html">Little Turtle's zero-based introduction to learning Python video tutorial</a> <div class="wzrthreerb"> <div >486512 times of learning</div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/901.html" title="Quick introduction to web front-end development" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Quick introduction to web front-end development"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Quick introduction to web front-end development" href="//m.sbmmt.com/course/901.html">Quick introduction to web front-end development</a> <div class="wzrthreerb"> <div >212652 times of learning</div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/234.html" title="Master PS video tutorials from scratch" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="Master PS video tutorials from scratch"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Master PS video tutorials from scratch" href="//m.sbmmt.com/course/234.html">Master PS video tutorials from scratch</a> <div class="wzrthreerb"> <div >822685 times of learning</div> <div class="courseICollection" data-id="234"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="three" style="display: none;"> <li> <a target="_blank" href="//m.sbmmt.com/course/1648.html" title="[Web front-end] Node.js quick start" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web front-end] Node.js quick start"/> </a> <div class="wzrthree-right"> <a target="_blank" title="[Web front-end] Node.js quick start" href="//m.sbmmt.com/course/1648.html">[Web front-end] Node.js quick start</a> <div class="wzrthreerb"> <div >1519 times of learning</div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/1647.html" title="Complete collection of foreign web development full-stack courses" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="Complete collection of foreign web development full-stack courses"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Complete collection of foreign web development full-stack courses" href="//m.sbmmt.com/course/1647.html">Complete collection of foreign web development full-stack courses</a> <div class="wzrthreerb"> <div >1231 times of learning</div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/1646.html" title="Go language practical GraphQL" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go language practical GraphQL"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Go language practical GraphQL" href="//m.sbmmt.com/course/1646.html">Go language practical GraphQL</a> <div class="wzrthreerb"> <div >1019 times of learning</div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/1645.html" title="550W fan master learns JavaScript from scratch step by step" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W fan master learns JavaScript from scratch step by step"/> </a> <div class="wzrthree-right"> <a target="_blank" title="550W fan master learns JavaScript from scratch step by step" href="//m.sbmmt.com/course/1645.html">550W fan master learns JavaScript from scratch step by step</a> <div class="wzrthreerb"> <div >351 times of learning</div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/1644.html" title="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours" href="//m.sbmmt.com/course/1644.html">Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours</a> <div class="wzrthreerb"> <div >5078 times of learning</div> <div class="courseICollection" data-id="1644"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper2', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrthreeTab>div').click(function(e){ $('.wzrthreeTab>div').removeClass('check') $(this).addClass('check') $('.wzrthreelist>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div>Latest Downloads</div> <a href="//m.sbmmt.com/xiazai">More> </a> </div> <script> $(document).ready(function(){ var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{ speed:1000, autoplay:{ delay:3500, disableOnInteraction: false, }, pagination:{ el:'.sjyx_banSwiperwz .swiper-pagination', clickable :false, }, loop:true }) }) </script> <div class="wzrfourList swiper3"> <div class="wzrfourlTab swiper-wrapper"> <div class="check swiper-slide" data-id="onef">Web Effects <div></div></div> <div class="swiper-slide" data-id="twof">Website Source Code<div></div></div> <div class="swiper-slide" data-id="threef">Website Materials<div></div></div> <div class="swiper-slide" data-id="fourf">Front End Template<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery enterprise message form contact code" href="//m.sbmmt.com/xiazai/js/8071">[form button] jQuery enterprise message form contact code</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 MP3 music box playback effects" href="//m.sbmmt.com/xiazai/js/8070">[Player special effects] HTML5 MP3 music box playback effects</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 cool particle animation navigation menu special effects" href="//m.sbmmt.com/xiazai/js/8069">[Menu navigation] HTML5 cool particle animation navigation menu special effects</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery visual form drag and drop editing code" href="//m.sbmmt.com/xiazai/js/8068">[form button] jQuery visual form drag and drop editing code</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="VUE.JS imitation Kugou music player code" href="//m.sbmmt.com/xiazai/js/8067">[Player special effects] VUE.JS imitation Kugou music player code</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Classic html5 pushing box game" href="//m.sbmmt.com/xiazai/js/8066">[html5 special effects] Classic html5 pushing box game</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery scrolling to add or reduce image effects" href="//m.sbmmt.com/xiazai/js/8065">[Picture special effects] jQuery scrolling to add or reduce image effects</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="CSS3 personal album cover hover zoom effect" href="//m.sbmmt.com/xiazai/js/8064">[Photo album effects] CSS3 personal album cover hover zoom effect</a> </div> </li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8328" title="Home Decor Cleaning and Repair Service Company Website Template" target="_blank">[Front-end template] Home Decor Cleaning and Repair Service Company Website Template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8327" title="Fresh color personal resume guide page template" target="_blank">[Front-end template] Fresh color personal resume guide page template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8326" title="Designer Creative Job Resume Web Template" target="_blank">[Front-end template] Designer Creative Job Resume Web Template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8325" title="Modern engineering construction company website template" target="_blank">[Front-end template] Modern engineering construction company website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8324" title="Responsive HTML5 template for educational service institutions" target="_blank">[Front-end template] Responsive HTML5 template for educational service institutions</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8323" title="Online e-book store mall website template" target="_blank">[Front-end template] Online e-book store mall website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8322" title="IT technology solves Internet company website template" target="_blank">[Front-end template] IT technology solves Internet company website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8321" title="Purple style foreign exchange trading service website template" target="_blank">[Front-end template] Purple style foreign exchange trading service website template</a> </div> </li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3078" target="_blank" title="Cute summer elements vector material (EPS PNG)">[PNG material] Cute summer elements vector material (EPS PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3077" target="_blank" title="Four red 2023 graduation badges vector material (AI EPS PNG)">[PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3076" target="_blank" title="Singing bird and cart filled with flowers design spring banner vector material (AI EPS)">[banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3075" target="_blank" title="Golden graduation cap vector material (EPS PNG)">[PNG material] Golden graduation cap vector material (EPS PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3074" target="_blank" title="Black and white style mountain icon vector material (EPS PNG)">[PNG material] Black and white style mountain icon vector material (EPS PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3073" target="_blank" title="Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses">[PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3072" target="_blank" title="Flat style Arbor Day banner vector material (AI+EPS)">[banner picture] Flat style Arbor Day banner vector material (AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3071" target="_blank" title="Nine comic-style exploding chat bubbles vector material (EPS+PNG)">[PNG material] Nine comic-style exploding chat bubbles vector material (EPS+PNG)</a> </div> </li> </ul> <ul class="fourf" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8328" target="_blank" title="Home Decor Cleaning and Repair Service Company Website Template">[Front-end template] Home Decor Cleaning and Repair Service Company Website Template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8327" target="_blank" title="Fresh color personal resume guide page template">[Front-end template] Fresh color personal resume guide page template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8326" target="_blank" title="Designer Creative Job Resume Web Template">[Front-end template] Designer Creative Job Resume Web Template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8325" target="_blank" title="Modern engineering construction company website template">[Front-end template] Modern engineering construction company website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8324" target="_blank" title="Responsive HTML5 template for educational service institutions">[Front-end template] Responsive HTML5 template for educational service institutions</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8323" target="_blank" title="Online e-book store mall website template">[Front-end template] Online e-book store mall website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8322" target="_blank" title="IT technology solves Internet company website template">[Front-end template] IT technology solves Internet company website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8321" target="_blank" title="Purple style foreign exchange trading service website template">[Front-end template] Purple style foreign exchange trading service website template</a> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper3', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrfourlTab>div').click(function(e){ $('.wzrfourlTab>div').removeClass('check') $(this).addClass('check') $('.wzrfourList>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> </div> </div> <div class="phpFoot"> <div class="phpFootIn"> <div class="phpFootCont"> <div class="phpFootLeft"> <dl> <dt> <a href="//m.sbmmt.com/about/us.html" rel="nofollow" target="_blank" title="About us" class="cBlack">About us</a> <a href="//m.sbmmt.com/about/disclaimer.html" rel="nofollow" target="_blank" title="Disclaimer" class="cBlack">Disclaimer</a> <a href="//m.sbmmt.com/update/article_0_1.html" target="_blank" title="Sitemap" class="cBlack">Sitemap</a> <div class="clear"></div> </dt> <dd class="cont1">php.cn：Public welfare online PHP training，Help PHP learners grow quickly！</dd> </dl> </div> </div> </div> </div> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1719503934"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> </body> </html>

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

Summarize the usage examples of bootstrap front-end framework

1. Bootstrap layout

Title h1-h6

to

can be used. In addition, .h1 to .h6 class selectors are provided to give title styles to the text of inline attributes.

Bootstrap heading Secondary Text

Bootstrap heading Secondary text

p Tag

Tags that emphasize content

Text alignment style

List

Picture

bootstrap icon

Copy after login

状态类

响应式表格

3、bootstrap表单

基本实例