Bootstrap教程——快速上手（最给力的前端框架）

最新推荐文章于 2024-03-16 09:55:53 发布
最新推荐文章于 2024-03-16 09:55:53 发布
阅读量4.5k 收藏 58
点赞数 3
分类专栏： 前端 文章标签： 前端框架 bootstrap javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56552986/article/details/131015162
版权

BootStrap教程

Bootstrap思维导图如下
在这里插入图片描述

一、下载与使用

1、进入中文网站，选择版本 v3.4.1

在这里插入图片描述

2、下载完成后

  • 拷贝 dist 文件夹到项目中

  • 由于我们之后可能还会使用 LayUi 等其他插件，所以我们将 dist 改为 Bootstrap，方便辨认

3、将 jQuery.js 放入我们的 js目录下

  • 因为 jQuery.js 并不属于 Bootstrap，所以我们放在 js 目录下

在这里插入图片描述

4、在 html 中模板为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BookStrap的页面模板</title>

    <!--
        viewport表示⽤户是否可以缩放⻚⾯；

        width指定视区的逻辑宽度；
        device-width指示视区宽度应为设备的屏幕宽度；

        initial-scale指令⽤于设置Web⻚⾯的初始缩放⽐例
        initial-scale=1则将显示未经缩放的Web⽂档
    -->
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <!--载入 Bootstrap 的css-->
    <link  rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>


</head>
<body>

    <h1>Hello,world!</h1>
    
    <!-- Bootstrap的所有JS组件都是依赖jQuery的，所以必须放在前边-->
    <script src="js/jquery-3.4.1.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。-->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <!--自己写的js文件放在body最下面-->

</body>
</html>

注意：

  • 如果要使⽤Bootstrap的js插件，必须先调用 jQuery.js

说明：

  • viewport 标记⽤于指定用户是否可以缩放Web页面
  • width 和 height 指令分别指定视区的逻辑宽度和⾼度。他们的值要么是以像素为单位的数字，要么是⼀个特殊的标记符号。
  • width 指令使用 device-width 标记可以指示视区宽度应为设备的屏幕宽度。
  • height 指令使用 device-height 标记指示视区⾼度为设备的屏幕⾼度。
  • initial-scale 指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个Web页面，设为1.0则将显示未经缩放的Web⽂档。
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>01-Bootstrap基本的HTML模板</title>

		<link  rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>

	</head>
	<body>
		<div><h1>Hello,world!</h1></div>
		<script src="js/jquery.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
	</body>
</html>




二、布局容器

1、.container

  • .container 类用于固定宽度并支持响应式布局的容器（网页两侧留白）
<div class="container">
  ...
</div>



2、.container-fluid

  • .container-fluid 类用于 100% 宽度，占据全部视口 (viewport) 的容器（网页两侧不留白）
<div class="container-fluid">
  ...
</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-布局容器</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>

    <!--
        布局容器
            1、.container 类用于固定宽度并支持响应式布局的容器
            <div class="container"> </div>
            2、.container-fluid类 用于100%宽度，占据全部视口（viewport）的容器。
            <div class="container-fluid"> </div>
    -->
    
    <!-- .container 类用于固定宽度并支持响应式布局的容器 -->
    <div class="container" style="background-color: thistle;height: 500px">
        .container 类用于固定宽度并支持响应式布局的容器
    </div>

    <!-- .container-fluid类 用于100%宽度，占据全部视口（viewport）的容器。 -->
    <div class="container-fluid" style="background-color: thistle;height: 500px">
        .container-fluid类 用于100%宽度，占据全部视口（viewport）的容器。
    </div>


</body>
</html>




三、栅格网格系统

  • Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
  • 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
  • Bootstrap框架中的网格系统就是将容器平分成12份。
<div class="container">
    <div class="row">
        <div class="col-md-4">4列</div>
        <div class="col-md-8">8列</div>
    </div>
</div>

注意：

行（row）必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中

具体内容应该放置在列容器 (column) 之内

col-屏幕尺寸-列数，其中屏幕尺寸有

  • xs(xsmall phones) 超小屏(自动)
  • sm(small tablets) 小屏(750px)
  • md(middle desktops) 中屏(970px)
  • lg(larger desktops) 大屏(1170px)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-栅格网格系统</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">

</head>
<body>
    <div style="background-color: deepskyblue;">4</div>
    <div style="background-color: bisque;">8</div>

    <!--
        栅格网格系统: 本来div是块元素，独占一行,  用栅格网格系统自动 设置成 列为 行内元素
            1.列组合
                列总数不能超过12，大于12，则自动换到下一行

            2.列偏移：其他元素随之偏移
                只要在列元素上加 类名"col-md-offset-*" (其中星号代表要偏移的列组合数)，
                那么具有这个类名的列就会向右偏移。

            3.列排序  其他元素不随之偏移，原本的前面被后面覆盖
                列排序其实就是改变列的方向，就是改变左右浮动（向左右移动），并且设置浮动距离
                添加类名 col-md-push-* 和 col-md-pull-* (其中星号代表偏移的列组合数)
				左浮动往前 pull ,右浮动往后 push

            4.列嵌套
                可以在一个列中  添加一个或者多行(row)容器，然后在这个行容器中插入列
    -->


    <!-- 布局容器 -->
    <div class="container">
        <!-- 行元素 -->
        <div class="row">
            <!-- 列元素 col-xs-数值 col-sm-数值 col-md-数值（大多用） col-lg-数值 -->
            <div class="col-md-4 col-lg-4" style="background-color: deepskyblue;">4</div>
            <div class="col-md-8 col-lg-8" style="background-color: bisque;">8</div>
        </div>

        <hr>

        <!-- 列组合 -->
        <div class="row">
            <div class="col-md-1" style="background-color: mediumslateblue;">1</div>
            <div class="col-md-1" style="background-color: bisque;">1</div>
            <div class="col-md-1" style="background-color: darkorange;">1</div>
            <div class="col-md-1" style="background-color: darkgreen;">1</div>
        </div>
        <div class="row">
            <div class="col-md-6" style="background-color: darkorange;">6</div>
            <div class="col-md-6" style="background-color: deepskyblue;">6</div>
        </div>
        <div class="row">
            <div class="col-md-4" style="background-color: mediumslateblue;">4</div>
            <div class="col-md-4" style="background-color: bisque;">4</div>
            <div class="col-md-4" style="background-color: darkorange;">4</div>
        </div>


        <!-- 列的总数不能超过12 -->
        <div class="row">
            <div class="col-md-4" style="background-color: mediumslateblue;">4</div>
            <div class="col-md-4" style="background-color: bisque;">4</div>
            <div class="col-md-5" style="background-color: darkorange;">5</div>
        </div>


        <hr>
        <!--列偏移-->
        <div class="row">
            <div class="col-md-1" style="background-color: mediumslateblue;">1</div>
            <div class="col-md-1 col-md-offset-1" style="background-color: bisque;">1</div>
            <div class="col-md-1" style="background-color: darkorange;">1</div>
            <div class="col-md-1 col-md-offset-4" style="background-color: darkgreen;">1</div>
        </div>


        <hr>
        <!--列排序 -->
        <div class="row">
            <div class="col-md-1" style="background-color: burlywood;">1</div>
            <div class="col-md-1 col-md-push-3" style="background-color: black;">1</div>
            <div class="col-md-1" style="background-color: hotpink;">1</div>
            <div class="col-md-1 col-md-pull-1" style="background-color: pink;">1</div>
        </div>


        <hr>
        <!--列嵌套-->
        <div class="row">
            <div class="col-md-6" style="background-color: chartreuse;">
                <div class="row">
                    <div class="col-md-1" style="background-color: yellow">1</div>
                    <div class="col-md-9" style="background-color: orange">9</div>
                    <div class="col-md-1" style="background-color: powderblue">1</div>
                    <div class="col-md-1" style="background-color: rebeccapurple">1</div>
                </div>
            </div>

            <div class="col-md-6" style="background-color: red;"></div>
        </div>


        <hr>
        <div class="row">
            <div class="col-md-3 col-sm-6" style="background-color: darkkhaki;">3</div>
            <div class="col-md-3 col-sm-6" style="background-color: mediumorchid;">3</div>
            <div class="col-md-3 col-sm-6" style="background-color: peru;">3</div>
            <div class="col-md-3 col-sm-6" style="background-color: pink;">3</div>
        </div>

    </div>

</body>
</html>




四、排版与列表、表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用样式</title>

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>

    <!--
        常用样式
            1.标题
                bootstrap对h1-h6 的标题效果进行覆盖
                提供了对应的类名，为非标题元素设置样式， .h1-.h6
                副标题 small标签 或 .small类名
            2.段落
                通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而对行高和margin也做相应的处理)
                <small>小号字</small>
                <b>加粗</b>或<strong>加粗</strong>
                <i>斜体</i>或<em>斜体</em>

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

            4.对齐效果
				在CSS中常常使用text-align 来实现文本的对齐风格的设置
                    left	左对齐
                    right	右对齐
                    center	居中对齐
                    justify	两端对齐
                bootstrap 通过定义四个类名来控制文本的对齐风格；
                    .text-left: 左对齐
                    .text-center: 居中对齐
                    .text-right: 右对齐
                    .text-justify: 两端对齐
    -->

    <!-- 标题 -->
    <h1>标题1<small>副标题</small></h1>
    <h2>标题2<span class="small">副标题2</span></h2>
    <h3>标题3</h3>
    <div class="h1">你好</div>


    <hr>
    <!-- 段落 -->
    <p>通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而对行高和margin也做相应的处理</p>
    <p class="lead">通过.lead 来突出
        <small>小号字</small>
        <b>加粗</b>或<strong>加粗</strong>
        <i>斜体</i>或<em>斜体</em>
        强调内容(其作用就是增大文本字号，加粗文本，而对行高和margin也做相应的处理</p>


    <hr>
    <!-- 情调 -->
    <div class="text-muted">.text-muted:提示，使用浅灰色(#999)</div>
    <div class="text-primary">.text-primary: 主要，使用蓝色(#428bca)</div>
    <div class="text-success">.text-success: 成功，使用浅绿色(#3c763d)</div>
    <div class="text-info">.text-info: 通知信息，使用浅蓝色(#31708f)</div>
    <div class="text-warning">.text-warning: 警告，使用黄色(#8a6d3b)</div>
    <div class="text-danger">.text-danger: 危险，使用褐色(#a94442)</div>
<div></div>


    <hr>
    <!-- 对齐效果 -->
    <p style="text-align: right;">bootstrap 通过定义四个类名来控制文本的对齐风格；</p>
    <p class="text-left">左对齐-bootstrap 通过定义四个类名来控制文本的对齐风格；</p>
    <p class="text-right">右对齐-bootstrap 通过定义四个类名来控制文本的对齐风格；</p>
    <p class="text-center">居中对齐-bootstrap 通过定义四个类名来控制文本的对齐风格；</p>
    <p class="text-justify">
        hello 居中对齐-bootstrap 通过定义四个类名来控制文本的对齐风格；
        hi 居中对齐-bootstrap 通过定义四个类名来控制文本的对齐风格；
        居中对齐-bootstrap 通过定义四个类名来控制文本的对齐风格；
    </p>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-常用样式</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>

    <!--
          <ul class="list-group">
            <li class="list-group-item active">列表1</li>
            <li class="list-group-item">列表2</li>
            <li class="list-group-item">列表3</li>
            <li class="list-group-item">列表4</li>
            <li class="list-group-item">列表5</li>
          </ul>
        1.列表
			
            无序列表(<ul><li>...</li></ul>)
				.list-unstyled  去点列表
				.list-inline    内联列表
            有序列表(<ol><li>...</li></ol>)
            自定义列表(<dl><dt>...</dt><dd>...</dd></dl>)
				.dl-horizontal  内联列表（水平列表）
					当标题宽度超过 160px 时，将会显示三个省略号。

        2.代码
            (1)使用<code></code>来显示单行内联代码
            (2)使用<pre></pre>来显示多行代码块
                样式：.pre-scrollable (height,max-height高度固定，为340px,超过存在滚动条)
            (3)使用<kbd></kbd>来显示用户输入代码，如快捷键
		
		3.表格
            table样式 
				.table     基本表格 
			附加样式
                .table-bordered 边框             
                .table-striped	隔行变色 斑马线     
                .table-condensed紧凑    单元格没内距或者内距较其他表格的内距小    
                .table-hover	悬停变色

			tr、th、td样式	
				每种类名控制了行的不同背景颜色
				.active		将悬停的颜色应用在行或者单元格上
                .success	表示成功的操作
                .info		表示信息变化的操作
                .warning	表示一个警告的操作
                .danger		表示一个危险的操作
    -->
    <!--无序列表-->
    <ul>
        <li>无序项目列表一</li>
        <li>无序项目列表二</li>
    </ul>
    <!--有序列表-->
    <ol>
        <li>有序项目列表一</li>
        <li>有序项目列表二</li>
    </ol>
    <!--定义列表-->
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>CSS</dt>
        <dd>层叠样式表是一种样式表语言</dd>
    </dl>


    <hr>
    <!--去点列表-->
    <ul class="list-unstyled">
        <li>无序项目列表一</li>
        <li>无序项目列表二</li>
    </ul>
    <!--内联列表:	把垂直列表换成水平列表，
                而且去掉项目符号(编号)，将所有元素放置于同一行。
                也可以说内联列表就是为了制作水平导航而生的。-->
    <ul class="list-inline">
        <li>无序项目列表一</li>
        <li>无序项目列表二</li>
    </ul>
    <!--自定义列表 内联列表-->
    <dl class="dl-horizontal">
        <dt>HTML 超文本标记语言</dt>
        <dd>HTML称为超文本标记语言，是一种标识性语言。</dd>
        
        <dt>测试标题不能超过160px的宽度，否则后面两个点</dt>
        <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd>
    </dl>


    <hr><br>
    <!--(1)使用<code></code>来显示单行内联代码 -->
    <strong>this is simple code</strong>
    <code>this is simple code</code> <br>
    <code>
        this is simple code <br>
        this is simple code
    </code>
    <!-- 快捷键 -->
    <p>使用<kbd>ctrl</kbd> + <kbd>s</kbd>保存内容</p>
    <!-- 多行代码 -->
    <pre>
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("helloworld...")
    }
}
    </pre>
    
    <!--显示html代码需要使用字符字体-->
    <pre>
        &lt;h2&gt;你好&lt;/h2&gt;
    </pre>
    
    <!-- 样式：pre-scrollable (height,max-height高度固定，为340px,超过存在滚动条) -->
    <pre class="pre-scrollable">
        <ol>
            <li>..............</li>
            <li>..............</li>
            <li>..............</li>
            <li>..............</li>
            <li>..............</li>
            <li>..............</li>
            <li>..............</li>
            <li>..............</li>
            <li>..............</li>
            <li>..............</li>
            <li>..............</li>
            <li>..............</li>

        </ol>

    </pre>


    <hr>
    <br>
    <!-- 		表格         边框             隔行变色      紧凑            悬停变色·-->
    <table class="table table-bordered table-striped table-condensed table-hover">
        <tr class="info">
            <th>JavaSE</th>
            <th>数据库</th>
            <th>JavaScript</th>
        </tr>
        <tr class="success">
            <th>面向对象</th>
            <th>oracle</th>
            <th>json</th>
        </tr>
        <tr class="warning">
            <th>数组</th>
            <th>mysql</th>
            <th>ajax</th>
        </tr>
        <tr class="active">
            <th>JavaSE</th>
            <th>数据库</th>
            <th>JavaScript</th>
        </tr>
        <tr class="danger">
            <th>面向对象</th>
            <th>oracle</th>
            <th>json</th>
        </tr>
        <tr>
            <th>数组</th>
            <th>mysql</th>
            <th>ajax</th>
        </tr>
    </table>

   
</body>
</html>




五、表单

1、表单控件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-表单</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>

    <!--
        表单
            1.文本框: 
				input样式:type="text"
                    .form-control 表单元素的样式
                    .input-lg  	表单控件大
                    .input-sm	表单控件小

            2.下拉框 
				select样式
                    .form-control 表单元素的样式
                    multiple="multiple" 设置下拉框多选

            3.文本域 
				textarea样式
                	.form-control 表单元素的样式

            4.复选框 
				input样式：type="checkbox"
                    垂直显示    .checkbox 			作用div
                    水平显示    .checkbox-inline	作用label

            5.单选框 
				input样式：type="radio"
                    垂直显示    .radio        	作用div
                    水平显示    .radio-inline 	作用label

            6.按钮   
				button样式
                1.使用按钮
                    基础样式: .btn
                    附加样式: 		
                            .btn-primary btn-secondary
                            .btn-info 
                            .btn-success 
                            .btn-warning 
                            .btn-danger 
                            .btn-link
					如果不希望按钮文本换行，可以在按钮中添加text-nowrap类
                2.多标签使用
                    其他标签可以通过添加按钮样式设置成按钮效果 （a标签，span标签等）
                3.按钮大小
                    .btn-lg	大按钮   
                    .btn-sm	正常按钮 
                    .btn-xs	小按钮   
                4.按钮禁用
                    1.通过 disabled属性 （真正的禁用元素）
                    2.通过 .disable样式（样式上禁用）
    -->
    <input type="text"/> <br>
    <select>
        <option value="">请选择城市</option>
        <option value="">上海</option>
        <option value="">北京</option>
    </select><br>
    <textarea></textarea><br>
    <input type="checkbox" name="hobby">唱歌
    <input type="checkbox" name="hobby">跳舞
    <input type="radio" name="hobby">男
    <input type="radio" name="hobby">女 <br>
    <button>按钮</button>
    <input type="button" value="按钮">


    <hr><br>
    <!-- 文本框 -->
    <div class="row">
        <div class="col-md-3">
            <input type="text" class="form-control" /> <br>
            <input type="text" class="form-control input-lg" /> <br>
            <input type="text" class="form-control input-sm" /> <br>
        </div>
    </div>


    <hr><br>
    <!-- 下框框 -->
    <div class="row">
        <div class="col-md-3">
            
            <select class="form-control">
                <option value="">请选择城市</option>
                <option value="">上海</option>
                <option value="">北京</option>
            </select><br>
            <!--多选-->
            <select class="form-control" multiple="multiple">
                <option value="">请选择城市</option>
                <option value="">上海</option>
                <option value="">北京</option>
            </select><br>
            
        </div>
    </div>


    <!-- 文本域 -->
    <div class="row">
        <div class="col-md-3">
            <textarea class="form-control">

            </textarea>
        </div>
    </div>


    <!-- 复选框 -->
    <!-- 垂直显示 -->
    <div class="row">
        <div class="col-md-3">
            <div class="checkbox">
                <label><input type="checkbox" name="hobby" />唱歌</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="hobby" />跳舞</label>
            </div>
        </div>
    </div>
    <!-- 水平显示  label行内元素 -->
    <div class="row">
        <div class="col-md-3">
            <label class="checkbox-inline">
                <input type="checkbox" name="hobby" />唱歌
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" name="hobby" />跳舞
            </label>
        </div>
    </div>


    <!--单选框-->
    <!-- 垂直显示 -->
    <div class="row">
        <div class="col-md-3">
            <div class="radio">
                <label><input type="radio" name="sex" />男</label>
            </div>
            <div class="radio">
                <label><input type="radio" name="sex" />女</label>
            </div>
        </div>
    </div>
    <!-- 水平显示 -->
    <div class="row">
        <div class="col-md-3">
            <label class="radio-inline">
                <input type="radio" name="sex" />男
            </label>
            <label class="radio-inline">
                <input type="radio" name="sex" />女
            </label>
        </div>
    </div>


    <!-- 按钮 -->
    <button class="btn">按钮</button>
    <button class="btn btn-danger">按钮</button>
    <button class="btn btn-success">按钮</button>
    <button class="btn btn-warning">按钮</button>
    <button class="btn btn-primary">按钮</button>
    <button class="btn btn-info">按钮</button>
    <button class="btn btn-default">按钮</button>
    <button class="btn btn-link">按钮</button> <br>
    <!-- 通过按钮样式设置其他元素为按钮效果 -->
    <a href="#" class="btn btn-success">a标签</a>
    <span class="btn btn-danger">span标签</span>
    <div class="btn btn-info">div标签</div> <br>
    <!-- 设置按钮的大小 -->
    <button class="btn btn-danger">按钮</button>
    <button class="btn btn-success btn-lg">按钮</button>
    <button class="btn btn-warning btn-sm">按钮</button>
    <button class="btn btn-warning btn-xs">按钮</button> <br/>

    <!-- 按钮禁用 -->
    <!-- 在标签中添加disabled属性 -->
    <button class="btn btn-info" onclick="alert('hello');" disabled="disabled">按钮</button>
    <!-- 在元素标签中添加类名 disabled -->
    <button class="btn btn-info disabled" onclick="alert('hello');" >按钮</button>

</body>
</html>



2、表单布局

基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：

向父元素==== 元素 添加 role=“form”

把标签和控件放在一个带有 class=“form-group” 的==

== 中。这是获取最佳间距所必需的
向所有的文本元素 、 、select 添加 class=“form-control” 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07-表单布局</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">

</head>
<body>

    <!--
        表单布局
            form样式： 
                .form-horizontal  	(垂直表单：竖直)
				.form-inline   		(内联表单)
            div样式:
				.form-group
			表单控件：<input> 、<textarea> 、select样式
				.form-control
                
    -->
    <form action="#" class="form-horizontal" role="form">
        <h2 class="text-center">用户信息表</h2>

        <!-- 表单中的表单元素组 -->
        <div class="form-group">
            <label for="uname" class="control-label col-md-2">姓名</label>
            <div class="col-md-8">
                <input type="text" id="uname" class="form-control" placeholder="请输入用户名">
            </div>
        </div>
        <div class="form-group">
            <label for="upwd" class="control-label col-md-2">密码</label>
            <div class="col-md-8">
                <input type="text" id="upwd" class="form-control" placeholder="请输入密码">
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2">爱好</label>
            <div class="col-md-8 col-md-offset-1">
                <label class="checkbox-inline">
                    <input type="checkbox" name="hobby" />唱歌
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="hobby" />跳舞
                </label>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2">城市</label>
            <div class="col-md-8">
                <select class="form-control">
                    <option value="">请选择城市</option>
                    <option value="">上海</option>
                    <option value="">北京</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label for="remark" class="control-label col-md-2">简介</label>
            <div class="col-md-8">
                <textarea id="remark" class="form-control"></textarea>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-2 col-md-offset-5">
                <button class="btn btn-primary">提交</button>
            </div>
        </div>

    </form>


    <br>
    <form action="#" class="form-inline">
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" class="form-control" placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <label for="userPwd">密码</label>
            <input type="text" id="userPwd" class="form-control" placeholder="请输入密码">
        </div>
        <div class="form-group">
            <button class="btn btn-default">提交</button>
        </div>
    </form>

</body>
</html>




六、缩略图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-缩略图</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
    
    <!--
		1、字体图标
			<span class="字体图标类名"> 字体图标 </span>
		2、缩略图
			.thumbnail 
				这会添加四个像素的内边距（padding）和一个灰色的边框。
				当鼠标悬停在图像上时，会动画显示出图像的轮廓。
			
	-->

    <div class="container">
        <div class="row">
            <!-- 缩略图 -->
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="img/food01.jpg" style="width: 240px;height: 360px;">
                    <h3>周杰伦</h3>
                    <p>出生于北京市，中国内地影视女演员、模特。</p>
                    <button class="btn btn-default">
                        <span class="glyphicon glyphicon-heart"></span> 喜欢
                    </button>
                    <button class="btn btn-info">
                        <span class="glyphicon glyphicon-pencil"></span> 评论
                    </button>
                </div>

            </div>

            <!-- 缩略图 -->
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="img/food02.jpg" style="width: 240px;height: 360px;">
                    <h3>周杰伦</h3>
                    <p>出生于北京市，中国内地影视女演员、模特。</p>
                    <button class="btn btn-default">
                        <span class="glyphicon glyphicon-heart"></span> 喜欢
                    </button>
                    <button class="btn btn-info">
                        <span class="glyphicon glyphicon-pencil"></span> 评论
                    </button>
                </div>

            </div>

            <!-- 缩略图 -->
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="img/food03.jpg" style="width: 240px;height: 360px;">
                    <h3>周杰伦</h3>
                    <p>出生于北京市，中国内地影视女演员、模特。</p>
                    <button class="btn btn-default">
                        <span class="glyphicon glyphicon-heart"></span> 喜欢
                    </button>
                    <button class="btn btn-info">
                        <span class="glyphicon glyphicon-pencil"></span> 评论
                    </button>
                </div>

            </div>

            <!-- 缩略图 -->
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="img/food04.jpg" style="width: 240px;height: 360px;">
                    <h3>周杰伦</h3>
                    <p>出生于北京市，中国内地影视女演员、模特。</p>
                    <button class="btn btn-default">
                        <span class="glyphicon glyphicon-heart"></span> 喜欢
                    </button>
                    <button class="btn btn-info">
                        <span class="glyphicon glyphicon-pencil"></span> 评论
                    </button>
                </div>

            </div>


        </div>

    </div>


</body>
</html>




七、面板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09-面板</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
    
    <!--
		面板组件:用于把 DOM 组件插入到一个盒子中
            .panel 	div样式
            .panel-default
				.panel-heading  div样式
				.panel-body     div样式
    -->
    

    <div class="panel panel-warning">
        <div class="panel-heading">
            <h2 align="center">明星合集</h2>
        </div>
        <div class="panel-body">
            <div class="row">
                <!-- 缩略图 -->
                <div class="col-md-3">
                    <div class="thumbnail">
                        <img src="img/food01.jpg" style="width: 240px;height: 360px;">
                        <h3>周杰伦</h3>
                        <p>出生于北京市，中国内地影视女演员、模特。</p>
                        <button class="btn btn-default">
                            <span class="glyphicon glyphicon-heart"></span> 喜欢
                        </button>
                        <button class="btn btn-info">
                            <span class="glyphicon glyphicon-pencil"></span> 评论
                        </button>
                    </div>

                </div>

                <!-- 缩略图 -->
                <div class="col-md-3">
                    <div class="thumbnail">
                        <img src="img/food02.jpg" style="width: 240px;height: 360px;">
                        <h3>周杰伦</h3>
                        <p>出生于北京市，中国内地影视女演员、模特。</p>
                        <button class="btn btn-default">
                            <span class="glyphicon glyphicon-heart"></span> 喜欢
                        </button>
                        <button class="btn btn-info">
                            <span class="glyphicon glyphicon-pencil"></span> 评论
                        </button>
                    </div>

                </div>

                <!-- 缩略图 -->
                <div class="col-md-3">
                    <div class="thumbnail">
                        <img src="img/food03.jpg" style="width: 240px;height: 360px;">
                        <h3>周杰伦</h3>
                        <p>出生于北京市，中国内地影视女演员、模特。</p>
                        <button class="btn btn-default">
                            <span class="glyphicon glyphicon-heart"></span> 喜欢
                        </button>
                        <button class="btn btn-info">
                            <span class="glyphicon glyphicon-pencil"></span> 评论
                        </button>
                    </div>

                </div>

                <!-- 缩略图 -->
                <div class="col-md-3">
                    <div class="thumbnail">
                        <img src="img/food04.jpg" style="width: 240px;height: 360px;">
                        <h3>周杰伦</h3>
                        <p>出生于北京市，中国内地影视女演员、模特。</p>
                        <button class="btn btn-default">
                            <span class="glyphicon glyphicon-heart"></span> 喜欢
                        </button>
                        <button class="btn btn-info">
                            <span class="glyphicon glyphicon-pencil"></span> 评论
                        </button>
                    </div>

                </div>


            </div>

        </div>

    </div>


</body>
</html>




八、导航与分页导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-导航</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
    <!--
		1.导航：Navigation
			ul样式:
				.nav		基本样式
				.nav-tabs 	标签式的导航菜单
				.nav-pills	胶囊式的导航菜单
				.nav-pills .nav-stacked	垂直的胶囊式导航菜单

              <ul class="nav">
                <li class="nav-item">
                  <a class="nav-link" href="#">首页</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">简介</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">详情</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled" href="#" tabindex="-1" 
                      aria-disabled="true">联系电话</a>
                </li>
              </ul>


			标签式的导航菜单
				给一个无序列表添加 class="nav nav-tabs"
					给任意一个 li 添加 class="active"（表示选中这个导航）
			胶囊式导航菜单
				水平的
				给一个无序列表添加 class="nav nav-pills"
					给任意一个 li 添加 class="active"（表示选中这个导航）
				垂直的
				给一个无序列表添加 class="nav nav-pills" 的同时添加class="nav-stacked"
					给任意一个 li 添加 class="active"（表示选中这个导航）
			两端对齐导航
                让标签式导航两端对齐：给一个无序列表添加 class="nav nav-tabs nav-justified"
                让胶囊式导航两端对齐：给一个无序列表添加 class="nav nav-pills nav-justified"
			
			面包屑导航
				.breadcrumb

			总结：
                .nav nav-tabs	标签页
                .nav nav-pills	胶囊式标签页
                .nav nav-pills nav-stacked	胶囊式标签页以垂直方向堆叠排列的
                .nav-justified	两端对齐的标签页
	
		
		2.分页导航
			默认的分页
				给一个无序列表添加class="pagination"
				给任意一个 li 添加 class="active"（表示选中这一页）
			翻页
				给一个无序列表添加class="pager"

		

	-->
    

    <p>标签式的导航菜单</p>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">home</a></li>
        <li><a href="#">SVN</a></li>
        <li><a href="#">iOS</a></li>
        <li><a href="#">VB.Net</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li>
    </ul>

    <p>基本的胶囊式导航菜单</p>
    <ul class="nav nav-pills">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">SVN</a></li>
        <li><a href="#">iOS</a></li>
        <li><a href="#">VB.Net</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li>
    </ul>

    <p>面包屑式导航菜单</p>
    <ul class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">2013</a></li>
        <li class="active">十一月</a></li>
    </ul>


    <hr>
    <p>分页导航</p>
    <ul class="pagination">
        <li><a href="#">&laquo;</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">&raquo;</a></li>
    </ul>
    <p>翻页导航</p>
    <ul class="pager">
        <li><a href="#">上一页</a></li>
        <li><a href="#">下一页</a></li>

    </ul>


</body>
</html>




九、插件+js

1、下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
    <!-- 引入BootStrap的核心css文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- 引入Jquery核心js文件，需要在bootstrap 的之前引入 -->
    <script src="js/jquery-3.4.1.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

    <!--
		.dropdown div样式
			.dropdown-toggle  data-toggle="dropdown"

			.dropdown-menu   ul样式
				dropdown-header li样式
				
        下拉菜单
            1、使用一个类名为dropdown,或者btn-group的div 包裹整个下拉框：
                <div class="dropdown"></div>
            2、默认向下dropdown,	向上弹起加入.dropup 即可
                                                                        切换
            3.使用button作为父菜单，使用类名：dropdown-toggle 和自定义data-toggle属性
                <button type="button" class="btn btn-default dropdown-toggle" 
															data-toggle="dropdown">
				</button>
            4.在button中, 使用font 制作下拉箭头
                <span class="caret"></span>

            5、下拉菜单项使用一个ul列表，并且定义一个类名为：dropdown-menu
            6、分组分割线：<li>添加类名"divider"来实现添加下拉分割线的功能
            7、分组标题：li 添加类名"dropdown-header" 来实现分组的功能
            8、对齐方式：
                (1) dropdown-menu-left 左对齐 默认方式
                (2) dropdown-menu-right 右对齐
            9、激活状态 (.active) 和 禁用状态 (.disabled)
    -->


    <!--使用一个类名为dropdown,或者btn-group的div 包裹整个下拉框：默认向下dropdown,向上弹起加入，dropup 即可-->
    <div class="dropdown">
        
        <!-- 使用button作为父菜单，使用类名：dropdown-toggle 和自定义data-toggle属性 -->
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            喜欢频道
            <!-- 设置下拉箭头 -->
            <span class="caret"></span>
        </button>

        <!-- 下拉菜单项使用一个ul列表，并且定义一个类名为：dropdown-menu -->
        <ul class="dropdown-menu">
            <!-- 分组标题：li 添加类名"dropdown-header" 来实现分组的功能 -->
            <li class="dropdown-header">--科普--</li>
            <li><a href="#" target="_blank">人与自然</a></li>

            <!-- 分组分割线：<li>添加类名"divider"来实现添加下拉分割线的功能 -->
            <li class="divider"></li>

            <li class="dropdown-header">--搞笑--</li>
            <li><a href="#" target="_blank">快乐大本营</a></li>
            <li class="disabled"><a href="#" target="_blank">欢乐喜剧人</a></li>
            <li><a href="#" target="_blank">生活大爆炸</a></li>

        </ul>

    </div>

</body>
</html>



2、模态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态框</title>
    <!-- 引入BootStrap的核心css文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- 引入Jquery核心js文件，需要在bootstrap 的之前引入 -->
    <script src="js/jquery-3.4.1.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <!--操作模态框
            通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，
            同时设置 data-target="#identifier"
                 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。
            
			通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框：
                    $('#identifier').modal(options)
                        $('#identifier').modal('show')
                        $('#identifier').modal('hide')
    -->
    <!-- 通过 data 属性 -->
    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" >打开模态框</button>
    <button class="btn btn-primary" id="btn">打开模态框</button>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">添加用户</h4>
                </div>
                <div class="modal-body">
                    <form action="#" class="form-horizontal">
                        <div class="form-group">
                            <label for="uname" class="col-md-2 control-label">姓名</label>
                            <div class="col-md-8">
                                <input type="text" id="uname" class="form-control" placeholder="情输入用户名"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="upwd" class="col-md-2 control-label">密码 </label>
                            <div class="col-md-8">
                                <input type="text" id="upwd" class="form-control" placeholder="情输入密码"/>
                            </div>
                        </div>

                    </form>

                </div>
                
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submit_btn">提交更改</button>
                </div>
                
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


    <script type="text/javascript">
        // 绑定按钮的点击事件
        $("#btn").click(function () {
            //手动打开模态框
            $("#myModal").modal("show");
        });

        //关闭模态框
        $("#submit_btn").click(function () {
            //手动关闭模态框
            $("#myModal").modal("hide");
        });


    </script>

</body>
</html>

在这里插入图片描述

gaoming很上心
关注
  • 3
    点赞
  • 踩
  • 58
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
vue中的ajax方法(3种)
w861706592的博客
11-06 1318
第一种: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdeliv
bootstrap前端插件完整版
07-14
bootstrap 前端开发利器 简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
Bootstrap模板（免费的那种，共11套）
03-31
共11套模板，有前台模板，主要是后台模板，很不错的积累资源。
40 个超棒的免费 Bootstrap HTML5 网站模板
$firecat利白的代码足迹$
03-09 1万+
文章来源：http://www.oschina.net/news/59924/free-bootstrap-templates Bootstrap 是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合，它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。 目前 team.oschina.net 团队协作开发平台正在使
Bootstrap Blocks: 快速构建响应式网站的利器
gitblog_00057的博客
03-16 292
Bootstrap Blocks: 快速构建响应式网站的利器 什么是Bootstrap Blocks？ Bootstrap Blocks是一个基于Bootstrap 4框架的一套现成的HTML5模板和组件集合，可以帮助开发者快速创建美观且响应式的网站。它是完全免费、开源的，并且易于定制以满足您的特定需求。 访问项目地址 Bootstrap Blocks能用来做什么？ 有了Bootstrap Blo...
BootStrap的下载及使用方法
热门推荐
qq_42709262的博客
08-29 4万+
关于BootStrap使用很简单，先进入它的官网http://www.bootcss.com/ 我们看上方的版本，这里咱们点开Bootstrap3，主页如图下         点击下载 下载左侧获得相关的css、javascript、font等文件， 这里的话，博主用的是3.3.5版本，下载网址：https://github.com/twbs/bootstrap/rel...
前端开发：30款最好的 Bootstrap 3.0 免费主题和模板
oschina_39816388的博客
10-18 7306
Twitter Bootstrap 框架已经广为人知，用于加快网站，应用程序或主题的界面开发，并被公认为是迄今对于 Web 开发的最有实质性帮助的工具之一。在此之前的，各种各样的界面库伴随着高昂的维护成本。 　　在这篇文章中，我们已经编制了30款最好的 Bootstrap 3.0 免费主题和模板清单，让您可以用在下一个项目中，我们希望你能找到有用的。这些主题包含了所有必要的 HTML 和 CSS...
Bootstrap前端开发框架【使用教程】
DIUDIUjiang的博客
05-06 6845
Bootstrap 来自 Twitter(推特)，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 中文官网：http://www.bootcss.com/ 官网：http://getbootstrap.com/ 推荐使用：http://bootstrap.css88.com/ 框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框..
bootstrap 框架
qq_41988669的博客
02-08 1万+
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。响应式所具有的特点 1、网页的宽度自动调整 2、尽量少用绝对宽度 3、字体要使用 rem、em 做为单位 4、布局要使用浮动、弹性布局 必须使用 HTML5 文档类型 每个页面的开始部分 默认栅格系统 带有基本栅格的 HTML 代码 媒体类型 媒体类型 逻辑运算符 用来做条件判断 页面布局： 引入 css（bootstrap.min.css） + 类名 03-面包屑导航
Bootstrap框架 (黑马程序员)
2301_80068547的博客
11-25 3965
栅格系统英文为 "grid systems"，也有人翻译为 "网格系统"，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口 ( viewport ) 尺寸的增加，系统会自动分为最多 12 列。Bootstrap 里面 container 宽度是固定的，但是不同屏幕下，container的宽度不同，我们再把 container 划分为 12 等份。
Bootstrap框架
https://blog.csdn.net/m0_74834215
12-20 1万+
Bootstrap框架 1.响应式开发 （1）响应式开发原理 响应式开发就是通过媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备划分 尺寸区间 超小屏幕（手机） <= 768xp 小屏设备（平板） 768px ~ 992px 中等屏幕（左面显示器） 992px ~ 1200px 宽屏设备（大桌面显示器） >= 1200px （2）响应式布局容器 响应式需要一个父级容器作为布局容器，来配合子集元素来实现变化效果。 在不同屏幕下，通过媒
bootstrap前端模板.zip
05-24
bootstrap前端模板、bootstrap前端模板、bootstrap前端模板、bootstrap前端模板、
1-4_前端框架BootStrap.pdf
01-19
1-4_前端框架BootStrap.pdf
前端开发框架bootstrap3教程
05-25
Bootstrap3是一个基于HTML、CSS和JavaScript的开源框架，可以帮助开发者快速构建响应式网站和Web应用程序。 《前端开发框架bootstrap3教程》将介绍Bootstrap3的基本概念和使用方法，包括网格系统、表单、导航、按钮、图标等常用组件的使用。通过学习本教程，您将能够掌握Bootstrap3的核心技术，为您的Web开发工作提供便利和效率，如果您想学习如何使用Bootstrap3来构建现代化的网站，本教程将为您提供必要的指导。 Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目. 简要介绍 Bootstrap，以及如何下载、使用，还有基本模版和案例，等等。 Bootstrap.chm是网上流传的，直接从官网翻译过来的，离线看还是不错的。方便大家本地学习。
bootstrap(前端框架)
04-02
一款简洁、直观、强悍的前端开发框架，让web开发更迅速、简单
web前端框架bootstrap
最新发布
05-12
Bootstrap是Twitter推出的一个用于前端开发的开源工具包，开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成
Bootstrap一款超好用的前端框架
10-19
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，用于开发响应式布局、移动设备优先的 WEB 项目。接下来通过本文给大家分享Bootstrap一款超好用的前端框架，感兴趣的朋友一起看看吧
React BootStrap用户体验框架快速上手
08-27
主要介绍了React BootStrap用户体验框架快速上手的相关知识，非常不错，具有参考借鉴价值,需要的朋友可以参考下
BootStrap前端框架
Skf_0004010的博客
11-04 4946
BootStrap 1、Bootstrap介绍 什么是bootstrap? 简单，直观，强悍的前端开发框架，让web开发更迅速，简单。来自Twitter，是目前很受欢迎的前端框架之一。 Bootstrap是基于HTML,CSS,Javascript的 特点 移动端设备优先：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式 响应式设计：采用栅格布局（底层实现原理：媒体查询结合流体布局） 偏UI，综合框架，包含一些常用的UI组件以及一些JS组件 Bootstrap的适用场景？ b
Bootstrap前端框架
05-18
Bootstrap是一种流行的前端框架，由Twitter开发，用于快速创建响应式和移动设备友好的网站和Web应用程序。Bootstrap包含一组CSS样式、HTML元素和JavaScript插件，可用于快速构建网页布局、表单、导航、按钮、图像和其他常见的UI组件。Bootstrap还提供了可自定义的主题和模板，可以轻松地应用于各种项目中。由于其易用性和可扩展性，Bootstrap已成为Web开发领域中最受欢迎的前端框架之一。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

gaoming很上心

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值