Bootstrap简单学习

小王不叫小王叭

已于 2022-03-12 09:49:41 修改

阅读量890

点赞数

分类专栏： JavaWeb学习笔记文章标签： bootstrap 学习 css

于 2022-03-11 13:16:52 首次发布

本文链接：https://blog.csdn.net/weixin_45573296/article/details/123422363

版权

JavaWeb学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、Bootstrap简介

1.1、概念：一个前端开发的框架

框架：一个半成品软件，开发人员可以在框架基础上，在进行开发，简化代码。
好处：
1、定义了很多css样式和js插件。我们开发人员直接可以使用这些样式和插得到丰富的页面效果。
2、响应式布局：同一套页面可以兼容不同分辨率的设备。

1.2、快速入门
1、下载Bootstrap
2、在项目中将这三个文件夹复制
3、创建html页面，引入必要的资源文件
使用模板

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>小王开始学web</title>

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

   
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

二、响应式布局

同一套页面可以兼容不同分辨率的设备。
–实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子。
–步骤：
1、定义容器。相当于之前的table
容器分类：container：固定宽度，两边有留白
container-fluid：每一种设备都是100%宽度
2、定义行：相当于之前的tr 样式:row
3、定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
设备代号：
xs：超小屏幕手机 (<768px)
sm：小屏幕平板 (≥768px)
md：中等屏幕桌面显示器 (≥992px)
lg：大屏幕大桌面显示器 (≥1200px)
4、注意：
一行中如果格子数目超过12，则超出部分则自动换行
栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备
如果真实设备宽度小于设置栅格类属性的设备代码的最小值，会一个元素占满一整行。

三、CSS样式和JS插件

1、全局CSS样式：
–按钮：class=“btn-default";
–图片：class=”img-responsive”：图片在任意位置都占100%
class=”img-rounded”：方形
class=”img-circle”：圆形
class=”img-thumbnail”：相框
–表格：table table-bordered table-hover
–表单：给表单项添加：class=“from-control"
2、组件：
–导航条：
–分页条：
3、插件
轮播图

四、事件监听机制

概念:某些组件被执行了某些操作后，触发某些代码的执行。
事件：某些操作，如：单击，双击。键盘按下了，鼠标移动了
事件源:组件。如：按钮文本输入框。。。
监听器：代码。
注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某些事件，则触发执行某个监听器代码。
1.1、常见的事件
1、点击事件
onclick：单击事件
ondbclick：双击事件

2、焦点事件
onfocus:元素获得焦点
onblur：失去焦点

3、加载事件
onload：一张页面或一副图像完成加载

4、鼠标事件
onmousedown:鼠标按钮被按下
onmouseup：鼠标按键被松开
onmousemove：鼠标被移动
onmouseover：鼠标移动到某元素上
onmouseout：鼠标从某元素移开

5、键盘事件
onkeydown：某个键盘按键被按下。
onkeyup：某个键盘按键被松开
onkeypree：某个按键被按下并松开

6、选择和改变
onchange：域的内容被改变
onselect：文本被选中

7、表单事件
onsubmit：确认内容被提交