Table of Contents
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 <small style="color:gray;"> Secondary text</small>
p Tag
Tags that emphasize content
Text alignment style
List
Picture
bootstrap icon
<table class="table"></table>
Copy after login
" >
<table class="table"></table>
Copy after login
状态类
响应式表格
3、bootstrap表单
基本实例
水平排列的表单
单选和多选框
Home Web Front-end HTML Tutorial Summarize the usage examples of bootstrap front-end framework

Summarize the usage examples of bootstrap front-end framework

Jun 24, 2017 pm 02:16 PM
bootstrap use front end Summarize frame

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.

<h2>Bootstrap heading <small>Secondary Text</small></h2>
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.

<br/>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.<br/>

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:

<span class="glyphicon glyphicon-ok"></span>
Copy after login
##2, bootstrap-table

Basic Example

<table class="table"></table>
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 宽度时,水平滚动条消失。

<div class="table-responsive">
      <table class="table">
     ...
      </table>
</div>
Copy after login

3、bootstrap表单

基本实例

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control类的 <input><textarea><select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group中可以获得最好的排列。

<form role="form">告诉辅助设备(如屏幕阅读器)这个元素所扮演的角色是个表单</form><form role="button">告诉设备,这是个按钮,可以点击。本质上是增强语义性,增强组件的可访问性、可用性</form>
Copy after login

不要将表单组合输入框组混合使用,建议将输入框组嵌套到表单组中使用。

<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>
Copy after login

多个控件可以排列在同一行:

<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>
Copy after login

水平排列的表单

通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了。

单选和多选框

多选框(checkbox)用于选择列表中的一个或多个选项,而单选框(radio)用于从多个选项中只选择一个。

设置了disabled属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用的

多选框:

<div class="checkbox">      <label>          <input type="checkbox" value="">
        Option one is this and that—be sure to include why it&#39;s great       </label></div>
<div class="checkbox disabled">      <label><input type="checkbox" value="" disabled>
            Option two is disabled      </label></div>
Copy after login

单选框:

<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>
Copy after login

通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框(checkbox)或单选框(radio)控件上,可以使这些控件排列在一行。

参考博文:bootstrap框架怎么用?

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!

Statement of this Website
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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1655
14
PHP Tutorial
1252
29
C# Tutorial
1226
24
How to use bootstrap in vue How to use bootstrap in vue Apr 07, 2025 pm 11:33 PM

Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.

How to get the bootstrap search bar How to get the bootstrap search bar Apr 07, 2025 pm 03:33 PM

How to use Bootstrap to get the value of the search bar: Determines the ID or name of the search bar. Use JavaScript to get DOM elements. Gets the value of the element. Perform the required actions.

How to do vertical centering of bootstrap How to do vertical centering of bootstrap Apr 07, 2025 pm 03:21 PM

Use Bootstrap to implement vertical centering: flexbox method: Use the d-flex, justify-content-center, and align-items-center classes to place elements in the flexbox container. align-items-center class method: For browsers that do not support flexbox, use the align-items-center class, provided that the parent element has a defined height.

How to write split lines on bootstrap How to write split lines on bootstrap Apr 07, 2025 pm 03:12 PM

There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.

How to insert pictures on bootstrap How to insert pictures on bootstrap Apr 07, 2025 pm 03:30 PM

There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.

How to set up the framework for bootstrap How to set up the framework for bootstrap Apr 07, 2025 pm 03:27 PM

To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.

How to use bootstrap button How to use bootstrap button Apr 07, 2025 pm 03:09 PM

How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text

How to resize bootstrap How to resize bootstrap Apr 07, 2025 pm 03:18 PM

To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-

See all articles