Bootstrap学习历程

最新推荐文章于 2023-11-25 20:20:28 发布

黄大帅@lz

最新推荐文章于 2023-11-25 20:20:28 发布

阅读量105

点赞数

分类专栏：前端（html+css+js）文章标签： bootstrap 学习 javascript

本文链接：https://blog.csdn.net/gua_Piter/article/details/128860711

版权

前端（html+css+js）专栏收录该内容

36 篇文章 0 订阅

订阅专栏

1.1 Bootstrap介绍

Bootstrap是一个HTML，CSS，JavaScript的框架
Bootstrap框架包含了很多常见的css样式，JavaScript的效果
Bootstrap框架官方文档的案例足够你应付项目中大部分的需求

1.2 Bootstrap如何引用

第一种方式
直接引入文件的方式(用CDN的地址)
Css:

"https://cdn,jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css

https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js
'https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js'

第二种方式：
模块化的包管理的方式

npm install bootstrap

1.3 布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。框架中提供了两个类.

.container 类用于固定宽度并支持响应式布局的容器

<div class="container">
..
</div>

占据全部视口 (viewport) 的容器。container-fluid类用于 100% 宽度，

<div class="container-fluid">
..
</div>

注意，由于padding 等属性的原因，这两种容器类不能互相嵌套。

1.4 栅格系统

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css" rel="stylesheet">
    <style>
        .row>div{
            border: 2px solid black;
            text-align: center;

        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-1">
                1
            </div>
            <div class="col-md-1">
                1
            </div>
            <div class="col-md-1">
                1
            </div>
            <div class="col-md-1">
                1
            </div>
            <div class="col-md-1">
                1
            </div>
            <div class="col-md-1">
                1
            </div>
            <div class="col-md-1">
                1
            </div>
            <div class="col-md-1">
                1
            </div>
            <div class="col-md-1">
                1
            </div>
            <div class="col-md-1">
                1
            </div>
            <div class="col-md-1">
                1
            </div>
            <div class="col-md-1">
                1
            </div>
        </div>
        <div class="row">
            <div class="col-md-8">
                8
            </div>
            <div class="col-md-4">
                4
            </div>
        </div>
    </div>

    <script src="./jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

在这里插入图片描述

表示大屏幕的时候为8，4排列
移动端的时候就为 4，4排列

 <div class="row">
            <div class="col-md-8 col-sm-4">
                8
            </div>
            <div class="col-md-4 col-sm-4">
                4
            </div>

多于列就放到下一行显示

1. 5 列偏移

如果我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移 (ofset)功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名”colmd-offset-*"(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。
例如，你在列元素上添加“col-md-ofset-数字”
在这里插入图片描述

1.6 列排序

列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名 col-md-push-* 和 col-md-pull-* (其中星号代表移动的列组合数)。往前pull，往后push。

往右浮动会被后面的覆盖，往左浮动会将前面的覆盖，因为后写的元素会覆盖前面的元素

在这里插入图片描述

2.1 bootstrap常用样式

2.1.1 标题

Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样。为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6六个类名。同时后面可以紧跟着一行小的副标题<sma11></sma11>或使用.small

<h1>h1. Bootstrap heading<sma71>副标题</sma11></h1>
<div cass="h1">Bootstrap标题<span class="sma11">副标题</span></div>

在这里插入图片描述

2.1.2 段落

段落是排版中另一个重要元素之。通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。可以使用以下标签给文本做突出样式处理:

<sma11>:小号字
<b><strong>;加粗
<i><em>:斜体

2.1.3 强调

定义了一套类名，这里称其为强调类名，这些强调类都是通过颜色来表示强调，具本说明如下:
.text-muted:提示，使用浅灰色 (#999)
.text-primary:主要，使用蓝色 (#428bca)
.text-success:成功，使用浅绿色(#3c763d)
.text-info:通知信息，使用浅蓝色 (#31708f)
.text-warning: 警告，使用黄色 (#8a6d3b)
.text-danger:危险，使用褐色 (#a94442)

<div class="text-muted">提示效果</div>
<div class="text-primary">主要效果</div>
<div class="text-success">成功效果</div>
<div class="text-info">信息效果</div>
<div class="text-warning">警告效果</div>
<div class="text-danger">危险效果</div>

在这里插入图片描述

2.1.4 对齐效果

在CSS中常常使用text-align来实现文本的对齐风格的设置
其中主要有四种风格:
左对齐，取值left;
居中对齐，取值center;
右对齐，取值right;两端对齐，取值justify。
为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格: .text-left: 左对齐 .text-center:居中对齐.text-right: 右对齐 .text-justify: 两端对齐。

2.2 代码

般在个人博客上使用的较为频繁，用于显示代码的风格。在Bootstrap主要提供了三种代码风格

(1)使用<code></code>来显示单行内联代码
(2)使用<pre></pre>来显示多行块代码样式:pre-scrollable(height,max-height高度固定为340px,超过存在滚动条)
(3)使用<kbd></kbd>来显示用户输入代码,如快捷键

2.2.1 单行内联代码

<code>this is a simple code</code>

显示效果： this is a simple code

2.2.2 快捷键

<p>使用<kbd>ctr1+s</kbd>保存</p>

显示效果：

使用ctr1+s保存

2.2.3 多行块代码

<!-- 代码会保留原本的格式，包括空格和换行 -->
<pre>
public class He11oworld {
public static void main(string[] args){System.out.printIn("helloworld...") ;
</pre>

显示：

public class He11oworld {
public static void main(string[] args){System.out.printIn("helloworld...") ;

2.3 表格

2.3.1 表格样式

Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格:
基础样式

1).table:基础表格

附加样式

1).table-striped: 斑马线表格
2).table-bordered: 带边框的表格
3).table-hover:鼠标悬停高亮的表格
4).table-condensed:紧凑型表格，单元格没内距或者内距较其他表格的内距小

2.3.2 tr、th、td样式

提供了五种不同的类名，每种类名控制了行的不同背景颜色

在这里插入图片描述

2.4 表单

表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

2.4.1 表单控件

.input-lg (较大) input-sm (较小)form-control

在这里插入图片描述

2.4.2 输入框text

form-control

<div class="co1-sm-3" name=" id="" class="form-contro1"/> <input type="text"<input type="text" name="" id=""class="form-control input-1g" />
<input type="text" name="" id=""class="form-control input-sm" /></div>

2.4.3 2.4.4 复选框checkbox

垂直显示: .checkbox
水平显示: .checkbox-inline

<!-- 垂直显示 -->
<div>
	<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 class="checkbox-inline">
			<input type="checkbox">游戏
	</label>
	<label cass="checkbox-inline">
			<input type="checkbox">学习
		</label>
</div>

2.4.4 单选框

垂直显示水平显示

.radio.
radio-inline

2.4.5 按钮

1)使用 button 实现

基础样式: btn

<button class="btn">按钮</button>

附加样式:
btn-primary btn-info btn-success btn-warning btn-danger btn-link btn-default

<button class="btn btn-danger">按钮</button>
<button class="btn btn-primary">按钮</button>
 <button class="btn btn-info">按钮</button>
 <button class="btn btn-success">按钮</button>
 <button class="btn btn-default">按</button>
 <button class="btn btn-warning">按钮</button>
 <button class="btn btn-link">按钮</button>

2)多标签支持:使用a div 等制作按钮

<a href="##"class="btn btn-info">a标签按钮</a>
<span class="btn btn-success">span标签按钮</span>
<div class="btn btn-warning">div标签按钮</div>

在这里插入图片描述

3)按大小
使用.btn-lg、.btn-sm 或.btn-xs 就可以获得不同尺寸的按钮

<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>

在这里插入图片描述

4)禁用
方法1: 在标签中添加disabled属性

<button class="btn btn-danger" disabled="disabled">禁用按钮</button>

方法2:在元素标签中添加类名”disabled

<button class="btn btn-danger disabled">禁用按钮</button>

在class属性中添加disabled只是样式上禁用了，并不是真正的禁用了此按钮!

2.5 表单布局

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

向父元素添加role="form”。
把标签和控件放在一个带有 class.form-group 的<div>中。这是获取最佳间距所必需的.
向所有的文本元素<input>、<textarea>和<select>添加class ="form-contror。

2.5.1 水平表单

同一行显示form-horizontal
配合Bootstrap框架的网格系统

在这里插入图片描述

黄大帅@lz

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap学习历程

Bootstrap是一个HTML，CSS，JavaScript的框架Bootstrap框架包含了很多常见的css样式，JavaScript的效果Bootstrap框架官方文档的案例足够你应付项目中大部分的需求。
复制链接

扫一扫