• 前端框架Bootstrap


    前端框架Bootstrap

    该框架已经帮我们写好了很多页面样式,如果需要使用,只需要下载对应文件

    直接CV拷贝即可

    在使用Bootstrap的时候,所有的页面样式只需要通过修改class属性来调节即可

    什么是Bootstrap       

    • Bootstrap是一个开源的前端框架,用于快速构建响应式和移动设备优先的网站或应用程序。
      • 它包含了HTML、CSS和JavaScript的模板和工具集,使开发人员能够快速地创建具有一致性和现代外观的页面布局和UI组件。
    • Bootstrap最初由Twitter的一些工程师创建,旨在简化Web开发的过程。
      • 它提供了一个广泛的预定义样式和组件库,可以轻松自定义和扩展,以满足各种需求。
    • 使用Bootstrap,开发人员可以更加专注于网站或应用程序的功能和逻辑,而不必从头开始编写CSS样式和设计页面布局。
      • 它提供了响应式布局的支持,使得页面能够自适应不同的设备和屏幕尺寸。
      • 此外,Bootstrap还提供了丰富的UI组件(如导航栏、按钮、表单、模态框等),使开发人员能够轻松地在项目中使用这些现成的组件。
    • 总而言之,Bootstrap是一个强大的开发工具,可帮助开发人员快速搭建出现代化和具备自适应能力的网站或应用程序。

    Bootstrap引入

    中文文档查询:https://www.bootcss.com/

    CDN加速链接

    twitter-bootstrap Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。

    • 压缩文档链接引入

    https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css
     
    https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js

    注意

    • 网络连接引入在本地不会提示相关的补充
    • 下载本地文档较为友好

    Bootstrap的js代码是基于jQuery的

    在使用bootstrap做动态效果时一定要引入jQuery!!!

    布局容器

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

    块级布局容器(Block-Level Layout Container):

    • 块级布局容器会生成一个块级框,它可以使用display属性设置为"block"、"flex"或者"grid"。常见的HTML元素如、

      等都是块级布局容器。块级容器会独占一行,并通过CSS属性进行自上而下的垂直排列。

    行内布局容器(Inline Layout Container):

    • 行内布局容器会生成一个行内框,它可以使用display属性设置为"inline"或者"inline-block"。常见的HTML元素如、、等都是行内布局容器。行内容器会水平地从左到右排列,直到行的边缘,然后自动换行。

    弹性布局容器(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. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js">script>
    7. <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">script>
    8. <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js">script>
    9. <style>
    10. .c1 {
    11. height: 1000px;
    12. width: 1000px;
    13. background-color: red;
    14. }
    15. .c2 {
    16. height: 1000px;
    17. width: 1000px;
    18. background-color: red;
    19. }
    20. style>
    21. head>
    22. <body>
    23. <div class="container c1">div> /*左右两侧有留白*/
    24. <div class="container-fluid c2">div> /*左右两侧没有留白*/
    25. body>
    26. html>

    栅格系统

    1. html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Titletitle>
    6. <script src="Websource\jQuery\node_modules\jquery\dist\jquery.min.js">script>
    7. <script src="Websource\Bootstrap\js\bootstrap.min.js">script>
    8. <link rel="stylesheet" href="Websource\Bootstrap\css\bootstrap.min.css">
    9. <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    10. <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js">// bootstrap script>
    11. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"> // jqueryscript>
    12. <style>
    13. .c1 {
    14. height: 100px;
    15. background-color: red;
    16. border: 5px solid black;
    17. }
    18. .c2 {
    19. height: 100px;
    20. background-color: green;
    21. }
    22. style>
    23. head>
    24. <body>
    25. <div class="container">
    26. <div class="row">
    27. <div class="col-md-6 c1">div>
    28. <div class="col-md-6 c1">div>
    29. <div class="col-md-1 c1">div>
    30. <div class="col-md-1 c1">div>
    31. <div class="col-md-1 c1">div>
    32. <div class="col-md-1 c1">div>
    33. <div class="col-md-1 c1">div>
    34. <div class="col-md-1 c1">div>
    35. <div class="col-md-1 c1">div>
    36. <div class="col-md-1 c1">div>
    37. <div class="col-md-1 c1">div>
    38. <div class="col-md-1 c1">div>
    39. <div class="col-md-1 c1">div>
    40. <div class="col-md-1 c1">div>
    41. div>
    42. div>
    43. body>
    44. html>
    <div class="row">
    • 写一个 row 就是将所在区域划分成 12 份
    <div class="col-md-6">div>
    • 写一个 col-md-6 获取想要的份数

    列偏移

    • 使用 .col-md-offset-* 类可以将列向右侧偏移。
    • 这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。
    • 例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。

    排版

    bootstrap在设置页面的时候将字体设置成了肉眼可以接受的好看一点的字体。

    表单标签

    针对form表单,加样式优先考虑form-control

    按钮组

    颜色

    1. <button type="button" class="btn btn-default">(默认样式)Defaultbutton>
    2. <button type="button" class="btn btn-primary">(首选项)Primarybutton>
    3. <button type="button" class="btn btn-success">(成功)Successbutton>
    4. <button type="button" class="btn btn-info">(一般信息)Infobutton>
    5. <button type="button" class="btn btn-warning">(警告)Warningbutton>
    6. <button type="button" class="btn btn-danger">(危险)Dangerbutton>
    7. <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>

    清除浮动

    1. <div class="clearfix">...div>
    1. // Mixin itself
    2. .clearfix() {
    3. &:before,
    4. &:after {
    5. content: " ";
    6. display: table;
    7. }
    8. &:after {
    9. clear: both;
    10. }
    11. }
    12. // Usage as a mixin
    13. .element {
    14. .clearfix();
    15. }

    图标

    span标签

    1. <span class="glyphicon glyphicon-align-left" aria-hidden="true">span>
    2. <button type="button" class="btn btn-default btn-lg">
    3. <span class="glyphicon glyphicon-star" aria-hidden="true">span> Star
    4. button>

    可以改颜色 - 操作普通文本方法相同

    1. <script>
    2. .c {color:red;}
    3. script>

    图标参考网站:https://fontawesome.com.cn/

  • 相关阅读:
    11个销售心理学方法,帮你搞定客户!
    Elasticsearch:使用 Open AI 和 Langchain 的 RAG - Retrieval Augmented Generation (二)
    Vue2.0开发之——Vue组件-组件的基本使用(31)
    首届中国虚拟艺术巡展 NFT Showcase 圆满落幕!
    【LeetCode动态规划#10】完全背包问题实战,其三(单词拆分,涉及集合处理字符串)
    ES6:箭头函数中的this指向问题
    Mac 使用 scp 上传或下载文件/文件夹
    相关关系与因果关系
    算术入门1-实数
    C++ 用sort和unique实现数据的去重
  • 原文地址:https://blog.csdn.net/m0_71292438/article/details/134270932