【原创】bootstrap框架的学习 第五课

最新推荐文章于 2024-08-30 20:29:15 发布
最新推荐文章于 2024-08-30 20:29:15 发布
阅读量87 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/937522zy/p/4566184.html
版权

一.Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。

<!DOCTYPE html>
<html>
<head> <title>Bootstrap 实例 - 标题</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <h1>我是标题1 h1</h1> <h2>我是标题2 h2</h2> <h3>我是标题3 h3</h3> <h4>我是标题4 h4</h4> <h5>我是标题5 h5</h5> <h6>我是标题6 h6</h6> </body> </html>

效果：

二.内联子标题<small>

<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1> <h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>


效果图：
<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1> <h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>




三.引导主题副本class=“lead”


<h2>引导主体副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。</p>

效果图：

四、默认强调标签<strong>粗体文本、<em>斜体文本

<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br> <em>本行内容是在标签内，并呈现为斜体</em><br> <p class="text-left">向左对齐文本</p> <p class="text-center">居中对齐文本</p> <p class="text-right">向右对齐文本</p> <p class="text-muted">本行内容是减弱的</p> <p class="text-primary">本行内容带有一个 primary class</p> <p class="text-success">本行内容带有一个 success class</p> <p class="text-info">本行内容带有一个 info class</p> <p class="text-warning">本行内容带有一个 warning class</p> <p class="text-danger">本行内容带有一个 danger class</p>

效果图：

五、缩写<abbr title="    ">
<abbr title="World Wide Web">WWW</abbr><br> <abbr title="Real Simple Syndication" class="initialism">RSS</abbr>

效果图：

 

六、地址<address>

 

<address>
  <strong>Some Company, Inc.</strong><br> 007 street<br> Some City, State XXXXX<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">mailto@somedomain.com</a> </address>

效果图：

 

七、引用<blockquote>

 

<blockquote><p>这是一个默认的引用实例。</p></blockquote>
<blockquote>这是一个带有源标题的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>
<blockquote class="pull-right">

这是一个向右对齐的引用。

<small>Someone famous in <cite title="Source Title">Source Title</cite></small>

</blockquote>

效果图：

 

八、列表：Bootstrap 支持有序列表、无序列表和定义列表。

<h4>有序列表</h4>
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
<h4>无序列表</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<h4>未定义样式列表</h4>
<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<h4>内联列表</h4>
<ul class="list-inline">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<h4>定义列表</h4>
<dl>
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
<h4>水平的定义列表</h4>
<dl class="dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>

 

效果图：

九、总结更多排版类
 
 
类描述实例
.lead使段落突出显示尝试一下
.small设定小文本 (设置为父文本的 85% 大小)尝试一下
.text-left设定文本左对齐尝试一下
.text-center设定文本居中对齐尝试一下
.text-right设定文本右对齐尝试一下
.text-justify设定文本对齐,段落中超出屏幕部分文字自动换行尝试一下
.text-nowrap段落中超出屏幕部分不换行尝试一下
.text-lowercase设定文本小写尝试一下
.text-uppercase设定文本大写尝试一下
.text-capitalize设定单词首字母大写尝试一下
.initialism显示在 <abbr> 元素中的文本以小号字体展示尝试一下
.blockquote-reverse设定引用右对齐尝试一下
.list-unstyled移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)尝试一下
.list-inline将所有列表项放置同一行尝试一下
.dl-horizontal该类设置了浮动和偏移，应用于 <dl> 元素和 <dt> 元素中，具体实现可以查看实例尝试一下
.pre-scrollable使 <pre> 元素可滚动 scrollable
 
 


 

 

转载于:https://www.cnblogs.com/937522zy/p/4566184.html

                

        

        




    




    

      

        

            

              
                
                  dfe3318
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
学习 Bootstrap 5

				
			

			

				

					qq_37354060的博客
				

				

					01-23
					
					865
					
				

			

		

		

			
				
学习 Bootstrap 51. [列使用 (栅格布局系统)](https://blog.csdn.net/qq_37354060/article/details/122516540)2. [列中的对齐方式 (列)](https://blog.csdn.net/qq_37354060/article/details/122510635)3. [排版](https://blog.csdn.net/qq_37354060/article/details/122513202)4. [背景颜色](https://b

			
		

	



                

              
                



	

		

			

				
					
Bootstrap——表格（基本实例、表头选项、条纹状表格、带边框的表格、无边框的表格、鼠标指针悬停、紧凑表格、状态类、响应式表格）

				
			

			

				

					m0_69034993的博客
				

				

					11-05
					
					1万+
					
				

			

		

		

			
				
状态类设置的是、或元素样式，使用.table-*来设置，可选值包括success、active、primary、secondary、danger、warning、info、light、dark等，同时状态类也适用于反转色调。Bootstrap中提供了一系列表格布局样式，利用该样式可以帮助开发者快速开发出美观的表格，作用于元素的表格样式如下表所示。上表中，.table是表格的一个基类，如果想要加其他的样式，都要在.table的基础上去添加。例：表格背景颜色示例。

			
		

	



                


  
              

                


	

		

			

				
					
【笔记】《Bootstrap实战》——第5章 电子商务网站

				
			

			

				

					程序边界
				

				

					04-14
					
					1513
					
				

			

		

		

			
				
文章目录一、商品页的标记二、面包屑、页面标题和分页导航三、调整商品网格四、侧边栏和筛选选项1.基本布局2.Clearance Sale按钮3.选项列表4.为选项链接添加Font Awesome图标复选框5.使用LESS混入在栏中对齐选项6.针对平板和手机调整选项列表布局7.在手机上折叠选项面板


构建了公司网站之后，接下来就可以考虑设计一个在线商店了。
此次的设计以上一章的设计为基础， 只是添加...

			
		

	





	

		

			

				
					
bootstrap5

				
			

			

				

					云墨知秋的博客
				

				

					11-06
					
					3404
					
				

			

		

		

			
				
Bootstrap v5 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 (bootcss.com)

			
		

	



		

			
		



	

		

			

				
					
BOOTSTRAP----lead(引导主体副本)

				
			

			

				

					读数据的教育家的博客
				

				

					08-07
					
					1356
					
				

			

		

		

			
				
先上对比的结果吧，上面的是添加了class=“lead”的效果。确实更好看了。

引导主题副本与一般的字体效果对比。直接套用这些类确实比自己调css参数好看多了。...

			
		

	





	

		

			

				
					
php 调用bootstrap,如何在HTML页面中使用bootstrap框架（图文详解）

				
			

			

				

					weixin_33266645的博客
				

				

					03-23
					
					1300
					
				

			

		

		

			
				
前端开发框架有很多，比如：layui，MUI，bootstrap等，那你会用bootstrap框架写页面吗？这篇文章就和大家讲讲bootstrap框架的使用方法，有一定的参考价值，感兴趣的朋友可以看看。Bootstrap 是基于 HTML、CSS 和 JavaScript 的一款前端框架，其可以用来快速开发 Web 应用程序和网站，且所有的主流浏览器都支持 Bootstrap。因为该框架几乎包含了...

			
		

	





	

		

			

				
					
bootstrap 合并菜单_bootstrap菜单完美解决---原创

				
			

			

				

					weixin_36206609的博客
				

				

					01-17
					
					247
					
				

			

		

		

			
				
由于bootstrap的各方优点，偶的“点金项目细化分包管理平台”决定采用它。但在使用中遇到了一些问题，比如菜单的问题，这个菜单是用的一个JQuery的一个效果，点击后，所点击的链接处的class要加active，以标明哪里点击了，高亮表现，并且该链接的上级菜单项也会高亮(如果菜单项仅为一级时，其点击后亦高亮)，如果采用iframe的方式，在一个页面中写JQ是能完成的，但会丧失bootstrap自...

			
		

	





	

		

			

				
					
bootstrap 学习

				
			

			

				

					weixin_43157199的博客
				

				

					03-22
					
					330
					
				

			

		

		

			
				
栅栏
<div class=“container”>
<div class=“row”>
<div class=“col-md-1”>.col-md-1</div>
<!—由于这12个div都一样,所以这里省略了其他10个—>
<div class=“col-md-1”>.col-md-1</div>
</d...

			
		

	





	

		

			

				
					
React 和 Bootstrap Web 开发学习手册（一）

				
			

			

				

					龙哥盟
				

				

					07-22
					
					595
					
				

			

		

		

			
				
我们都知道 JavaScript 应用程序是 Web 开发的未来，有许多不同的框架可用于构建同构 JavaScript Web 应用程序。然而，随着 Web 开发世界的变化，我们都需要作为开发人员现代化，学习新的框架并构建新的工具。重要的是要分析框架的代码方法，并采用相同的方法，而不是迷失在框架市场中。ReactJS 是一个开源的 JavaScript 库，类似于 Bootstrap，用于构建用户界面，被称为MVC中的V（视图）。当我们谈论M和C。

			
		

	





	

		

			

				
					
后台管理系统bootstrap

				
			

			

				

					02-11
				

			

		

		

			
				
【后台管理系统Bootstrap】是一个基于Bootstrap框架构建的轻量级项目，特别适合初学者进行学习和实践。Bootstrap作为一款流行的前端开发框架，以其响应式布局、丰富的UI组件和易用性而受到广泛欢迎。这个项目虽然小...

			
		

	





	

		

			

				
					
原创歌曲分享平台--论文.rar

				
			

			

				

					02-01
				

			

		

		

			
				
"springboot"标签确认了该项目的核心技术栈，Spring Boot是基于Spring框架的一个快速开发工具，它内置了Tomcat服务器，简化了配置，支持自动配置各种Spring组件和第三方库，使得开发者能更专注于业务逻辑的实现。...

			
		

	





	

		

			

				
					
爬虫训练场项目，1小时掌握 Bootstrap 网格系统

					
热门推荐

				
			

			

				

					梦想橡皮擦，专栏100例写作模式先行者，现象级专栏 《Python 爬虫 100 例》作者、《滚雪球学 Python 专栏》原创者
				

				

					12-20
					
					1万+
					
				

			

		

		

			
				
Bootstrap 提供了一整套响应式，移动设备优先的流式网格系统，页面最多允许 12 列，为完成该目标，Bootstrap 提供了 6 个类，分别如下。为了实现该效果，本篇博客会带着大家串一下 Bootstrap5 相关技术点，如果你需要本部分知识点，正好可以一起学起来。创建一个全屏幕尺寸容器，容器始终占整个屏幕宽度，如果希望设置容器内边距，可以使用。拖动浏览器，可以看到页面布局的变化，如果希望继续调整，只需要适配。两个属性，在图片后，也对该属性进行了说明。运行代码得到下图效果，在此基础上，增加。

			
		

	





	

		

			

				
					
Bootstrap 组件：下拉菜单组件的使用

				
			

			

				

					WangMin@汪末末
				

				

					09-04
					
					855
					
				

			

		

		

			
				
作者:WangMin
格言:努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 ???? WangMin

用于显示链接列表的可切换、有上下文的菜单。如果要实现下拉菜单的交互性， 要使用JavaScript 。
实例
将下拉菜单按钮触发器和下拉菜单都包裹在.dropdown里，或者另一个添加了position: relative;的元素。然后加入组成菜单的 HTML 代码。
为下拉菜单的父元素设置.dropdown类，菜单向下弹出:
<div class="dropdown">
	<b

			
		

	





	

		

			

				
					
基于vue框架的病床管理信息系统odt4v（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。

				
			

			

				

					h2345678的博客
				

				

					08-27
					
					1389
					
				

			

		

		

			
				
因此，开发一套集医疗人员、物流人员、病床信息及使用记录等功能于一体的病床管理信息系统，成为提升医院管理水平、优化资源配置、增强患者满意度的迫切需求。第三阶段：2024年4月1日－2024年4月30日，完成系统分析，设计，编码，测试等工作，同时完善文献综述及外文翻译，完成论文初稿；第二阶段：2024年3月10日－2024年3月31日，查阅资料，调研系统需求，熟悉课题所需要的编译软件、数据库和设计语言等；第一阶段：2023年1月11日－2024年3月9日， 确定毕设题目，查阅资料，完成开题报告，进行开题答辩。

			
		

	





	

		

			

				
					
vue ref和reactive区别

				
			

			

				

					灰海
				

				

					08-25
					
					5386
					
				

			

		

		

			
				
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。

			
		

	





	

		

			

				
					
Vue的状态管理——Vuex3&4&Pinia

					
最新发布

				
			

			

				

					警警的博客
				

				

					08-30
					
					1524
					
				

			

		

		

			
				
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。

			
		

	





	

		

			

				
					
【项目】云备份系统笔记

				
			

			

				

					m0_73713491的博客
				

				

					08-27
					
					977
					
				

			

		

		

			
				
就包含一个类，config，是读取配置文件的类，因为配置文件只有一份，所以可以采用单例模式，把config类的构造函数私有化，只能通过一个公共成员函数getinstance（）来创建对象（new config（）），在类的内部可以调用私有化构造函数，构造函数里面再调用读取配置文件的函数，用自己实现的工具类读取配置文件，将读到的内容放到一个字符串中，然后再将字符串用Json进行序列化，然后给类中的成员变量进行赋值，类中的成员变量就包含了cloud.conf里面包含的信息，一一对应。

			
		

	





	

		

			

				
					
jQuery基础——DOM

				
			

			

				

					m0_54066656的博客
				

				

					08-27
					
					1864
					
				

			

		

		

			
				
JQ基础——DOM操作

			
		

	





	

		

			

				
					
Bootstrap前端框架学习详解

				
			

			

				

					
				

			

		

		

			
				
Bootstrap是一个流行的开源前端框架，由Twitter开发并维护，它提供了丰富的组件和样式，帮助开发者快速构建响应式和移动优先的网页。这个学习笔记涵盖了Bootstrap的基础知识和关键特性，适合初学者和有经验的开发者...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值