bootstrap起步 全局css样式概览 全局css样式_栅格 全局css样式_排版

最新推荐文章于 2024-05-30 15:01:09 发布
最新推荐文章于 2024-05-30 15:01:09 发布
阅读量438 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Leon_Jinhai_Sun/article/details/88315751
版权 
http://www.bootcss.com/

基本模板
https://v3.bootcss.com/getting-started/#template

bootstrap起步 

<!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网页</title>
  <link rel="stylesheet" href="bootstrap.min.css">
    <!-- 
    HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询
    （media queries）功能 
    -->
    <!-- 
    警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）
    访问页面时 Respond.js 不起作用 
    -->
    <!--[if lt IE 9]>
      <script 
      src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js">
      </script>
      <script 
      src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js">
      </script>
    <![endif]-->
</head>
<body>
    <div class="container">
      <p>你好!</p>
    </div>
    <script src="jquery-1.12.1.js"></script>
    <script src="bootstrap.min.js"></script>
</body>
</html>

 Bootstrap全局css样式概览

https://v3.bootcss.com/css/

概览
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>全局css样式</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="container-fluid">
      <p>内容哈哈哈哈哈哈哈哈</p>
      <a href="">hello</a>
    </div>
</body>
</html>

全局css样式_栅格

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap.min.css">
  <style>
    .row {
      margin-bottom: 20px;
    }
    .row div {
      margin-top: 0px;
      margin-bottom: 0;
    }
    [class*="col-"]{
      padding-top: 15px;
      padding-bottom: 15px;
      border: 1px solid #ddd;
      background-color: rgba(86,61,124,.15);
      border: 1px solid rgba(86,61,124,.15);
    }
  </style>
</head>
<body>
    <div class="container">
      <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
      </div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap.min.css">
  <style>
    .row {
      margin-bottom: 20px;
    }
    .row div {
      margin-top: 0px;
      margin-bottom: 0;
    }
    [class*="col-"]{
      padding-top: 15px;
      padding-bottom: 15px;
      border: 1px solid #ddd;
      background-color: rgba(86,61,124,.15);
      border: 1px solid rgba(86,61,124,.15);
    }
  </style>
</head>
<body>
    <div class="container">
      <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
      </div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap.min.css">
  <style>
    .row {
      margin-bottom: 20px;
    }
    .row div {
      margin-top: 0px;
      margin-bottom: 0;
    }
    [class*="col-"]{
      padding-top: 15px;
      padding-bottom: 15px;
      border: 1px solid #ddd;
      background-color: rgba(86,61,124,.15);
      border: 1px solid rgba(86,61,124,.15);
    }
  </style>
</head>
<body>
    <div class="container">
      <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-8">.col-md-8</div>
      </div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap.min.css">
  <style>
    .row {
      margin-bottom: 20px;
    }
    .row div {
      margin-top: 0px;
      margin-bottom: 0;
    }
    [class*="col-"]{
      padding-top: 15px;
      padding-bottom: 15px;
      border: 1px solid #ddd;
      background-color: rgba(86,61,124,.15);
      border: 1px solid rgba(86,61,124,.15);
    }
  </style>
</head>
<body>
    <div class="container">
      <div class="row">
        <div class="col-md-4 col-xs-6">.col-md-4 col-xs-6</div>
        <div class="col-md-8 col-xs-6">.col-md-8 col-xs-6</div>
      </div>
    </div>
</body>
</html>

响应式列重置 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap.min.css">
  <style>
    .row {
      margin-bottom: 20px;
    }
    .row div {
      margin-top: 0px;
      margin-bottom: 0;
    }
    [class*="col-"]{
      padding-top: 15px;
      padding-bottom: 15px;
      border: 1px solid #ddd;
      background-color: rgba(86,61,124,.15);
      border: 1px solid rgba(86,61,124,.15);
    }
  </style>
</head>
<body>
    <div class="container">
      <div class="row">
        <div class="col-md-4 col-sm-5 col-xs-6">
          .col-md-4 col-sm-5 col-xs-6
          .col-md-4 col-sm-5 col-xs-6
          .col-md-4 col-sm-5 col-xs-6
          .col-md-4 col-sm-5 col-xs-6
          .col-md-4 col-sm-5 col-xs-6
          .col-md-4 col-sm-5 col-xs-6
        </div>
        <div class="col-md-8 col-sm-7 col-xs-6">.col-md-8 col-xs-6</div>
      </div>
    </div>
</body>
</html>

列偏移 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap.min.css">
  <style>
    .row {
      margin-bottom: 20px;
    }
    .row div {
      margin-top: 0px;
      margin-bottom: 0;
    }
    [class*="col-"]{
      padding-top: 15px;
      padding-bottom: 15px;
      border: 1px solid #ddd;
      background-color: rgba(86,61,124,.15);
      border: 1px solid rgba(86,61,124,.15);
    }
  </style>
</head>
<body>
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-sm-7 col-xs-6 col-md-offset-4">
          .col-md-8 col-xs-6
        </div>
      </div>
    </div>
</body>
</html>

嵌套列 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap.min.css">
  <style>
    .row {
      margin-bottom: 20px;
    }
    .row div {
      margin-top: 0px;
      margin-bottom: 0;
    }
    [class*="col-"]{
      padding-top: 15px;
      padding-bottom: 15px;
      border: 1px solid #ddd;
      background-color: rgba(86,61,124,.15);
      border: 1px solid rgba(86,61,124,.15);
    }
  </style>
</head>
<body>
    <div class="container">
      <div class="row">
        <div class="col-md-9">
          col-md-9
          <div class="row">
            <div class="col-md-8 col-md-offset-1">
              col-md-8
            </div>
          </div>
        </div>
      </div>
    </div>
</body>
</html>

列排序

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap.min.css">
  <style>
    .row {
      margin-bottom: 20px;
    }
    .row div {
      margin-top: 0px;
      margin-bottom: 0;
    }
    [class*="col-"]{
      padding-top: 15px;
      padding-bottom: 15px;
      border: 1px solid #ddd;
      background-color: rgba(86,61,124,.15);
      border: 1px solid rgba(86,61,124,.15);
    }
  </style>
</head>
<body>
    <div class="container">
      <div class="row">
        <div class="col-md-9 col-md-push-3">col-md-9</div>
        <div class="col-md-3 col-md-pull-9">col-md-3</div>
      </div>
    </div>
</body>
</html>
https://v3.bootcss.com/css/#type

排版

标题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>这是一个h1标签<small>这是一个副标题</small></h1>
        <h2>这是一个h2标签<small>这是一个副标题</small></h2>
        <h3>这是一个h3标签<small>这是一个副标题</small></h3>
        <h4>这是一个h4标签<small>这是一个副标题</small></h4>
        <h5>这是一个h5标签<small>这是一个副标题</small></h5>
        <h6>这是一个h6标签<small>这是一个副标题</small></h6>
    </div>
</body>
</html>

页面主体

中心内容
通过添加 .lead 类可以让段落突出显示。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>这是一个h1标签<small>这是一个副标题</small></h1>
        <h2>这是一个h2标签<small>这是一个副标题</small></h2>
        <h3>这是一个h3标签<small>这是一个副标题</small></h3>
        <h4>这是一个h4标签<small>这是一个副标题</small></h4>
        <h5>这是一个h5标签<small>这是一个副标题</small></h5>
        <h6>这是一个h6标签<small>这是一个副标题</small></h6>

        <p>
          欢迎来到声讯台,希望你能通过本套课程以及BootStrap中文网深入学习
          BootStrap开源框架<br>
          欢迎来到声讯台,希望你能通过本套课程以及BootStrap中文网深入学习
          BootStrap开源框架
        </p>
        <p class="lead">
          欢迎来到声讯台,希望你能通过本套课程以及BootStrap中文网深入学习
          BootStrap开源框架
        </p>
    </div>
</body>
</html>

内联文本元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>这是一个h1标签<small>这是一个副标题</small></h1>
        <h2>这是一个h2标签<small>这是一个副标题</small></h2>
        <h3>这是一个h3标签<small>这是一个副标题</small></h3>
        <h4>这是一个h4标签<small>这是一个副标题</small></h4>
        <h5>这是一个h5标签<small>这是一个副标题</small></h5>
        <h6>这是一个h6标签<small>这是一个副标题</small></h6>

        <p>
          欢迎来到声讯台,希望你能通过本套课程以及BootStrap中文网深入学习
          BootStrap开源框架<br>
          欢迎来到声讯台,希望你能通过本套课程以及BootStrap中文网深入学习
          BootStrap开源框架
        </p>
        <p class="lead">
          欢迎来到<mark>声讯台</mark>,希望你能通过本套课程以及BootStrap中文网深入学习
          BootStrap开源框架
        </p>
    </div>
</body>
</html>

被删除的文本

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="container">      
        <p class="lead">
          <del>欢迎</del>来到<mark>声讯台</mark>,希望你能通过本套课程以及BootStrap中文网深入学习
          BootStrap开源框架
        </p>
    </div>
</body>
</html>

被删除的文本无用文本
 

对于没用的文本使用 <s> 标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="container">        
        <p class="lead">
          <s>欢迎</s>来到<mark>声讯台</mark>,希望你能通过本套课程以及BootStrap中文网深入学习
          BootStrap开源框架
        </p>
    </div>
</body>
</html>

插入文本

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="container">       
        <p class="lead">
         <ins>来到声讯台</ins>,
          希望你能通过本套课程以及BootStrap中文网深入学习
          BootStrap开源框架
        </p>
    </div>
</body>
</html>

带下划线的文本

为文本添加下划线，使用 <u> 标签。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="container">      
        <p class="lead">
          <u>来到声讯台</u>,
          希望你能通过本套课程以及BootStrap中文网深入学习
          BootStrap开源框架
        </p>
    </div>
</body>
</html>

小号文本

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="container">       
        <p>
          欢迎来到声讯台,希望你能通过本套课程以及BootStrap中文网深入学习
          BootStrap开源框架<br>
          欢迎来到声讯台,
          <small>
          希望你能通过本套课程以及BootStrap中文网深入学习
          BootStrap开源框架
          </small>
        </p>       
    </div>
</body>
</html>

着重

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="container">
        
        <p>
          欢迎来到<strong>声讯台</strong>         
        </p>
        
    </div>
</body>
</html>

斜体

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="container">      
        <p class="lead">
          <em>来到声讯台</em>         
        </p>
    </div>
</body>
</html>

对齐

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="container">
        <p class="text-left">Left aligned text.</p>
        <p class="text-center">Center aligned text.</p>
        <p class="text-right">Right aligned text.</p>
        <p class="text-justify">Justified text.</p>
        <p class="text-nowrap">No wrap text.</p>
    </div>
</body>
</html>

改变大小写

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="container">
        <p class="text-lowercase">Lowercased text.</p>
        <p class="text-uppercase">Uppercased text.</p>
        <p class="text-capitalize">Capitalized text.</p>
    </div>
</body>
</html>

基本缩略语

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    深入学习<abbr title="attribute">前端框架</abbr>
</body>
</html>

默认样式的引用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <blockquote>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    </blockquote>

    <blockquote class="blockquote-reverse">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>

</body>
</html>

无样式列表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="container">
      <ul class="list-unstyled">
        <li>Hello</li>
        <li>Hello</li>
        <li>Hello</li>
        <li>
          <ul class="list-unstyled">
            <li>inner</li>
            <li>inner</li>
            <li>inner</li>
            <li>inner</li>
          </ul>
        </li>
        <li>Hello</li>
        <li>Hello</li>
        <li>Hello</li>
      </ul>  

      <ol>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
      </ol>    
    </div>
</body>
</html>

内联列表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="container">
      <ul class="list-inline">
        <li>Hello</li>
        <li>Hello</li>
        <li>Hello</li>
      </ul>  
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="container">
      <ul class="list-inline">
        <li>Hello</li>
        <li>Hello</li>
        <li>Hello</li>
        <li>
          <ul class="list-inline">
            <li>inner</li>
            <li>inner</li>
            <li>inner</li>
            <li>inner</li>
          </ul>
        </li>
        <li>Hello</li>
        <li>Hello</li>
        <li>Hello</li>
      </ul>  
    </div>
</body>
</html>

 

Leon_Jinhai_Sun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap入门、CSS样式【栅格系统】
weixin_66281589的博客
04-29 1407
1.WWW：What、Why、Where What:Bootstrap是一个前端开发框架。简单点说就是别人写好的效果封装起来。 Bootstrap是2011年Twitter团队为了方便维护PC端和手机端二研发的一个响应式前端框架。 用于快速开发Web应用程序和网站的前端框架 Bootstrap是基于HTML、CSS、JS的，简介灵活，使Web开发更加快捷 总结：Bootstrap是一个建立在一个页面，可以在三个中断(PC、平板、手机)上完美战士的响应式前端框架 Why: 响应式设计(Bootst
【Bootstrap】CSS全局样式
早睡早起长头发的博客
01-03 2343
一、HTML5文档类型 二、移动设备优先 三、禁用移动设备上的缩放功能 四、布局容器 五、标题 六、页面主体 七、文本 八、列表 九、表格 十、表单 十一、按钮 十二、图片 十三、辅助类 十四、栅格系统
Bootstrap框架的使用之CSS全局样式
m0_61394115的博客
11-07 360
网站：https://www.bootcss.com/
Bootstrap的CSS类积累学习
昊虹AI笔记
09-04 1472
Bootstrap的CSS类积累学习
CSS学习笔记：bootstrap的介绍、下载、使用及响应式布局的实现
最新发布
lbcbjtlhmjq的博客
05-30 1135
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的CSS 样式 bootstrap过时了吗？ 其实在学bootstrap这一部分的网课时，在弹幕上看到一些同学说bootstrap已经过时了，这里谈谈我的看法
http://v3.bootcss.com/css/ bootstrap参考手册网址
liu709127859的专栏
05-10 5879
http://v3.bootcss.com/css/
HTML书写黄金定律
weixin_30678821的博客
03-23 375
语法 用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。 嵌套元素应当缩进一次（即两个空格）。 对于属性的定义，确保全部使用双引号，绝不要使用单引号。 不要在自闭合（self-closing）元素的尾部添加斜线 --HTML5 规范中明确说明这是可选的。 不要省略可选的结束标签（closing tag）（例如，</li>或</b...
Bootstrap全局CSS样式
ZF15261890967的博客
05-13 632
布局容器Bootstrap需要为页面内容和栅格系统包裹容器。提供了两种容器类：.container和.container-fluid,两者不能嵌套使用。 .container 类用于固定宽度并支持响应式布局的容器,宽度为不同屏幕尺寸下的固定值。 .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 区别：例如当屏幕尺寸大于1170px时，.cont
BootStrap CSS全局样式和表格样式源码解析
08-31
BootStrap是一款流行的前端开发框架，它提供了丰富的CSS样式，帮助开发者快速构建响应式和美观的网页。在本文中，我们将深入探讨BootStrap的全局样式和表格样式，以理解其源码工作原理。 首先，BootStrap的全局样式...
BootStrap入门到实战：BootStrap全局CSS样式（一）
05-14
本主题将深入探讨BootStrap全局CSS样式，帮助初学者从入门到实战，逐步掌握这一强大的工具。 首先，BootStrap的核心在于其响应式网格系统，这在描述中的“栅格系统示例2图片合集”中得到了体现。栅格系统是...
全局 CSS 样式 · Bootstrap v3 中文文档.mhtml
07-05
全局 CSS 样式 · Bootstrap v3 中文文档.mhtml
bootstrap3全局css样式中文文档
06-13
bootstrap3全局css样式中文文档，设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。
Bootstrap的css样式初步了解
天元白手的博客
04-08 1935
这里写目录标题Bootstrap的简介为什么要使用BootstrapBootstrap的兼容性Bootstrap使用在那些些地方三级目录 Bootstrap的简介 大家好!我是：Bootstrap来自Twitter公司，是目前最流行的前端框架，它是基于HTML、CSS、JavaScript的一个简洁灵活的开源框架（我非常喜欢免费又好用的东西）。 为什么要使用Bootstrap Bootstrap库...
css基础属性及BootStrap的引入
努力下来就凸头
05-08 2856
css属性这一篇就够了
【前端框架】bootStrap
编程学习集装箱
08-10 588
参考中文文档：https://v3.bootcss.com/ BootStrap概念 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。 Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 响应式布局:同一套页面可以兼容不同分辨率的设备。 基本模板 <!DOCTYPE html> <html lang="zh-CN"> <head> <
bootstrap-全局CSS样式
kjw888的博客
07-22 1112
文章目录一、全局CSS样式：（一）按钮（二） [图片](https://v3.bootcss.com/css/#images)1.响应式布局2. 图片形状（三）[表格](https://v3.bootcss.com/css/#tables)（四）[表单](https://v3.bootcss.com/css/#forms)二、组件：（一）[导航条](https://v3.bootcss.com/...
如何下载使用Bootstrap？
sky-stars的博客
11-24 9363
文章目录前言具体操作总结 前言 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。本文将进行介绍如何下载使用。 具体操作 1.访问Bootstrap下载网站（此处以V3版本进行介绍） https://v3.bootcss.com/getting-started/#download 2.点击下载 3.保存到本地，解压文件 4.打开文件，将里面的文件全部复制到软件中 IDEA要复制到web目录下 5
Bootstrap常用类
qq_39039534的博客
04-21 3395
1.Bootstrap简介 Bootstrap 是一款快速构建、响应式网站的，UI框架。框架的作用就是为开发人员提供一些已经封装好，或者已经优化好的名称，可以直接使用来达到效果。前提是一定要按照他提供的文档进行书写。 学习框架的终极目的是：查阅文档，查看源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp
Bootstrap3.3.6移动优先的全局CSS样式解析
例如，使用`.btn`类可以快速创建具有Bootstrap样式的按钮。 6. **响应式工具** Bootstrap包含一组响应式工具类，如`.hidden-*`和`.visible-*`，用于控制元素在不同屏幕尺寸下的可见性。 7. **自定义** Bootstrap...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值