bootstrap

目录

bootstrap

1.简介

1.1简介

我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。
Bootstrap 就是这样一个简洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发者，也能做出很专业、美观的页面，极大地提高了工作效率。像下面这个漂亮的网站就是基于 Bootstrap 来开发的。
bootstrap是一套现成的css样式组合

1.2一些说明

鸟叔下载的版本是v3
学习网站：
Bootstrap 教程 | 菜鸟教程 (runoob.com)

注意html文件里面要加上：

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">

1.3个人理解

就是设定了一些样式和类可以直接用吧 很多都是固定的

2. 模板

1.用hbuilder创建一个普通项目（基本html项目）
2.把bootstrap里面的dist复制到这个项目下面 然后改名为bootstrap（比较清晰的知道是用的什么框架）

3.拷贝dist/css中的bootstrap.min.css到项目css中
拷贝dist/js中的bootstrap.min.js的项目到js中
拷贝之前下载的jquery到js中

模板：

<!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">
		<title>bootstrap的html标准模板</title>
		<!-- 载入bootstrap的css -->
		<link rel="stylesheet" href="css/bootstrap.min.css"/>
	</head>
	<body>
		<h1>hello world</h1>
	<script src="js/jquery-3.6.0.js"></script>
	<script src="js/bootstrap.min.js"></script>
	</body>
</html>

3.布局与栅格

3.1 布局

<!-- 第一种 会有留白 -->
<div class="container" style="background-color:thistle ;">
    略略略
</div>
<br>
<!-- 第二种 完整宽度 -->
<div class="container-fluid" style="background-color: thistle;">
    略略略
</div>

3.2栅格网格系统

网格系统必须用到 css
适配别的移动设备
bootstrap框架中的网格系统就是将容器平分成12份

<div style="background-color: mediumaquamarine;">4</div>
<div style="background-color: navajowhite;">8</div>
<hr />
<div class="container">
    <div class="row">
        <div class="col-md-4" style="background-color: deepskyblue;">4列</div>
        <div class="col-md-8" style="background-color: cadetblue;">8列</div>

    </div>

    <hr>
    <div class="row">
        <div class="col-md-1" style="background-color: mediumblue">1</div>
        <div class="col-md-1" style="background-color: burlywood">1</div>
        <div class="col-md-1" style="background-color: indianred">1</div>
        <div class="col-md-1" style="background-color: darkturquoise">1</div>
    </div>
    <div class="row">
        <div class="col-md-6" style="background-color: mediumblue">6</div>
        <div class="col-md-6" style="background-color: burlywood">6</div>
        <div class="col-md-1" style="background-color: indianred">1</div>
        <div class="col-md-1" style="background-color: darkturquoise">1</div>
    </div>
</div>

3.2.1列偏移

<div class="row">
    <div class="col-md-1" style="background-color: mediumblue">1</div>
    <div class="col-md-1 col-md-offset-1" style="background-color: burlywood">1</div>
    <div class="col-md-1" style="background-color: indianred">1</div>
    <div class="col-md-1" style="background-color: darkturquoise">1</div>
</div>

3.2.2列排序

列排序就是改变列的方向，就是改变左右浮动，并设置浮动的距离

第二块往后浮动 把第三块遮挡住，第四块向前浮动 把第三块遮住

<div class="row">
    <div class="col-md-1" style="background-color: mediumblue">1</div>
    <div class="col-md-1 col-md-push-1" style="background-color: burlywood">1</div>
    <div class="col-md-1" style="background-color: indianred">1</div>
    <div class="col-md-1 col-md-pull-1" style="background-color: darkturquoise">1</div>
</div>

3.2.3列嵌套

<div class="row">
    <div class="col-md-6" style="background-color: indianred">
        <!-- 在6的基础下分成1:9:1:1 -->
        <div class="row">
            <div class="col-md-1" style="background-color: yellow;">1</div>
            <div class="col-md-9" style="background-color: green;">9</div>
            <div class="col-md-1" style="background-color: grey;">1</div>
            <div class="col-md-1" style="background-color: blueviolet;">1</div>
        </div>
    </div>
    <div class="col-md-6" style="background-color: grey;">6</div>
</div>

4.常用样式

4.1排版

4.1.1标题

bootstrap会覆盖原来h1~h6的样式，提供了对应类名为非标题元素设置样式 .h1 ~ .h6

副标题small标签或者 .small类名

<h1>标题1<small>副标题</small></h1>
<div class="h1">你好<span class="small">副标题</span></div>

4.1.2段落

文本样式：

:小号字

:加粗

:斜体

<p class="lead"><small>你是</small><b>傻</b><i>弊</i><em>吗</em><strong>我不信</strong></p>

<p>你是傻逼你是煞笔</p>
<p class="lead">通过.lead突出强调内容（作用是增大文本字号，加粗文本，并且对行高和margin也做相应的处理</p>

4.1.3强调

指定几种颜色

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

对齐：

<p style="text-aligh:right;">？？</p>
<p class="text-left">左对齐</p>
<p class="text-right">右对齐</p>
<p class="text-center">居中对齐</p>

两端对齐：

4.1.4列表

定义列表：

在原有基础上加入了一些样式，使用样式class="dl-horizontal"制作水平定义列表：当标题宽度超过160px时会显示三个省略号。

<!-- 无序列表 -->
<ul>
<li>无序项目列表一</li>
<li>无序项目列表二</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>无序项目列表一</li>
<li>无序项目列表二</li>
</ol>
<!-- 定义列表-->
<dl>
<dt>html</dt>
<dd>超文本标记语言</dd>
<dt>css</dt>
<dd>层叠样式表示一种样式表语言</dd>
</dl>
<!-- 水平 -->
<dl class="dl-horizontal">
<dt>html 超文本标记语言</dt>
<dd>html称为超文本</dd>
<dt>测试标题不能160px</dt>
<dd>我在写一个水平定义列表</dd>
</dl>

5.Bootstrap插件

5.1导航

使用下拉与按钮组合可以制作导航

5.1.1导航或标签

要点：

1.基本样式： .nav 与 "nav-tabs" "nav-pills"组合制作导航
2.分类：
 1）标签型(nav-tabs)导航
 2）胶囊型(nav-pills)导航
 3）堆栈(nav-stacked)导航
 4）自适应(nav-justified)导航
 5）面包屑式(breadcrumb导航
3.状态
 1）选中状态 active 样式
 2）禁用状态 disable

标签式导航菜单

<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>

胶囊式导航菜单

<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

5.1.2下拉菜单

步骤：

  • 以一个带有 **class.nav ** 的无序列表开始

  • 添加class.nav-tabs

  • 添加带有.dropdown-menu class的无序列表

<p>带有下拉菜单的标签</p>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        Java <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#">Swing</a></li>
        <li><a href="#">jMeter</a></li>
        <li><a href="#">EJB</a></li>
        <li class="divider"></li>
        <li><a href="#">分离的链接</a></li>
      </ul>
    </li>
    <li><a href="#">PHP</a></li>
  </ul>

5.2.3分页导航

<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul><br>

翻页：略

5.2下拉菜单

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation" class="dropdown-header">下拉菜单标题</li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation" class="dropdown-header">下拉菜单标题</li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
</div>

注：下拉菜单需要引入js 不然点了也没用

5.3模态框

模态框是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可以提供信息，交互等。

<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</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><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
posted @   wlqtc  阅读(49)  评论(0)  编辑  收藏  举报
相关博文：
· SpringBoot
· echarts
· 前端框架之Bootstrap
· 前端知识-07-Bootstrap框架
· w3cschool-Bootstrap 教程
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
点击右上角即可分享
微信分享提示