bootstrap基础

最新推荐文章于 2023-10-21 22:20:46 发布
最新推荐文章于 2023-10-21 22:20:46 发布
阅读量253 收藏
点赞数
分类专栏： 前端 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ting1king/article/details/106891578
版权

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

栅格参数：

在这里插入图片描述

水平排列

在这里插入图片描述

<div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
</div>

布局：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<link rel="stylesheet" href="css/bootstrap.css">
	</head>
	<style type="text/css">
		div {
			border: 1px red solid;
		}
	</style>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-md-3" style="height: 200px;"></div>
				<div class="col-md-3 col-md-offset-6" style="height: 200px;"></div>
			</div>
			<div class="row">
				<div class="col-md-6" style="height: 500px;">
					<div class="row">
						<div class="col-md-12" style="height: 250px;"></div>
					</div>
					<div class="row">
						<div class="col-md-4" style="height: 250px;"></div>
						<div class="col-md-4" style="height: 250px;"></div>
						<div class="col-md-4" style="height: 250px;"></div>
					</div>
				</div>
				<div class="col-md-6" style="height: 500px;">
					<div class="row" style="height: 100px;">
						
					</div>
					<div class="row" style="height: 100px;">
						
					</div>
					<div class="row" style="height: 100px;">
						
					</div>
					<div class="row" style="height: 100px;">
						
					</div>
					<div class="row" style="height: 100px;">
						
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

表格

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="css/bootstrap.css">
    </head>
    <body>
        <table class="table table-striped table-bordered table-hover table-condensed">
            <tr>
                <th>姓名</th>
                <th>电话</th>
                <th>Email</th>
                <th>QQ</th>
                <th>操作</th>
            </tr>
            <tr class="info">
                <td>张三</td>
                <td>1388888888</td>
                <td>jike_li@126.com</td>
                <td>1233333</td>
                <td>
                    <a href="" class="update">修改</a>|
                    <a href="" class="del">删除</a>
                </td>
            </tr>
            <tr>
                <td>张三</td>
                <td>1388888888</td>
                <td>jike_li@126.com</td>
                <td>1233333</td>
                <td>
                    <a href="" class="update">修改</a>|
                    <a href="" class="del">删除</a>
                </td>
            </tr>
        </table>
    </body>

</html>

按钮

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="css/bootstrap.css">
    </head>

    <body>
        <a class="btn btn-default" href="#" role="button">Link</a>
        <button class="btn btn-default" type="submit">Button</button>
        <input class="btn btn-default" type="button" value="Input">
        <input class="btn btn-default" type="submit" value="Submit">
        <hr>


        <button type="button" class="btn btn-default">（默认样式）Default</button>
        <button type="button" class="btn btn-primary">（首选项）Primary</button>
        <button type="button" class="btn btn-success">（成功）Success</button>
        <button type="button" class="btn btn-info">（一般信息）Info</button>
        <button type="button" class="btn btn-warning">（警告）Warning</button>
        <button type="button" class="btn btn-danger">（危险）Danger</button>
        <button type="button" class="btn btn-link">（链接）Link</button>

        <hr>

        <p>
            <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
            <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
        </p>
        <p>
            <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
            <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
        </p>
        <p>
            <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
            <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
        </p>
        <p>
            <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
            <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
        </p>

        <hr>
        <button type="button" class="btn btn-primary btn-lg active">Primary button</button>
        <button type="button" class="btn btn-default btn-lg active">Button</button>

        <hr>
        <a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
        <a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

        <hr>
        <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
        <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

        <hr>
        <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
        <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

        <pre>
            public static void main(String args){
                System.out.println('Hello World');
            }
        </pre>
    </body>

</html>

在这里插入图片描述

java后端指南
关注
专栏目录
bootstrap java 后台框架
zhangmingmi1的博客
08-09 1126
三大数据库 mysql  oracle  sqlsever   更专业、更强悍、适合不同用户群体 【新录针对本系统的视频教程，手把手教开发一个模块，快速掌握本系统】 A 集成代码生成器 [正反双向(单表、主表、明细表、树形表，开发利器)+快速构建表单; freemaker模版技术 ，0个代码不用写，生成完整的一个模块，带页面、建表sql脚本，处理类，service等完整模块 B 集
bootstrap java_Bootstrap和Java分页实例第一篇
weixin_28886649的博客
02-12 218
关于此文bootstrap是前端很流行的框架，正在开发的项目，用bootstrap搭建起来的页面，自我感觉很完美，终于告别了苍白无力的白花花的难看的……的页面了。哈哈。现在遇到了bootstrap的分页与Java后台结合起来的分页封装问题，对于我这个Java菜鸟来说，包装分页还没玩过。故此，在网上找了这个。觉得很不错，所以决定记录到博客里面。还没有实践，决定写完博客去实践。在上图。祝我成功吧！此人...
bootstrap响应开发原理与栅格系统
ZS74520的博客
10-31 330
Bootstrap相关知识 1.响应式开发的原理 前端的响应式开发原理利用到了媒体查询，通常情况下，大多数开发适用于以下四个适配： 超小屏幕 小于768px 布局容器宽度为100% @media screen and （max-width:767px）{ .container{ width:100%; } } 小屏幕 大于768px 布局宽度为750px @media screen and (min-width:768px){ .container{ width:750px; }
Bootstrap01
qq_64200256的博客
03-31 627
目录 Bootstrap 适用于 优势 安装环境 Bootstrap ①.诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架 ②.是一个用于快速开发Web应用程序和网站的前端框架 ③.Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷 概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架 适用于 企业网站、博客、网站后台之类的网站 优势 ①.响应式设计（Bootstr
JAVA bootstrap
simplezhao的博客
07-29 1402
简介 Bootstrap，基于HTML、cSS、JAVASCRIPT的前端框架。 该框架已经预定义了一套CSS样式和与样式对应的JS代码。(对应的样式有对应的特效）。 开发人员只需要编写HTML结构,添加 bootstrap固定的class样式,就可以轻松完成指房效果的实现。 作用: Bootstrap使得Web开发更加快捷，高效。 BootStrap,支持响应式开发，解决了移动互联网前端开发问题 响应式布局 响应式布局:一个网站的展示能够兼容多个终端(手机、iPad、PC等)，而不需要为每个终端单独
bootstrap基础教程对应源码
05-28
《bootstrap基础教程》对应源码，内容包括 13个章节对应的源码
Bootstrap基础教程
06-19
Bootstrap基础教程.pdf Bootstrap简易教程Bootstrap基础教程.pdf Bootstrap简易教程
BOOTSTRAP基础
01-26
Bootstrap的学习和使用首先需要了解它的一些基础知识和组成部分： 1. 文档结构：Bootstrap的文档结构通常包括一个标准的HTML5文档结构，其中包含了对字符编码、浏览器兼容性以及其他元数据的声明。例如，文档开始的...
bootstrap基础知识学习笔记
09-01
Bootstrap 基础知识学习笔记主要涵盖了以下几个核心概念： 1. **引入 Bootstrap**：在 HTML 文件中，你需要引入 Bootstrap 的 CSS 和 JavaScript 文件。这通常包括 jQuery（因为 Bootstrap 的某些组件依赖于它）。...
AmaAdmin基于bootstrap的java后台系统
04-14
这个是基于bootstrap的java后台管理系统，比较全面的展示了后台管理系统所需的内容。
基于Bootstrap的Java企业开发平台框架实例
11-29
基于Bootstrap的Java企业开发平台框架实例
JavaWeb Bootstrap
buxiangdongTT的博客
07-13 109
1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 2. 响应式布局。 * 同一套页面可...
java Web 之Bootstrap
weixin_45519487的博客
05-27 148
1.概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap是基于 HTML、CSS、JavaScript 它简洁灵活，使得 Web 开发更加快捷。 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 Bootstrap的好处： 1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 ...
Java学习之Bootstrap
白狼有梦的博客
11-11 1023
Java学习之Bootstrap 前端时间刚看完前端的基础，本以为我可以用HTML和CSS再附上JavaScript就可以走天下了，谁知, Bootstrap给我打开了新世界的大门，那么我们接下来看看Bootstrap到底有那些神奇的地方。 Bootstrap是什么？ 一个前端开发框架，Bootstrap,来自Twitter,是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript的，它简单灵活，使得Web开发更加快捷。
【java初学】BootStrap
九离的博客
04-06 225
今日内容 1. Bootstrap Bootstrap： 1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 2. 响应式布局。 * 同一套
java：BootStrap(Web前端CSS框架)学习
Yuncoco的博客
06-01 638
一.BootStrap:html,css与js的框架 功能：响应式(兼容各种设置)，移动设备优先。内置了很多漂亮的样式 二.BootStrap入门 2.1 使用BootStrap需要引入三个文件 min:压缩版/没有min:开发版(源码) bootstrap.min.css/bootstrap.css -> bootstrap的所有样式 jquery.min.js/jquery.js -&...
JAVA12_28学习总结(Bootstrap!)
weixin_53118395的博客
01-05 817
12_28学习Bootstrap!
【Java 进阶篇】深入了解 Bootstrap 组件
最新发布
繁依Fanyi的博客
10-21 1310
Bootstrap 组件是预定义的网页元素，它们具有各种不同的功能，从呈现内容到用户交互，都有所涵盖。这些组件具有一致的外观和感觉，使网页设计变得更加统一和专业。模态框的内容可以根据需要进行自定义。您可以在模态框的主体部分添加任何自定义内容，包括文本、表单、图像或其他元素。
Bootstrap基础入门：快速掌握12列布局与响应式设计
Bootstrap基础是Twitter工程师们为内部产品开发而创建的一套开源前端工具集，由Mark Otto和Jacob Thornton合作开发于2011年。这款工具因其易用性、优雅设计和高度灵活性而广受欢迎，迅速在GitHub上积累了大量的关注...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

java后端指南

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

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

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

打赏作者

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

抵扣说明：

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

余额充值