学习Bootstrap的笔记

已于 2023-10-19 15:58:23 修改
阅读量226 收藏 1
点赞数 1
文章标签： bootstrap 前端 html
于 2023-09-21 09:50:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_65143871/article/details/133124642
版权

安装

搜索 Bootstrap中文网，点击下载Bootstrap  V4a4bc2dfda9a448a79f4d60790aa9a9cb.png

安装完成后打开有两个文件夹：css和js865084a520ef42cc84b5ccfab14b98f7.png

打开css,发现里面有一个min.css，我们主要用这个改变页面布局6f04baf26b8c4a3d83f547a2e6759cfc.png

把整个css文件都放在我们的vs code当前目录文件夹下 。

然后我们再调用css文件下的min.css文件

如果不放：页面就不会响应我们的布局（以栅格系统举例，具体代码看看栅格系统章）59c0b2ebfb3647d88c44ae7b9e549d16.png19b5f81ded194d58ad25e51dba775aff.png

 放了之后：4ff8415a1e9f4d088b24dc5b92bcda15.png

96de1d0a37524c208013daf55e3b7b49.png

栅格系统

所谓的栅格系统就是把一行或多行分为12列，我们可以向其中某列添加数据或布局。

题目:按照以下布局：

设置三个行

第一行分为2列，第一列占八个，第二列占4格

第三行分为3列，列宽分别为：4 4  4

代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>栅格系统</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
   
   <!--外嵌式样式-->
   <style>
  .row
    {
        margin-bottom:15px;
    }
    [class*=col]
    {
        padding-top:15px;   <!--列距离顶部的距离-->
        padding-bottom:15px;  <!--列之间的距离-->
        background-color:rgba(86,61,124,0.15);
        border:1px solid rgba(86,61,124,.2);  <!--列与列之间的分割线宽度为1px宽-->
    }
  
  
    </style>
</head>
<body>



<div class="container">
    <div class="row">
    <div class="col-lg-1">col-lg-1</div>   <!--991-->
    <div class="col-lg-1">col-lg-1</div>
    <div class="col-lg-1">col-lg-1</div>
    <div class="col-lg-1">col-lg-1</div>
    <div class="col-lg-1">col-lg-1</div>
    <div class="col-lg-1">col-lg-1</div>
    <div class="col-lg-1">col-lg-1</div>
    <div class="col-lg-1">col-lg-1</div>
    <div class="col-lg-1">col-lg-1</div>
    <div class="col-lg-1">col-lg-1</div>
    <div class="col-lg-1">col-lg-1</div>
    <div class="col-lg-1">col-lg-1</div>
</div>




    <div class="row">
    <div class="col-lg-8">col-lg-8</div>
    <div class="col-lg-4">col-lg-4</div>



</div>
    <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
</div>

</div>


</body>
</html>

fcdcd747d9624227ae4fca81242ea042.png

 lg:大屏幕容器，如果长度小于992就会变成一列9a997d4ae8314c53a0200d5dccca23c6.png

根据改变参数来改变排列方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>

    <style>
        .row
          {
              margin-bottom:15px;
          }



          [class*=col]
          {
              padding-top:15px;
              padding-bottom:15px;
              background-color:rgba(86,61,124,0.15);
              border:1px solid rgba(86,61,124,.2);  
          }
        
        
          </style>
</head>
<body>
    
<div class="container">

    <div class="row">
<div class ="col-4  col-sm-8">col-12  col-sm-8</div>
<div class ="col-6  col-sm-4">col-6  col-sm-4</div>

    </div>

        <div class="row">
            <div class ="col-6  col-sm-8  col-lg-3">col-12  col-sm-8  col-sm-3</div>
            <div class ="col-6  col-sm-8  col-lg-3">col-12  col-sm-8    col-sm-3</div>
            <div class ="col-6  col-sm-8  col-lg-3">col-12  col-sm-8    col-sm-3</div>
            <div class ="col-6 col-sm-8  col-lg-3">col-12  col-sm-8   col-sm-3</div>

        </div>

            <div class="row">
                <div class ="col-6">col-6</div>
                <div class ="col-6">col-6</div>
            </div>
            </div>
</body>
</html>

 长度大于922按lg（大屏幕容器）方式排列：

 3463447d15154902a3248c00b5d5f3c8.png

 否则按sm(平板屏幕方式排列）：

c55339611d6d4612acfb665eea33df8a.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
body {
	background-color: #fdfcf8;
}

.bg-logo {
	background-color: #fdfcf8;
	width: 100%;
}

#main-nav {
	background-color: #eee;
}

#main-nav ul {
	list-style-type: none;
	font-size: 18px;
	padding: 15px 0;
	margin: 0px;
}

#main-nav li {
	display: inline;
}

#main-nav a {
	padding: 15px 20px;
	color: #999;
	text-decoration: none;
}

#main-nav a:hover {
	background-color: #444;
	color: #fff;
}

#leftside {
	font-size: 12px;
	width: 178px;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	padding-top: 10px;
}

#leftside h3 {
	margin: 10px 0 5px 8px;
}

#leftside ul {
	list-style-type: none;
}

#leftside a {
	text-decoration: none;
	color: #333;
	display: block;
	padding: 5px 0 5px 15px;
}

#leftside a:hover {
	background-color: #999;
	color: #fff;
}

#rightside {
	font-size: 12px;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	padding-top: 10px;
}

#rightside h3 {
	margin: 10px 0 5px 8px;
}

#rightside ul {
	list-style-type: none;
	margin:0%
}

#rightside a {
	text-decoration: none;
	color: #930;
	display: block;
	padding: 5px 0 5px 15px;
}

#rightside a:hover {
	background-color: #C30;
	color: #fff;
}


#maincontent {
	font-size: 16px;
	padding: 0 20px;
}

#maincontent h2 {
	margin-top: 20px;
	margin-bottom: 10px;
}

#maincontent p {
	margin: 10px 0;
}

footer {
	background-color: #eee;
	font-size: 12px;
	text-align: center;
	padding: 15px 0;
}

footer p {
	margin: 2px;
	color: #666;
}
</style>
    <title>123</title>
    <link ="stylesheet" href="css/bootstrap.min.css">
    <link ="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div  class="row">
   <div class="col">
        <div  class="bg-log">

        <img src="img1/logo.jpg">
       </div>
   </div>

</div>






<div  class="row">

<div class="col">
    <div id="main-nav">
           <ui> 
    <li><a href="#">个人业务</a></li>
<li><a href="#">理财</a></li>
<li><a href="#">小企业</a></li>
<li><a href="#">今日招行</a></li>
<li><a href="#">在线服务</a></li>
<li><a href="#">主页</a></li>
<li><a href="#">主页</a></li>
</ui>
    </div>

</div>

</div>









    <div class="col-3 col-g-9">
        
        <div id="leftside">
            <H1>在线服务</H1>
             <ui>
            <li><a href="#">神工艺</a></li>
            <li><a href="#">生意贷款</a></li>
            <li><a href="#">取消贷款</a></li>
            <li><a href="#">工资贷款</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">CSS3</a></li>

        </ui>
        </div>
       
   


   <div class="col-9 ">
 
    <div id="rightside">
   
    <div class="row">
    <H1>个人消费贷款</H1>
    <H2>适用贷款</H2>
    <p>

        文案的事 未经允许请勿转载 1.西湖昼夜的不同风景，去一次才看得到。 2.世界那么大，我想去看看；只要出发，永远不算晚。 3.曾经一路搭车到柏林，途径88段风景；车轮驶过的地方都有我的足迹。 4.在路上，我们永远年轻，永远热泪盈眶。 5.美好不是被放在某个地方，而是被铭记于心。 6.一辈子就是一场修行，短的是旅程，长的是人生。 7.生活里有人情世故，旅行中有世间百态。 8.午餐晚餐上班下班，身体日复一日，精神不痛不痒。 9.迈开那条熟悉的路，找一处精神的栖息。 10.每个人都是这个世界的探索者。 11.不同的旅行，看见不同的世界。 12.旅行的意义在于沿途发生的不期而遇。 13.不匆匆赶路，才能好好感悟。 14.旅行的味道，吃过才知道。
    </p></div>

    <div class="row">
           <h1>办理流程</h1>
        <div class="man-nav">
     
        <p>
            <li>

        <p>距离你成功贷款只剩三步：</p>
                <li><a href="#">第一步：</a></li>
                <li><a href="#">第二步：</a></li>
                <li><a href="#">第三步：</a></li>
                
        </li>
        </p>
    </div>
    
</div>
</div>
</div>


    

 







<div  class="row">


    
    </div>
</div>






</div>


    
    
</body>
</html>

布局

所用到的参数：

/*bootstrap默认字体大小是1em,也就是16px,通过改变px来改变整体字体默认大小*/ 
 html{
            font-size:20px;
        }
      p{
    text-indent:2em;    /*每个P段落，首行空出两个空格，即缩进两个字符*/
}
/*字体加粗*/
<strong></strong>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link  rel ="stylesheet" href="CSS/bootstrap.min.css">
    <title>Document</title>
    <style ="text/css">
        html{
            font-size:20px;
        }
        p{
    text-indent:2em;    /*每个P段落，首行空出两个空格，即缩进两个字符*/
}
    </style>
</head>
<body>
   <div class="container">
    <img src="banner.jpg" width="1100px  height=500px">
 <p >
    红旗渠精神的内容是：
    <span class="text-danger">自力更生，双库创业团结协作，无私奉献</span>
</p>

<p>红旗渠精神是深入开展党史学习教育的思想资源。在“两个一百年”的历史交汇点上，作为中国共产党革命精神的红旗渠精神，仍将发挥出价值引领、精神激励、方向指引的重要作用。没有中国共产党的坚强领导、没有社会主义制度的根本保证，就不可能完成如此浩大的红旗渠工程，红旗渠精神的形成，内蕴着中国共产党全心全意为人民服务的宗旨，内蕴着加强党的全面领导的强大力量以及社会主义集中力量办大事的制度优势。在中国共产党成立一百周年之际，所有这些都可以成为党史学习教育的思想资源。</p>
  
<p >
   当代红旗渠精神为：
    <span class="text-warning">勤劳勇敢、吃苦耐劳、自强不息、坚忍不拔</span>
</p>


 <p><strong>难而不惧，</strong>在理想召唤下排除千难万阻</p> 
 <p><strong>难而不惧，</strong>在理想召唤下排除千难万阻</p>   
 <p><strong>难而不惧，</strong>在理想召唤下排除千难万阻</p>     

</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet"  href="css/bootstrap.min.css">

    <title>Document</title>
    <style type ="text/css">

    address{
        width: 200px;
        height:200px;
        border:1px solid #e02e2e;
        margin:auto;//让盒子居中，必须要设置了width之后才能设置这个，否则无效
    }
    </style>
</head>
<body>
    <div class="container">
<div class=row>
  <div class="col">

  

   
<address>
    许昌职业技术学院<br/>
    河南省许昌市魏都区<br>
    <abbr title="15518978071">电话号码 </abbr>    <br>


    <strong>张三</strong> <br>
    <a href="#">  2569098396@qq.com</href>
    
</address>
</div>
</div>
 </div>
</body>
</html>

   <h2>许昌职业技术学校</h1>
    <li>
        <ui>HTML</ui>
        <ui>CSS</ui>
        <ui>JS</ui>
    </li>
    <H2>XUSD</H2>
    <oi>
        <ui>HTML</ui>
        <ui>CSS</ui>
        <ui>JS</ui>
    </oi>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet"  href="css/bootstrap.min.css">
    <title>Document</title>
    <style type="text/css">
#one{

  
   
    background-image:url(素材.jpg);
    display:inline-block;
}
#image{
    display:inline-block;
}

#h2{
    display:inline-block;
}
#two{
    height:100px;
    width:100px;
    display:inline-block;
}

#com{
    height: 500px;
    width: 609px;
    border:1px solid #739fd1;;

}

#three{

    height: 800px;
    width: 100px;
    border:1px solid #739fd1;;
    display:inline-block;
}

#four{
    margin-top: 10px;
    height: 100px;
    width: 100px;
    border:1px solid #739fd1;;
    display:inline-block;
}


    </style>
        
</head>


</div>
<body>
    <div class="row">
    

   <div class="col">

 
<div class="one">
 <div class="image"> <img src="素材.jpg"></div>  
</div>  </div>
    
<div class="col">
    <div class="two"></div>

        <h2 >中国航空载人飞天</h2>
        中国国际航空股份有限公司（AIR CHINA），简称“国航”，于1988年在北京正式成立，是中国唯一载国旗飞行的民用航空公司。国航是中国航空集团公司控股的航<br>
        空运输主业公司，与中国东方航空股份有限公司和中国南方航空股份有限公司合称中国三大航空公司

    </div> 
</div>



<hr>
<h2><a href="#">最新动态</a></h2>


<div class="row">


    <div class="col">
    <div class="three">
    <ui>
        <div class="row" ><li> 神舟四号飞船完善了应急救生系统功能</ui></div>
        <li>优化舱内载人环境</ui>
        <li>增加了航天员手动控制系统</ui>
        <li>增强了整船偏航机动能力</ui>
      </ui></div></div>



     <div class="col">
      <div class="four">
      <ui>
        <li>出舱进舱</ui>
        <li>环境控制与生命保障</ui>
        <li>升力控制技术</ui>
        <li>回收着陆技术</ui>
     </ui> </div></div>
    
    </div>
</body>
</html>

表格

bootstarp 表格 - 掘金 (juejin.cn)

BootStrap4 入门教程学习摘要笔记
抓更够
08-25 2290
个人在学习BootStrap4入门教程时做的摘要笔记 时不时更新
BootStrap入门到实战：BootStrap组件（一）- Glyphicons字体图标、下拉菜单、按钮组、按钮式下拉菜单
最新发布
林林一928的博客
06-03 1481
一、Glyphicons字体图标二、下拉菜单 用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性用jQuery实现1.3 菜单向上弹出2. 对齐.默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐3.对齐4.分割线5.禁用的菜单项三.按钮组。四.按钮式下拉菜单，1. 单按钮下拉菜单，2. 分裂式按钮下拉菜单...
Bootstrap分割线和普通分割线
weixin_42286461的博客
03-21 7087
转载:https://blog.youkuaiyun.com/qhwc2009/article/details/45047365 <div class="divider"></div> <hr class="simple" color="#6f5499" /> <!--两头渐变透明--> <hr style="filter: alpha(opaci...
bootstrap框架中的分割线
weixin_41377877的博客
11-06 7203
在bootstrap前段框架中，分割线是： &lt;div calss="divider"&gt;&lt;/div&gt;
bootstrap笔记
zhang_ran123的博客
12-22 1131
Bootstrap笔记 预定义样式是在服务器端预先定义的样式也可以称之为全局样式，当前工程下的所有模板都可以直接使用。   viewport 翻译为中文可以叫做"视区"   手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中 通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过
javaweb 中使用bootstrap框架,下拉菜单添加分割线
你好邱林和的专栏
10-30 4837
项目中使用到了bootstrap框架下的下拉插件,当设置分割线时,由于需要鼠标移到上面显示背景,添加p不知道什么原因,会显示空格,导致有一部分无法改变背景,很丑, 后来来浏览器端调试发现,在行li添加的p会被框架识别,里面会有默认的样式有一个10px的高度,修改这个高度即可. data-toggle="dropdown">  工具   &n
bootstrap
weixin_73696461的博客
02-04 141
5)、面包屑式(bread-crumb)导航，单独使用样式，不与nav一起使用，直接加入到o1、ul中即可，一般用于导航，主要是起的作用是告诉用户现在所处页面的位置(当前位置)分页随处可见，分为页码导航和翻页导航页码导航：ul标签上加pagination [pagination-lg | pagination-sm]翻页导航：ul标签上加pager。列排序：通过“col-md-push-数字”和“col-md-pull-数字”改变浮动方向和浮动距离。这是获取最佳间距所必需的。
bootstrap学习笔记
06-17
作者的这份学习笔记还提到了如何利用CDN服务来加载Bootstrap资源，以及如何通过官方文档来深入学习Bootstrap的高级特性和最佳实践。通过这份笔记，开发者可以快速掌握Bootstrap框架的核心概念，以及如何将其运用到...
Bootstrap源码学习笔记之bootstrap进度条
08-31
Bootstrap是一个流行的前端开发框架，它提供了丰富的组件和样式来简化网页设计。在Bootstrap中，进度条是一个常用的元素，用于展示任务或过程的完成状态。在本文中，我们将深入理解Bootstrap进度条的源码，了解如何...
bootstrap基础知识学习笔记
09-01
Bootstrap 基础知识学习笔记主要涵盖了以下几个核心概念： 1. **引入 Bootstrap**：在 HTML 文件中，你需要引入 Bootstrap 的 CSS 和 JavaScript 文件。这通常包括 jQuery（因为 Bootstrap 的某些组件依赖于它）。...
万能分割线
11-02
这是万能分割线，这是万能分割线，这是万能分割线，这是万能分割线，这是万能分割线！！！！
Bootstrap表格使用方法详解
01-21
下表列出了 Bootstrap 支持的一些表格元素： 表格类： .table：为任意 <table> 添加基本样式 (只有横向分隔线) .table-striped：在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) .table-bordered：为所有表格的单元格添加边框 .table-hover：在 <tbody> 内的任一行启用鼠标悬停状态 .table-condensed：让表格更加紧凑 <tr>, <th> 和 <td> 类： .active：将悬停的颜色应用在行或者单元格上 .success：表示成功的操作 .info：表示信息变化的操作 .warning：表
bootstrap学习笔记之初识bootstrap
01-19
Bootstrap是一款目前非常流行的前端框架，简单的说，就是html,css,javascript的工具集，我们可以用bootstrap搭建出简洁，清新的网站或软件界面，有了bootstrap这个利器后台开发人员再也不用发愁前台界面的搭建了。...
16Bootstrap5下拉菜单
醉瑾_的博客
12-10 1094
16Bootstrap5下拉菜单 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>菜鸟教程Bootstrap5下拉菜单</title> <link rel=
bootstrap cloumn 分割_【转及总结】Bootstrap 框架 栅格布局系统底层设计原理
weixin_32677301的博客
12-29 381
如果你是初次接触Bootstrap，你一定会为它的栅格布局感到敬佩。事实上，这个布局系统提供了一套响应式的布局解决方案。既然这么好用，那他是如何用CSS来实现的呢？我特意去Bootstrap官方下载了源代码进行分析了一番，看完之后果然有了收获，不过我只看了栅格布局的那块代码，其实也很简单，不必担心不懂，你只需要要基础的CSS知识即可。前提条件(Bootstrap 自带)首先使用这个布局之前要定义一...
23.4 Bootstrap 框架5
清风
10-07 3658
1. 背景颜色 1.1 背景颜色样式 在Bootstrap 5中, 可以使用以下类来设置背景颜色: * 1. .bg-primary: 设置为主要的背景颜色(#007bff, 深蓝色). * 2. .bg-secondary: 设置为次要的背景颜色(#6c757d, 灰色). * 3. .bg-success: 设置为成功的背景颜色(#28a745, 绿色). * 4. .bg-danger: 设置为危险的背景颜色(#dc3545, 红色). * 5. .bg-warning: 设置为警
5/9 完成后台部分的简陋界面 bootstrap的垂直分割布局
w_z_y1997的博客
05-09 2862
直接上一张我认为我写的里面最复杂的一个页面好了（虽然非常简单）：（请忽略右下角的网易云音乐）&lt;h1&gt;、&lt;hr&gt;什么的昨天说过了，今天说说新用到的row和span系列如果大家还记得的话，之前的三个表格是一溜竖着排下来的，虽然我的审美非常有限也觉得实在是太丑了而且也不方便用户用，所以去查了一下用bootstrap垂直分割布局的办法:在一个div中，bootstrap会自动的把区...
bootstrap 页面分成三列_bootstrap响应式布局
weixin_39613712的博客
12-14 1718
哈喽，大家好呀，我是滑稽君。响应式布局是什么？其实就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。简单来说，我们希望网站在移动设备和PC上都能有一个好的呈现效果。当检测到设备不同时，我们可以给出不同的浏览、布局方案。我们可以通过Bootstrap来实现，那么它又是什么呢？Bootstrap基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，...
html分割线
热门推荐
antiking的专栏
03-20 1万+
html 分割线(转载)                                        【分割线】一、基础代码：1、 2、align 线条位置（可选left、right、center）；width 线条长度；color 颜色；size 厚度 二、特效（效果并不是孤立的，可相互组合）1、两头渐变透明： 2、纺锤形： 
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

孙鹏宇.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值