• 第51天：Bootstrap框架

    Bootstrap的简介和入门

            Bootstrap是一个开源的前端框架，用于快速构建响应式和移动设备优先的网站或应用程序。

            它包含了HTML、CSS和JavaScript的模板和工具集，使开发人员能够快速地创建具有一致性和现代外观的页面布局和UI组件。

            它提供了一个广泛的预定义样式和组件库，可以轻松自定义和扩展，以满足各种需求。

            它提供了响应式布局的支持，使得页面能够自适应不同的设备和屏幕尺寸。

            此外，Bootstrap还提供了丰富的UI组件（如导航栏、按钮、表单、模态框等），使开发人员能够轻松地在项目中使用这些现成的组件。  

            总而言之，Bootstrap是一个强大的开发工具，可帮助开发人员快速搭建出现代化和具备自适应能力的网站或应用程序。

            Bootstrap引入

            中文文档查询：Bootstrap中文网

            下载

            BootCDN.cn

            BootCDN.cn 的小伙伴为 Bootstrap 的 CSS 和 JavaScript 文件提供了 CDN 的支持。直接使用这些 BootCDN.cn 提供的链接即可。

    2. <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    3.  
    5. <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
    6.  
    8. <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">script>

    布局容器

            布局容器是指用于组织和排列其他元素的容器或容器类。在前端开发中，常用的布局容器有以下三种：

            块级布局容器（Block-Level Layout Container）

            块级布局容器会生成一个块级框，它可以使用display属性设置为"block"、"flex"或者"grid"。块级容器会独占一行，并通过CSS属性进行自上而下的垂直排列。

            行内布局容器（Inline Layout Container）

            行内布局容器会生成一个行内框，它可以使用display属性设置为"inline"或者"inline-block"。行内容器会水平地从左到右排列，直到行的边缘，然后自动换行。   

            弹性布局容器（Flexbox Layout Container）

            弹性布局容器是CSS3中的一种新型布局技术，通过定义父元素作为弹性容器，将其子元素称为弹性项。弹性容器通过一系列的属性灵活地控制和调整弹性项的尺寸和位置。常见的属性包括：flex-direction、justify-content、align-items等。弹性布局容器的主要好处是可以实现响应式布局和灵活的排列方式。

            

    栅格系统

            例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     
    7.     
    8.     <script src="Websource\jQuery\node_modules\jquery\dist\jquery.min.js">script>
    9.     <script src="Websource\Bootstrap\js\bootstrap.min.js">script>
    10.     <link rel="stylesheet" href="Websource\Bootstrap\css\bootstrap.min.css">
    11.     
    12.     <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    13.     <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js">// bootstrap script>
    14.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"> // jqueryscript>
    15.  
    16.     <style>
    17.         .c1 {
    18.             height: 100px;
    19.             background-color: red;
    20.             border: 5px solid black;
    21.  
    22.         }
    23.  
    24.         .c2 {
    25.             height: 100px;
    26.             background-color: green;
    27.         }
    28.     style>
    29.  
    30.  
    31. head>
    32. <body>
    33.  
    34. <div class="container">
    35.     <div class="row">
    36.         <div class="col-md-6 c1">div>
    37.         <div class="col-md-6 c1">div>
    38.  
    39.         <div class="col-md-1 c1">div>
    40.         <div class="col-md-1 c1">div>
    41.         <div class="col-md-1 c1">div>
    42.         <div class="col-md-1 c1">div>
    43.         <div class="col-md-1 c1">div>
    44.         <div class="col-md-1 c1">div>
    45.         <div class="col-md-1 c1">div>
    46.         <div class="col-md-1 c1">div>
    47.         <div class="col-md-1 c1">div>
    48.         <div class="col-md-1 c1">div>
    49.         <div class="col-md-1 c1">div>
    50.         <div class="col-md-1 c1">div>
    51.     div>
    52.  
    53. div>
    54.  
    55. body>
    56. html>

            知识点： 

    1. <div class="row">
    2. // 写一个 row 就是将所在区域划分成 12 份
    3. <div class="col-md-6">div>
    4. // 写一个 col-md-6 获取想要的份数
    栅格化参数
    超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)
    栅格系统行为总是水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
    .container 最大宽度None （自动）750px970px1170px
    类前缀.col-xs-.col-sm-.col-md-.col-lg-
    列（column）数12
    最大列（column）宽自动~62px~81px~97px
    槽（gutter）宽30px （每列左右均有 15px）
    可嵌套是
    偏移（Offsets）是
    列排序是

      

    按钮与图片

            按钮颜色

    2. <button type="button" class="btn btn-default">（默认样式）Defaultbutton>
    3.  
    5. <button type="button" class="btn btn-primary">（首选项）Primarybutton>
    6.  
    8. <button type="button" class="btn btn-success">（成功）Successbutton>
    9.  
    11. <button type="button" class="btn btn-info">（一般信息）Infobutton>
    12.  
    14. <button type="button" class="btn btn-warning">（警告）Warningbutton>
    15.  
    17. <button type="button" class="btn btn-danger">（危险）Dangerbutton>
    18.  
    20. <button type="button" class="btn btn-link">（链接）Linkbutton>

            按钮大小

    1. <p>
    2.   <button type="button" class="btn btn-primary btn-lg">（大按钮）Large buttonbutton>
    3.   <button type="button" class="btn btn-default btn-lg">（大按钮）Large buttonbutton>
    4. p>
    5. <p>
    6.   <button type="button" class="btn btn-primary">（默认尺寸）Default buttonbutton>
    7.   <button type="button" class="btn btn-default">（默认尺寸）Default buttonbutton>
    8. p>
    9. <p>
    10.   <button type="button" class="btn btn-primary btn-sm">（小按钮）Small buttonbutton>
    11.   <button type="button" class="btn btn-default btn-sm">（小按钮）Small buttonbutton>
    12. p>
    13. <p>
    14.   <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small buttonbutton>
    15.   <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small buttonbutton>
    16. p>

            图片形状

    1. <img src="..." alt="..." class="img-rounded">
    2. <img src="..." alt="..." class="img-circle">
    3. <img src="..." alt="..." class="img-thumbnail">

            图片颜色

    1. <p class="bg-primary">...p>
    2. <p class="bg-success">...p>
    3. <p class="bg-info">...p>
    4. <p class="bg-warning">...p>
    5. <p class="bg-danger">...p>

             

     

  • 相关阅读:
    vim更改背景等
    深入浅出Spring注解（22）
    修复版知宇发卡企业级发卡平台完整源码/多商户入驻+对接微信公众号+对接免签支付
    QT控件无法获取焦点问题
    Zabbix 5.0 监控教程（二）
    Cookie加密6
    ubuntu升级python到python3.11（可能是全网最靠谱的方法，亲测有效）
    并发、线程简单理解
    android录音mediaRecord\AudioRecord\openSL\PCM tinyalsa总结和优缺点
    第十四届蓝桥杯模拟赛第二期部分题答案（C++代码）
  • 原文地址：https://blog.csdn.net/Mrdong200144/article/details/134273842