Bootstrap的使用

最新推荐文章于 2024-05-26 13:30:44 发布
最新推荐文章于 2024-05-26 13:30:44 发布
阅读量626 收藏 5
点赞数
分类专栏： JAVA Basics 文章标签： java web bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45337431/article/details/100638049
版权

1.1 Bootstrap概述

Bootstrap简介：
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的。Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

Boostrap特点

  1. 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
    浏览器支持：
  2. 所有的主流浏览器都支持 bootstrap。
    Internet Explorer Firefox Opera Google Chrome Safari
  3. 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 bootstrap。
  4. 响应式设计：bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

1.2 编写响应式页面

对应的模版和框架等，参考Bootstrap，可以直接下载代码，修改；另外还可以看LayUI

	Bootstrap的使用步骤：
	1.下载bootstrap
		http://www.bootcss.com/
	2.导入bootstrap.css文件
	3.导入jquery.js
	4.导入bootstrap.js
		<!--导入css-->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<!-- 导入jquery-->
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
		<!--导入css.js -->
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<!--导入css -->
		<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
	 5.导入兼容支持移动设备标签 
		<meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">


	6.将所有的内容放到布局容器中
		.container 类用于固定宽度并支持响应式布局的容器。
		<div class="container">
			...
		</div>
		.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
		<div class="container-fluid">
			...
		</div>
		测试1: 使用container显示 
		<div class="container">
				  <div style="border: 1px solid red;">111111</div>
		</div>
		测试2: 使用container显示 
		<div class="container-fluid">
				  <div style="border: 1px solid red;">111111</div>
		</div>

1.3 Bootstrap的组成

1.全局css样式
2.组件
3.js插件

Bootstrap入门

<!DOCTYPE html>
<html lang="en">
<head>
    <title>bootstrap入门</title>
    <!--1.三个meta标签引入-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--2.引入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <!--3.引入js，一个是jquery的，一个是bootstrap的-->
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body>
    <div class="container" style="background-color: skyblue; height: 200px">
        <h1>布局容器1</h1>
    </div>
    <div class="container-fluid " style="background-color: pink; height: 200px">
        <h1>布局容器2</h1>
    </div>
</body>
</html>

1.4 栅格系统

1.4.1 什么是栅格系统

栅格系统可以替代【table】制作注册和登录界面

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
注意: Bootstrap将每一行分成12份!
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
（1）“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
（2）通过“行（row）”在水平方向创建一组“列（column）”。
（3）你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

1.4.2 媒体查询功能
	bootstrap通过媒体查询判断是什么上网设备
	（1）超小屏幕（ 手机 <768px 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的）
	
	（2）小屏幕（平板，大于等于 768px） 
		@media (min-width: @screen-sm-min) { ... }
		
	（3）中等屏幕（桌面显示器，大于等于 992px）
		@media (min-width: @screen-md-min) { ... }
		
	（4）大屏幕（大桌面显示器，大于等于 1200px）
		@media (min-width: @screen-lg-min) { ... }    col-lg-2 


	大屏幕 大于1200       col-lg-
	中屏幕 大于992<1200   col-md-
	小屏幕 大于768<922    col-sm-
	最小屏幕 小于768        col-xs-


<!DOCTYPE html>
<html lang="en">
<head>
    <title>bootstrap栅格系统</title>
    <!--1.三个meta标签引入-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--2.引入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <!--3.引入js，一个是jquery的，一个是bootstrap的-->
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/bootstrap.js"></script>

    <style type="text/css">
        #div1 div{
    
            border: 1px solid pink;
        }
        #div2 div{
    
            border: 1px solid skyblue;
        }
    </style>
</head>
<body>
    <div class="container-fluid" style="background-color: beige; height: 300px">
        <!--row：将页面纵向分为12份-->
        <div class="row" id="div1">
            <!--屏幕最大的时候，一份一个-->
            <!--屏幕中等的时候，2份一个-->
            <!--屏幕小的时候，4分一个-->
            <!--屏幕极小的时候，6份一个-->
            <!--也可以不均分-->
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">2</div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">3</div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">4</div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">5</div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">6</div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">7</div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">8</div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">9</div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">10</div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">11</div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">12</div>
        </div>
        <div id="div2" class="row">
            <div class = "col-xs-3">xxx</div>
            <div class = "col-xs-3">yyy</div>
            <div class = "col-xs-3">zzz</div>
            <div class = "col-xs-3">aaa</div>
        </div>
    </div>

</body>
</html>

​

1.5 排版

1.5.1 标题

标题: HTML 中的所有标题标签，

到

均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>bootstrap排版系统</title>
    <!--1.三个meta标签引入-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--2.引入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <!--3.引入js，一个是jquery的，一个是bootstrap的-->
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/bootstrap.js"></script>

</head>
<body>
    <h1>标题</h1>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <h1>对齐</h1>
    <p class="text-center">你好</p>
    <p class="text-right">Java</p>

    <h1>列表</h1>
    <ul>
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
        <li>榴莲</li>
    </ul>

</body>
</html>
1.5.2 mark标签
you can use  the mark  tag to <mark> hight hight</mark>
<br/>
del标签
you can use  the mark  tag to <del> hight hight</>
1.5.3 对齐

通过文本对齐类，可以简单方便的将文字重新对齐。

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
1.5.4 表格

table 表格
table-striped 表格隔行变色
table-hover 悬浮变色

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

<!DOCTYPE html>
<html lang="en">
<head>
    <title>bootstrap表格</title>
    <!--1.三个meta标签引入-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--2.引入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <!--3.引入js，一个是jquery的，一个是bootstrap的-->
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/bootstrap.js"></script>

</head>
<body>
	<!--table-hover 鼠标经过变色-->
    <table class="table table-striped table-bordered table-hover">
    	<!--success/info/warning对应不同的颜色-->
        <tr class="success">
            <td>xxx</td>
            <td>yyy</td>
            <td>zzz</td>
        </tr>
        <tr class="info">
            <td>xxx</td>
            <td>yyy</td>
            <td>zzz</td>
        </tr>
        <tr class="warning">
            <td>xxx</td>
            <td>yyy</td>
            <td>zzz</td>
        </tr>
    </table>
</body>
</html>

1.6 表单

​ 元素都将被默认设置宽度属性为 width: 100%;将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

2.6.1 基本实例

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select>

-把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
-向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
form-group 会将label和input上下排列 
form-control 会自动将input填充满屏幕 并添加点击高亮效果
<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>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>bootstrap表单</title>
    <!--1.三个meta标签引入-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--2.引入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <!--3.引入js，一个是jquery的，一个是bootstrap的-->
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/bootstrap.js"></script>

</head>
<body>
    <h1>表单</h1>
    <!--form-inline表示一行显示-->
    <form action="" method="post" class="form-inline">
        <div>
            <!--for的属性，可以保证点击【用户名】文字的时候也能选中输入-->
            <label for="username">用户名：</label>
            <div>
                &
最低0.47元/天 解锁文章
松鼠MaSaKi
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap step步骤
08-21
常用step步骤，使用bootstrap及jQuery编码
bootstrap使用
01-08
bootstrap的官网:https://www.bootcss.com/ 点击头部导航 Bootstrap4中文文档：https://v4.bootcss.com/ ...express 项目部署。 解压 bootstrap 到 public (文件夹改名为bootstrap,方便引入) ...使用 按钮 b
使用bootstrap框架实现简单登录页面
qq_49688914的博客
07-20 9306
登录注册
Bootstrap的登陆页面
最新发布
m0_46319477的博客
05-26 707
【代码】Bootstrap的登陆页面。
[前端]基于Bootstrap搭建登录页面，保姆级讲解，面面俱到~~~
qq_41604569的博客
04-05 2万+
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。在前端页面设计占有一定份额，今天手把手带你整除登录界面，最后的结果图如下： 页面要求 主要： 用户名 密码 同意单选框 登录按钮 修饰： 边框 阴影 开撸 1.新建一个login_demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>LoginDe
采用bootstrap框架实现登录页面
qq_34884166的博客
12-20 1785
源码下载：微信小程序搜 “涨知识1024” ，搜索关键字“登录页”
【登录页面的美化】bootstrap的使用
m0_73575951的博客
07-19 837
对bootstrap需要在官网下载应用包，放入我们所写的项目中，然后再导入包，再官网的使用方法中可以找到很多的前端制作模板。
bootstrap使用API
09-11
此工具可以帮助对bootstrap的初学者，其中包括一些下拉，按钮、菜单、图标、样式等的代码快，帮助开发者实现快速进行代码生成。 此工具可以帮助对bootstrap的初学者，其中包括一些下拉，按钮、菜单、图标、样式等的...
Bootstrap使用基础教程详解
09-01
Bootstrap是一个广泛使用的前端开发框架，源自Twitter，它极大地提升了开发者构建网页的速度和效率。这个框架包含了一套完整的CSS样式库、预定义的样式表、基于jQuery的JavaScript插件，以及一个灵活的响应式网格...
Bootstrap使用手册(操作手册)
10-28
亲自将网页截取下来，整理出一份PDF文档提供大家方便，其中已设置书签快速浏览。内部使用代码后续上传。
【Bootstrap】使用Bootstrap制作简单的登陆页面
Alan的博客
03-23 9747
效果图: 代码: <div class="container"> <div class="col-md-4"></div> <div class="col-md-4" style="background-color:#eee;;margin-top:200px;"> <center> ...
bootstrap-3.3.1
05-31
bootstrap3.3.1安装包,bootstrap3.3.1安装包,bootstrap3.3.1安装包
用vue和bootstrap实现用户登录页面
2201_75321887的博客
04-12 923
用vue和bootstrap实现用户登录页面
BootStrap工具使用
wangshiqi666的博客
11-02 1650
html中boorstrap使用
统计学中的Bootstrap方法介绍及其应用
热门推荐
芳樽里的歌的博客
01-25 7万+
简要介绍了统计学中的Bootstrap方法及其在时间序列相关检验中的应用。
前端框架---Bootstrap的使用
m0_74249162的博客
04-30 1026
Bootstrap是一个来自Twitter的前端开发框架，它基于HTML、CSS和JavaScript，以其简洁灵活的特性使得Web开发更加快捷。基本结构网格系统：Bootstrap使用12列网格布局，可以快速构建响应式布局。通过添加class到HTML元素上，可以指定元素在不同屏幕宽度下的列数和偏移量。CSS样式：Bootstrap包含了大量的预设CSS样式，如排版、颜色、按钮、表单等，可以快速地为网页添加统一的样式。JavaScript插件。
bootstrap元素宽度_BootStrap从基础到项目实战_第1季_03章_01_CSS样式之栅格布局
weixin_39961943的博客
11-16 93
目标目标一、理解什么是栅格布局目标二、掌握栅格布局具体应用目标三、掌握BootStrap通用CSS样式(排版、代码、代码、表单、按钮、图片、辅助类、响应式工具)内容一、BootStrap全局CSS之 - 栅格布局1.1、概述深入了解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。1.1.1 HTML5 文档类型Bootstrap 使用到的某些 H...
适合初学者的BootStrap笔记，全网最全
qq_42176665的博客
11-02 822
最全面的BootStrap的知识点，适合新手和小白

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值