bootstrap基础

最新推荐文章于 2023-02-24 23:25:31 发布
最新推荐文章于 2023-02-24 23:25:31 发布
阅读量142 收藏
点赞数
文章标签： bootstrap html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liluo00000/article/details/112244614
版权

bootstrap基础

1、bootstrap需要引入相应的css和js，建议使用cdn的方式进行引入
cdn查找地址：https://www.bootcdn.cn/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.15.0/esm/popper.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <title>Title</title>
</head>

二、基本布局和组件
1、基本布局

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 bg-success">
            <h1>第一行第一列</h1>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 bg-info">
            <h1>第一行第二列</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 bg-secondary">
            <h1>第二行第一列</h1>
        </div>
        <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">
            <div class="row">
                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 bg-warning">
                    <h1>第二行第二列嵌套：第一行第一列</h1>
                </div>
                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 bg-primary">
                    <h1>第二行第二列嵌套：第一行第二列</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 bg-danger">
                    <h1>第二行第二列嵌套：第二行</h1>
                </div>
            </div>
        </div>
    </div>
</div>

在这里插入图片描述
2、文字颜色和背景颜色

<!--文字颜色和背景颜色-->
    <p class="text-muted">柔和的文字</p>
    <p class="text-primary">重要的文本</p>
    <p class="text-success">执行成功的文本</p>
    <p class="text-info">代表一些提示信息的文本</p>
    <p class="text-warning">警告文本</p>
    <p class="text-danger">危险操作文本</p>
    <p class="text-secondary">副标题</p>
    <p class="text-dark">深灰色</p>
    <p class="text-light">浅灰色文本</p>
    <p class="text-white">白色文本</p>

    <!--背景颜色和文本颜色相结合--->
    <h2>背景颜色</h2>
    <p class="bg-primary text-white">重要的背景颜色。</p>
    <p class="bg-success text-white">执行成功背景颜色。</p>
    <p class="bg-info text-white">信息提示背景颜色。</p>
    <p class="bg-warning text-white">警告背景颜色</p>
    <p class="bg-danger text-white">危险背景颜色。</p>
    <p class="bg-secondary text-white">副标题背景颜色。</p>
    <p class="bg-dark text-white">深灰背景颜色。</p>
    <p class="bg-light text-dark">浅灰背景颜色。</p>

在这里插入图片描述
在这里插入图片描述
3、表格

<table class="table table-hover table-striped">
        <!--表头-->
        <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>籍贯</th>
        </tr>
        </thead>
        <!--表体-->
        <tbody>
        <tr>
            <td>张三</td>
            <td class="bg-success">28</td>
            <td>四川</td>
        </tr>
        <tr class="bg-primary">
            <td>张三</td>
            <td>28</td>
            <td>四川</td>
        </tr>
        <tr>
            <td>张三</td>
            <td class="bg-success">28</td>
            <td>四川</td>
        </tr>
        </tbody>
    </table>

在这里插入图片描述
4、按钮

<!-- 标准的按钮 -->
    <button type="button" class="btn btn-default">默认按钮</button>
    <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
    <button type="button" class="btn btn-primary">原始按钮</button>
    <!-- 表示一个成功的或积极的动作 -->
    <button type="button" class="btn btn-success">成功按钮</button>
    <!-- 信息警告消息的上下文按钮 -->
    <button type="button" class="btn btn-info">信息按钮</button>
    <!-- 表示应谨慎采取的动作 -->
    <button type="button" class="btn btn-warning">警告按钮</button>
    <!-- 表示一个危险的或潜在的负面动作 -->
    <button type="button" class="btn btn-danger">危险按钮</button>
    <!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
    <button type="button" class="btn btn-link">链接按钮</button>

    <!---按钮设置边框-->
    <!-- 标准的按钮 -->
    <button type="button" class="btn btn-outline-default">默认按钮</button>
    <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
    <button type="button" class="btn btn-outline-primary">原始按钮</button>
    <!-- 表示一个成功的或积极的动作 -->
    <button type="button" class="btn btn-outline-success">成功按钮</button>
    <!-- 信息警告消息的上下文按钮 -->
    <button type="button" class="btn btn-outline-info">信息按钮</button>
    <!-- 表示应谨慎采取的动作 -->
    <button type="button" class="btn btn-outline-warning">警告按钮</button>
    <!-- 表示一个危险的或潜在的负面动作 -->
    <button type="button" class="btn btn-outline-danger">危险按钮</button>
    <!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
    <button type="button" class="btn btn-outline-link">链接按钮</button>

在这里插入图片描述
5、表单

<!--表单-->
    <form action="" method="post" role="form">
        <table class="table table-hover">
            <tbody>
            <tr>
                <td class="text-right" style="vertical-align: middle ">账 号:</td>
                <td class="text-left">
                    <input type="text" name="uname" id="uname" value="" class="form-control" required="required" style="width: 140px">
                </td>
            </tr>
            <tr>
                <td class="text-right" style="vertical-align: middle ">邮 箱:</td>
                <td class="text-left">
                    <input type="text" name="email" id="email" value="" class="form-control" required="required" style="width: 140px">
                </td>
            </tr>
            <tr>
                <td class="text-right" style="vertical-align: middle ">性 别:</td>
                <td class="text-left">
                    <label class="radio-inline"><input type="radio"  checked name="sextype" value="男">男</label>
                    <label class="radio-inline"><input type="radio"  name="sextype" value="女">女</label>
                </td>
            </tr>
            <tr>
                <td class="text-right" style="vertical-align: middle ">爱 好:</td>
                <td class="text-left form-check form-check-inline">
                    <label><input type="checkbox"  name="mynobby" class="form-check-input" value="">旅游</label>
                    <label><input type="checkbox"  name="mynobby" class="form-check-input" value="">游山</label>
                    <label><input type="checkbox"  name="mynobby" class="form-check-input" value="">玩水</label>
                </td>
            </tr>
            <tr>
                <td class="text-right" style="vertical-align: middle ">职 业:</td>
                <td class="text-left">
                    <select class="form-control" id="myjob">
                        <option>java程序员</option>
                        <option>java程序员</option>
                        <option>java程序员</option>
                        <option>java程序员</option>
                    </select>
                     </td>
            </tr>
            </tbody>
        </table>
    </form>

在这里插入图片描述

6、导航

<!--导航控件 flex-column加上这个控件就是垂直的-->
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link" href="#">新闻</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">社会</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">科技</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">历史</a>
                </li>
            </ul>

            <!--下拉菜单-->
            <div style="margin: 20px;height: 300px">
                <button type="button" class="btn btn-primary dropdown-toggle"  data-toggle="dropdown">主题
                    <span class="caret"></span>
                </button>
                <div class="dropdown-menu">
                    <a role="menuitem" tabindex="-1" href="#">Java</a>
                    <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
                    <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
                    <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
                </div>
            </div>

在这里插入图片描述

7、徽章

<!--徽章--->
<div style="margin: 20px">
    <h3>徽章</h3>
    <span class="badge badge-primary">主要</span>
    <span class="badge badge-pill badge-secondary">主要</span>
    <span class="badge badge-pill badge-success">成功</span>
    <span class="badge badge-danger">危险</span>
    <span class="badge badge-warning">警告</span>
    <span class="badge badge-info">信息</span>
    <span class="badge badge-dark">深色</span>
    <span class="badge badge-light">浅色</span>
    <h3>徽章嵌入到按钮里</h3>
    <button type="button" class="btn btn-primary">
        message<span class="badge badge-light">4</span>
    </button>
</div>

在这里插入图片描述

8、图标

<!---图标-->
    <div style="maxgin:20px;">
        <button type="button" class="btn btn-sm btn-info">
            <i class="fa fa-plus-square"></i>添 加
        </button>
        <button type="button" class="btn btn-sm btn-warning">
            <i class="fa fa-pencil-square"></i>修 改
        </button>
        <button type="button" class="btn btn-sm btn-danger">
            <i class="fa fa-remove"></i>删 除
        </button>
    </div>

在这里插入图片描述

liluo00000
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap字体图标资源
11-16
bootstrap字体图标fonts资源
关于bootstrap的字体图标问题
soos的博客
01-06 3226
我们都知道Bootstrap提供了大量方便的图标字体，但是有时候图标的使用却很困惑，有时候使用glyphicon，有时候使用fa，有时候使用icon等等。 所以在此特意总结一下： glyphicon字体图标：Bootstrap本身提供的glyphicon图标字体有200多种，不需要引入其他的字体文件就可以使用，例如：会员管理 fa字体图标：也是Bootstrap字体图标的一种共479款，需要
freemarker文件下，bootstrap 点击按钮，切换按钮上的图标
小爷欣欣
04-18 3529
freemarker页面代码 jquery代码 $("#but").click(function(){ $("#but").find('i').toggleClass("fa-plus fa-minus"); }); fa标签在bootstrap封装的原形是：使用一个单并增加对应的CSS类名,例： <i class="fa fa-search">   根据i
bootstrap fontawesome使用
最新发布
weixin_52906070的博客
02-24 107
bootstrap fontawesome
BootStrap使用笔记+案例
Brucye
01-20 3508
使用开发版本：bootstrap.css生产版本：bootstrap.min.css （去掉空字符，换行符减少大小，产品上线使用） Step1：打开BootStrap v3官网的组件Step2：打开导航条Step3：找到自己喜欢的导航条样式，复制代码Step4：粘贴在body中，更改自己所需内容 Step5：PyCharm小技巧：Reformat Code 规范缩进Step1：打开官网中的全局CSS样式Step
bootstrap基础教程对应源码
05-28
《bootstrap基础教程》对应源码，内容包括 13个章节对应的源码
Bootstrap基础教程
06-19
Bootstrap基础教程.pdf Bootstrap简易教程Bootstrap基础教程.pdf Bootstrap简易教程
BOOTSTRAP基础
01-26
这里是我一些学习的BOOTSTRAP基础，希望对你们有用，现在已经转行了
bootstrap基础代码实践
07-03
这个“bootstrap基础代码实践”包含了对Bootstrap框架的深入理解和应用实践。下面我们将详细探讨Bootstrap的基础知识和核心组件，以及如何通过实践来提升你的网页设计技能。 1. **Bootstrap简介** Bootstrap是由...
Bootstrap基础视频教程
07-22
内容包括Bootstrap起步、Bootstrap全局css样式概览、Bootstrap全局css样式_栅格、Bootsrtap全局css样式_排版、Bootstrap全局css样式_代码、Bootstrap组件_字体图标、Bootstrap组件_按钮组等。 资源太大，传百度网盘...
bootstrap基础.pdf
05-07
bootstrap一些使用小技巧，比较基础 ，适合刚刚接触的同学
bootstrap基础知识学习笔记
09-01
Bootstrap 基础知识学习笔记主要涵盖了以下几个核心概念： 1. **引入 Bootstrap**：在 HTML 文件中，你需要引入 Bootstrap 的 CSS 和 JavaScript 文件。这通常包括 jQuery（因为 Bootstrap 的某些组件依赖于它）。...
01.Bootstrap 基础教程.rar
09-13
这个“01.Bootstrap基础教程”很可能是为了帮助初学者掌握这个框架的关键概念和使用方法。在本教程中，我们将深入探讨Bootstrap的核心特性，包括网格系统、组件、CSS样式和JavaScript插件。 一、Bootstrap简介 ...
bootstrap 图标系列
Jeenyyin的博客
08-28 711
不好找到链接的请戳下面链接。 https://fontawesome.com/v4.7.0/icons/
bootstrap 集成font-awesome
ISAMU的专栏
01-25 3056
font-awesome官网 http://www.bootcss.com/p/font-awesome/  集成方法： 拷贝css和font目录到web目录中，然后在页面里面加上css引用即可，在用图标的地方指定对应的class名称，如span class="icon-hospital">span> 图标与class的对应看官网说明。 如果集成font-awesome，
Bootstrap3 Font Awesome 字体图标带边框的图标
歪脖先生的博客
06-05 707
带边框的图标 使用.fa-border类，可以类轻易构造出带有圆角边框的图标。还可以添加.pull-right或.pull-left类，让图标向右或向左浮动，所有图标都支持这两个类。如： <div> <iclass="fa fa-quote-left fa-3x fa-border pull-left"></i> <p>歪脖网(waibo....
Bootstrap3 Font Awesome 字体图标的基本图标
歪脖先生的博客
06-05 1860
基本图标 Font Awesome图标跟Glyphicon图标的用法完全相同，所有图标都需要一个基类 .fa和对应每个图标的 .fa-*类。只需创建一个行内元素，并为它应用图标类，即可使用Font Awesome图标。如： <iclass="fa fa-camera-retro"></i> 效果如图 5‑1所示： 图5-1 基本图标 关于作者 ...
Bootstrap基础入门：快速掌握12列布局与响应式设计
Bootstrap基础是Twitter工程师们为内部产品开发而创建的一套开源前端工具集，由Mark Otto和Jacob Thornton合作开发于2011年。这款工具因其易用性、优雅设计和高度灵活性而广受欢迎，迅速在GitHub上积累了大量的关注...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值