当前位置: 开发笔记 > 编程语言 > 正文

Bootstrap基本用法

作者：手机用户2702937405 | 来源：互联网 | 2023-10-10 16:49

使用bootstrap框架的步骤：1、引用bootstrap的css框架，这样可以通过bootstrap来布局；;2、引用bootstrap的js框架，这样可以使用;注意：因为bo

使用bootstrap框架的步骤：

　　1、引用bootstrap的css框架，这样可以通过bootstrap来布局；

　　　　;

　　2、引用bootstrap的js框架，这样可以使用;

　　　　注意：因为bootstrap的js框架是基于jquery而写的，因此要引用bootstrap的js框架的时候必须先引入jquery，这样才能使用bootstrap的框架；

bootstrap的一些常用的布局：

　　栅格化布局：

　　Bootstrap栅格系统的工作原理：

“行（row）”必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）。

使用“行（row）”在水平方向创建一组“列（column）”。

你的内容应当放置于“列（column）”内，而且，只有“列（column）”可以作为行（row）”的直接子元素。

类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。

通过设置padding从而创建“列（column）”之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。

栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。

表格：

　　基本案例

　　　　为任意

标签添加.table可以为其赋予基本的样式—少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能　　会影响例如日历和日期选择之类的插件，所以我们选择将其样式独立出来。

　　　　<table class="table"> ... table>

　　条纹状表格

　　利用.table-striped可以给

之内的每一样增加斑马条纹样式。

　　　　<table class="table table-striped"> ... table>

　　带边框的表格

　　利用.table-bordered为表格和其中的每个单元格增加边框。

　　<table class="table table-bordered"> ... table>

　　鼠标悬停

　　利用.table-hover可以让

中的每一行响应鼠标悬停状态。

　　<table class="table table-hover"> ... table>

　　紧缩表格

　　利用.table-condensed可以让表格更加紧凑，单元格中的内部（padding）均会减半。

　　<table class="table table-condensed"> ... table>

　　状态class

　　通过这些状态class可以为行货单元格设置颜色。

Class	描述
`.active`	鼠标悬停在行或单元格上时所设置的颜色
`.success`	标识成功或积极的动作
`.warning`	标识警告或需要用户注意
`.danger`	标识危险或潜在的带来负面影响的动作

...
...
...
...

...
...
...
...

　　响应式表格

　　将任何.table包裹在.table-responsive中即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失。

　　　　<div class="table-responsive"> <table class="table"> ... table> div>

　　单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control的、</code>和<code><select></code>元素都将被默认设置为<code>width: 100%;</code>。将label和前面提到的这些控件包裹在<code>.form-group</code>中可以获得最好　　的排列。</p><div class="cnblogs_Highlighter"><p><br> <div class="form-group"><br> <label for="exampleInputEmail1">Email address</label><br> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"><br> </div><br> <div class="form-group"><br> <label for="exampleInputPassword1">Password</label><br> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"><br> </div><br> <div class="form-group"><br> <label for="exampleInputFile">File input</label><br> <input type="file" id="exampleInputFile"><br> <p class="help-block">Example block-level help text here.</p><br> </div><br> <div class="checkbox"><br> <label><br> <input type="checkbox"> Check me out<br> </label><br> </div><br> <button type="submit" class="btn btn-default">Submit</button><br><br></pre><br></div><p>　　</p><div class="page-header"><br><h1 id="buttons"><span >按钮<span >选项</span></span><br></div><p>　　使用下面列出的class可以快速创建一个带有样式的按钮。</p><div class="cnblogs_Highlighter"><p><br><button type="button" class="btn btn-default">Default</button><br><br><button type="button" class="btn btn-primary">Primary</button><br><br><button type="button" class="btn btn-success">Success</button><br><br><button type="button" class="btn btn-info">Info</button><br><br><button type="button" class="btn btn-warning">Warning</button><br><br><button type="button" class="btn btn-danger">Danger</button><br><br><button type="button" class="btn btn-link">Link</button></pre><br></div><br><h2 id="buttons-sizes">　　尺寸</h2><p>　　需要让按钮具有不同尺寸吗？使用<code>.btn-lg</code>、<code>.btn-sm</code>、<code>.btn-xs</code>可以获得不同尺寸的按钮。</p><div class="cnblogs_Highlighter"><p><p><br> <button type="button" class="btn btn-primary btn-lg">Large button</button><br> <button type="button" class="btn btn-default btn-lg">Large button</button><br></p><br><p><br> <button type="button" class="btn btn-primary">Default button</button><br> <button type="button" class="btn btn-default">Default button</button><br></p><br><p><br> <button type="button" class="btn btn-primary btn-sm">Small button</button><br> <button type="button" class="btn btn-default btn-sm">Small button</button><br></p><br><p><br> <button type="button" class="btn btn-primary btn-xs">Extra small button</button><br> <button type="button" class="btn btn-default btn-xs">Extra small button</button><br></p></pre><br></div><br><h3>　　链接元素</h3><p>可以为<code><a></code>添加<code>.active</code> class。</p><p><span class="tag">　　<<span class="title">a <span class="attribute">href=<span class="value">"#" <span class="attribute">class=<span class="value">"btn btn-primary btn-lg active" <span class="attribute">role=<span class="value">"button">Primary link<span class="tag"></<span class="title">a></span></span></span></span></span></span></span></span></span></span></p><p><span class="tag"><span class="title"><span class="attribute"><span class="value"><span class="attribute"><span class="value"><span class="attribute"><span class="value"><span class="tag"><span class="title">　　 <span class="tag"><<span class="title">a <span class="attribute">href=<span class="value">"#" <span class="attribute">class=<span class="value">"btn btn-default btn-lg active" <span class="attribute">role=<span class="value">"button">Link<span class="tag"></<span class="title">a></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p><h2 id="buttons-tags">可作按钮使用的HTML标签</h2><p>　　可以为<code><a></code>、<code><button></code>或<code><input></code>元素添加按钮class。</p><p>　　</p><div class="cnblogs_Highlighter"><p><a class="btn btn-default" href="#" role="button">Link</a><br><button class="btn btn-default" type="submit">Button</button><br><input class="btn btn-default" type="button" value="Input"><br><input class="btn btn-default" type="submit" value="Submit"><br></pre><br></div><p><span >这些都为bootstrap的css样式，通过在class中添加这些样式名，便可以引用这些样式；</span></p><p> <br> <script type="text/javascript"> var cpro_id = "u6885494"; </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js"></script> </div> <div class="blog_tags"> <ul> <li><a href="https://www.php1.cn/tag/android" target="_blank" title="android">android</a></li> <li><a href="https://www.php1.cn/tag/asp.net" target="_blank" title="asp.net">asp.net</a></li> <li><a href="https://www.php1.cn/tag/ios" target="_blank" title="ios">ios</a></li> <li><a href="https://www.php1.cn/tag/php" target="_blank" title="php">php</a></li> <li><a href="https://www.php1.cn/tag/jsp" target="_blank" title="jsp">jsp</a></li> <li><a href="https://www.php1.cn/tag/数据库" target="_blank" title="数据库">数据库</a></li> <li><a href="https://www.php1.cn/tag/bootstrap" target="_blank" title="bootstrap">bootstrap</a></li> <li><a href="https://www.php1.cn/tag/css" target="_blank" title="css">css</a></li> <li><a href="https://www.php1.cn/tag/js" target="_blank" title="js">js</a></li> </ul> </div> <div class="article_cmnt" style="display: none;"> <div class="cmnt_title">写下你的评论吧 !</div> <form action="" method="post"> <div class="cmnt_text"> <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了


            
                
                                        会员登录 | 用户注册



    
        推荐阅读
        
            
                                
                    
                        python
                        lua语言闭包、模式匹配、日期、编译、模块的特性及应用
                    

                    
                                                
                        本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值，函数可以作为变量自由传递，也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性，为程序开发带来了便利。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-14 18:18:21
                    

                

                
                                
                    
                        js
                        基于layUI的图片上传前预览功能的2种实现方式
                    

                    
                                                
                            
                        
                                                
                        本文介绍了基于layUI的图片上传前预览功能的两种实现方式：一种是使用blob+FileReader，另一种是使用layUI自带的参数。通过选择文件后点击文件名，在页面中间弹窗内预览图片。其中，layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块，并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-14 17:06:58
                    

                

                                
                    
                    
                
                
                                
                    
                        int
                        Java实现大数乘法（分治算法）
                    

                    
                                                
                        本文介绍了使用Java实现大数乘法的分治算法，包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-14 15:43:50
                    

                

                
                                
                    
                        int
                        HDU 2372 El Dorado（DP）的最长上升子序列长度求解方法
                    

                    
                                                
                            
                        
                                                
                        本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法，通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-14 15:08:18
                    

                

                
                                
                    
                        js
                        Hibernate基础映射
                    

                    
                                                
                        在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-14 10:57:47
                    

                

                
                                
                    
                        int
                        Linux进程控制块PCBtask_struct结构体结构及作用详解
                    

                    
                                                
                        本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用，包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-13 21:31:18
                    

                

                
                                
                    
                        int
                        java 线程死锁模拟
                    

                    
                                                
                        1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-13 19:12:25
                    

                

                
                                
                    
                        js
                        后台获取视图对应的字符串
                    

                    
                                                
                            
                        
                                                
                        1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注：不会执行对应的ac ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-13 18:03:01
                    

                

                
                                
                    
                        int
                        《数据结构》学习笔记3——串匹配算法性能评估
                    

                    
                                                
                            
                        
                                                
                        本文主要讨论串匹配算法的性能评估，包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库，可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n)，通过随机取出长度为m的子串作为模式P，在文本T中进行匹配，统计平均复杂度。对于成功和失败的匹配分别进行测试，分析其平均复杂度。详情请参考相关学习资源。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-13 16:16:05
                    

                

                
                                
                    
                        js
                        ABAP开发发送邮件程序的配置和代码整理
                    

                    
                                                
                        本文介绍了通过ABAP开发往外网发邮件的需求，并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定，可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度：184字。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-13 15:50:17
                    

                

                
                                
                    
                        int
                        动态规划算法的基本步骤及最长递增子序列问题详解
                    

                    
                                                
                            
                        
                                                
                        本文详细介绍了动态规划算法的基本步骤，包括划分阶段、选择状态、决策和状态转移方程，并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中，在以后尽可能多地利用这些子问题的解，从而提高算法的效率。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-13 15:38:19
                    

                

                
                                
                    
                        js
                        Java验证码——kaptcha的使用配置及样式
                    

                    
                                                
                            
                        
                                                
                        本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置，包括pom.xml的依赖配置和web.xml中servlet的配置。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-13 13:58:25
                    

                

                
                                
                    
                        datetime
                        高质量SQL书写的30条建议
                    

                    
                                                
                            
                        
                                                
                        本文提供了30条关于优化SQL的建议，包括避免使用select *，使用具体字段，以及使用limit 1等。这些建议是基于实际开发经验总结出来的，旨在帮助读者优化SQL查询。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-13 13:24:33
                    

                

                
                                
                    
                        int
                        指针的引用以及在什么情况下使用指针的引用
                    

                    
                                                
                        本文介绍了指针的概念以及在函数调用时使用指针作为参数的情况。指针存放的是变量的地址，通过指针可以修改指针所指的变量的值。然而，如果想要修改指针的指向，就需要使用指针的引用。文章还通过一个简单的示例代码解释了指针的引用的使用方法，并思考了在修改指针的指向后，取指针的输出结果。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-13 12:54:29
                    

                

                
                                
                    
                        js
                        工程中添加Android Dependencies
                    

                    
                                                
                        在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-13 12:08:09