Bootstrap 学习笔记！

最新推荐文章于 2024-06-03 20:31:46 发布

sunshine~~~

最新推荐文章于 2024-06-03 20:31:46 发布

阅读量327

点赞数

本文链接：https://blog.csdn.net/qq_45192089/article/details/115354226

版权

Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边

1、课程介绍

1、bootstrap是Twitter公司开发基于HTML/CSS/Javascript的前端框架；
2、为实现web应用程序快速开发提供的一套前端工具包；
3、响应式布局；
4、移动设备优先；

bootstrap全局样式用法；
viewport的意义；
栅格式布局用法；
字体、图标；
实现响应式布局的开发；

2、Bootstrap的特性

响应式布局；
栅格布局；
完整的类库；
JQuery插件；
不同的使用场景；

3、Bootstrap开发工具：

任意前端开发工具即可；
专门针对Bootstrap的开发工具：Jetstrap

4、Bootstrap下载地址

官方地址：http://getbootstrap.com
中文地址：http://www.bootcss.com

5、Bootstrap中的全局样式

Bootstrap全局样式的特点

代码整洁；
风格统一；
美观易用；

Bootstrap中的全局样式

Bootstrap提供了大量的全局样式，基本的HTML元素均可以通过class设置样式并得到增强效果；

Bootstrap中的排版

Bootstrap对默认的排版方式进行了CSS样式定义，使得各种基本结构套用出来的HTML页面更加美观；

Bootstrap中的排版-标题（h1~h6）

small标签可以定义小标题；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="dist/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="js/jQuery.js"></script>
    <script src="dist/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>
<body>
<h1>标题一<small>小标题</small></h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>

<span class="h1">1</span>
<span class="h2">2</span>
<span class="h3">3</span>
<span class="h4">4</span>
<span class="h5">5</span>
<span class="h6">6</span>
</body>
</html>

Bootstrap中的排版-文本

段落：对齐方式、文本标记

对齐：
.text-left
.text-right
.text.center

大小写：
.text-lowercase
.text-uppercase
.text-capitalize

mark标签可以标记，del标签可以删除文本；

Bootstrap中的排版-表格

带边框的表格.table-bordered
条纹状的表格.table-striped
悬停变色.table-hover
紧凑风格.table-condensed

Bootstrap中的排版-表单

Bootstrap给HTML大部分表单都设置了默认样式，我们可以给表单添加相应类名，以实现表单的水平排列，个性化定制等；

Bootstrap中的图片-形状

圆角.img-rounded
圆形.img-circle
带有边框的圆角图形.img-thumbnail

Bootstrap中的辅助类

文本颜色
背景颜色
状态设置
三角符号

6、Bootstrap渐进

开发响应式页面；
利用栅格系统适配不同的硬件；

如何实现栅格、图标、响应式？

meta标签中的viewport

1、width、height
2、user-scalable,initial-scale
3、maximum-scale、minimum-scale

响应式开发

栅格把整个屏幕分成了12等分；

网页开发中的单位

px是相对于屏幕分辨率的单位，px的大小跟随屏幕放大缩小，所有浏览器都支持px单位；

1em = 16px(但不完全是)
em会继承父级元素的字体大小；
IE的部分浏览器并不支持em；

rem与em类似，rem会继承根元素的字体大小，html{font-size:62.5%},更稳定；

字体图标-特点

体积小便于加载；无需重复设计；方便引用；
bootstrap更加方便引入：
https://v3.bootcss.com/components/

7、Bootstrap组件

Bootstrap组件介绍

字体图标、下拉菜单、下拉框、警示框

Bootstrap组件-怪异的属性

1、role 给特定的浏览器工具识别（障碍人士）
2、aria-label
3、tabindex
4、data-自定义属性

Bootstrap组件-图标

css:放置Bootstrap的基本样式；
fonts：放置字体图标和相应的文字；
js:放置Bootstrap中既定的交互效果；

1、glyphicon
2、glyphicon-star

<button class="btn btn-default">
    <span class="glyphicon glyphicon-star"></span>
    这是一个带图标的按钮
</button>

Bootstrap组件-下拉菜单

1、.dropdown控制组件为下拉；
2、.dropdown-menu-right代替.pull-right右对齐
3、divider 分割线

在这里插入图片描述

Bootstrap组件-控件组

1、.input-group 表示控件组；
2、.input-group-addon可放置额外内容及图标；

<div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control">
</div>

在这里插入图片描述

Bootstrap组件-导航

1、以一个带有class .nav的无序列表开始；
2、.nav-tabs代表可切换的导航；
3、.nav-pills代表胶囊导航
4、.nav-stack 使导航垂直

Bootstrap组件-分页

1、.pagination 在父元素中添加表示分页
2、.pager 放置在翻页区域
3、.previous 把链接向左对齐 .next把链接向右对齐

<nav>
    <ul class="pager">
        <li class="previous">
            <a href="http://www.imooc.com">向左</a>
        </li>
        <li class="next">
            <a href="http://www.imooc.com">向右</a>
        </li>
    </ul>

    <ul class="pagination">
        <li class="active">
            <a href="http://www.imooc.com">1</a>
        </li>
        <li>
            <a href="http://www.imooc.com">2</a>
        </li>
        <li>
            <a href="http://www.imooc.com">3</a>
        </li>
    </ul>
</nav>

Bootstrap组件-进度条

1、.progress 表示进度条
2、通过状态类改变进度条的颜色
3、.progress-bar-striped 使得进度条颜色渐变

<div class="progress">
    <div class="progress-bar
    progress-bar-warning progress-bar-striped" style="width:10%;">
10%
    </div>
</div>

Bootstrap组件-列表

1、.list-group代表列表组
2、.badge代表状态数
3、.active代表选中状态

<ul class="list-group">
    <li class="list-group-item list-group-item-info">
        这是一个列表
        <a href="#" class="badge">14</a>
    </li>
    <li class="list-group-item">
        <a href="#">2</a>
    </li>
    <li class="list-group-item active">
        哈哈哈
        <a href="#">3</a>
    </li>
</ul>

Bootstrap组件-面板

1、.panel 代表面板
2、.panel-body代表面板内容
3、.panel-footer代表面板的注脚

<div class="panel panel-default">
    <div class="panel-heading">
        弹出层
    </div>
    <div class="panel-body">
        这是面板的主要内容
    </div>
    <div class="panel-footer">
        脚注
    </div>
</div>

8、Bootstrap插件

Bootstrap中的插件-引用

1、Bootstrap插件依赖Bootstrap.js
2、Bootstrap.js基于JQuery

Bootstrap中的插件-data属性

1、通过data属性控制页面交互
2、$(document).off(’.data-api’)解除属性绑定

<!--按钮层-->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal"
data-target="#myModal">
    弹窗
</button>

<!--弹窗-->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span><span class="sr-only">关闭弹窗</span>
                </button>
                <h4 class="modal-title">标题</h4>
            </div>
            <div class="modal-body">
                这是内容
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

sunshine~~~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 学习笔记！

1、课程介绍1、bootstrap是Twitter公司开发基于HTML/CSS/Javascript的前端框架；2、为实现web应用程序快速开发提供的一套前端工具包；3、响应式布局；4、移动设备优先；bootstrap全局样式用法；viewport的意义；栅格式布局用法；字体、图标；实现响应式布局的开发；2、Bootstrap的特性响应式布局；栅格布局；完整的类库；JQuery插件；不同的使用场景；3、Bootstrap开发工具：任意前端开发工具即可；专门针对Bootst
复制链接

扫一扫