使用Bootstrap v3.3.4注意细节box-sizing_html/css_WEB-ITnose
一、bootstrap样式
在Bootstrap v3.3.4中有下面一条重置样式：
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}*:before,*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}将所有的元素的默认盒模型box-sizing都设置成了border-box，而现代浏览器的标准默认box model是 content-box。很多第三方其他的UI库，第三方js库用的也是标准的content-box。
了解这点在写某些功能时很重要，尤其是合并使用其他第三方库和bootstrap时更要注意。
二、例子举例：做一个展开收缩的div。
代码如下：
<!DOCTYPE html><meta charset="utf-8" /><!-- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> --><style type="text/css"> #tabslide{ position: absolute; width: 200px; height: 400px; background-color: green; border:4px solid blue; margin: 50px auto 0; right: 0; } #fold{ position: absolute; margin: -50px 0 0 0; }</style><script src="js/jquery-2.1.4.min.js"></script><script type="text/javascript">function changeSize(){ if($("#tabslide").width() == 200){ $("#tabslide").css("width", "300px"); $("#fold").html("-unexpand"); }else{ $("#tabslide").css("width", "200px"); $("#fold").html("+expand"); }}</script><div id="tabslide"> <button id="fold" onclick="changeSize()" >+expend</button></div>效果：点"+expand"按钮div宽度增大，点"-unexpand"div宽度缩小。
取消注释，引入bootstrap.min.css，就失效了，原因就是上面说的
* {
box-sizing: border-box;
}
使得div的width:300px设置的是border+padding+contentwidth的总宽度，jquery获取的还是contentwidth，所以就失效了。
如果要使用bootstrap框架，上述问题解决方案有三种：
1、方法一
在js代码里将if($("#tabslide").width() == 200)中的200改为192。
这样后期维护会不方便，因为你设置的宽度width为200，判断时却要判断200减去边框，减去padding得到的值。当border或padding修改时又会失效，又要重新计算。
2、方法二
在css中显示设置box-sizing:content-box
#tabslide{ ... box-sizing:content-box;}比第一种方法好一点，但是万一用到bootstrap的某些样式和box-sizing:border-box相关，又要做改动。
3、方法三
在js中显示设置box-sizing:content-box。
这种方法是我推荐使用的，没有什么后顾之忧。
完整代码：
<!DOCTYPE html><meta charset="utf-8" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /><style type="text/css"> #tabslide{ position: absolute; width: 200px; height: 400px; background-color: green; border:4px solid blue; margin: 50px auto 0; right: 0;/* 方法二 box-sizing:content-box;*/ } #fold{ position: absolute; margin: -50px 0 0 0; }</style><script src="js/jquery-2.1.4.min.js"></script><script type="text/javascript">function changeSize(){ $("#tabslide").css("box-sizing", "content-box");//方法三 // if($("#tabslide").width() == 192){ //方法一 if($("#tabslide").width() == 200){ $("#tabslide").css("width", "300px"); $("#fold").html("-unexpand"); }else{ $("#tabslide").css("width", "200px"); $("#fold").html("+expend"); }}</script><div id="tabslide"> <button id="fold" onclick="changeSize()" >+expend</button></div>上面代码中expand拼写写错了，写成了expend。本来准备修改，结果还有别的问题就在此一吐为快。
expand:意思”展开“。
expend:意思“消费”。
还有一点是“unexpand”根本没有这个单词。这也是我写这段废话的原因。
我专门查了一下expand的反义词应该是shrink：意思"收缩"。
【经评论中小伙伴告知，一般情况用的是"展开(expand)"和"折叠(collapse)"，哎，这英文捉急啊~】
因为改的是别人写的代码，我很无奈，只是提醒大家一点，以后写代码尽量写英文，不懂就多查查有道也好。这样别人看你代码不会至少可以多学个单词，而不是误导别人，比如这里"unexpand"。
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Was ist der Zweck des & lt; datalist & gt; Element?
Mar 21, 2025 pm 12:33 PM
Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159
Was ist der Zweck des & lt; Fortschritts & gt; Element?
Mar 21, 2025 pm 12:34 PM
Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati
Was ist der Zweck des & lt; Meter & gt; Element?
Mar 21, 2025 pm 12:35 PM
Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex
Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?
Mar 20, 2025 pm 06:05 PM
Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.
Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?
Mar 17, 2025 pm 12:27 PM
In dem Artikel werden unter Verwendung von HTML5 -Formularvalidierungsattributen wie Erforderlich, Muster, Min, MAX und Längengrenzen erörtert, um die Benutzereingabe direkt im Browser zu validieren.
Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design?
Mar 20, 2025 pm 05:56 PM
In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.
Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?
Mar 17, 2025 pm 12:20 PM
In Artikel werden Best Practices zur Gewährleistung der HTML5-Cross-Browser-Kompatibilität erörtert und sich auf die Erkennung von Merkmalen, die progressive Verbesserung und die Testmethoden konzentriert.
Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen?
Mar 12, 2025 pm 04:05 PM
Dieser Artikel erklärt den HTML5 & lt; Time & gt; Element für semantische Datum/Uhrzeit. Es betont die Wichtigkeit des DateTime-Attributs für die Maschinenlesbarkeit (ISO 8601-Format) neben menschenlesbarem Text, das Zubehör steigert
