bootstrap初探_html/css_WEB-ITnose
- bootstrap资源
- http://getbootstrap.com
- http://github.com/twbs
- http://www.bootcss.com
- bootstrap栅格系统
- 容器：流体（container-fluid）、固定（container）
- 分12列，阈值 分辨率>=1200,container固定尺寸为1170px，若阈值在992到1200之间container固定尺寸为970px，若分辨率在992以下778以上为750px，778px以下为自适应，没有固定的宽度值
-
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.css"> <style> .container{ border:1px #000 solid;} </style> </head><body><!--<div class="container-fluid"> aaaaaaaaa</div>--><div class="container"> aaaaaaaaa</div></body> <script src="js/jquery-2.1.3.js"></script> <script src="js/bootstrap.js"></script></html>Copier après la connexion - 分为12列，可根据列数确定，demo如下
-
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <link rel="stylesheet" href="css/bootstrap.css"> 9 <style>10 .container{ border:1px #000 solid; background: #CCC;}11 div[class*=col-] { color: white; border: 1px solid red;}12 </style>13 </head>14 <body>15 16 <div class="container">17 <div class="col-lg-1">col-lg-1</div>18 <div class="col-lg-11">col-lg-1</div>19 </div>20 21 </body>22 <script src="js/jquery-2.1.3.js"></script>23 <script src="js/bootstrap.js"></script>24 </html>Copier après la connexion - 不同分辨率下，设置col-lg表示超大分辨率，col-md是中等分辨率，col-sm是pad类似大小，col-xs是移动设备，如果设置了col-*那么会按照相应的分辨率显示，如果小于相应的分辨率则会变为几行，demo如下，可自行运行，以及对应demo图片
-
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.css"> <style> .container{ border:1px #000 solid; background: #CCC;} div[class*=col-] { color: white; border: 1px solid red;} </style> </head><body><!--div class="container"> <div class="col-lg-1">col-lg-1</div> <div class="col-lg-11">col-lg-1</div></div--><div class="container"> <div class="row"> <div class="col-lg-4">col-lg-4</div> <div class="col-lg-4">col-lg-4</div> <div class="col-lg-4">col-lg-4</div> </div> <div class="row"> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> </div> <div class="row"> <div class="col-sm-4">col-sm-4</div> <div class="col-sm-4">col-sm-4</div> <div class="col-sm-4">col-sm-4</div> </div> <div class="row"> <div class="col-xs-4">col-xs-4</div> <div class="col-xs-4">col-xs-4</div> <div class="col-xs-4">col-xs-4</div> </div></div></body> <script src="js/jquery-2.1.3.js"></script> <script src="js/bootstrap.js"></script></html>Copier après la connexion - 组合布局，可设置多个class，在分辨率为一个值得时候按照某个class显示，如果分辨率换成另外一个按照另外一个class显示，如下面demo所示，当分辨率大于1200时，按照col-lg显示四列，如果分辨率小于1200大于992，按照col-md显示三列
-
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.css"> <style> .container{ border:1px #000 solid; background: #CCC;} div[class*=col-] { color: white; border: 1px solid red;} </style> </head><body><div class="container"> <div class="row"> <div class="col-lg-3 col-md-4">col-lg-3 col-md-4</div> <div class="col-lg-3 col-md-4">col-lg-3 col-md-4</div> <div class="col-lg-3 col-md-4">col-lg-3 col-md-4</div> <div class="col-lg-3 col-md-4">col-lg-3 col-md-4</div> </div></div></body> <script src="js/jquery-2.1.3.js"></script> <script src="js/bootstrap.js"></script></html>Copier après la connexion - 列偏移col-lg-offset-4，向右偏移4个网格距离，demo如下，代码运行效果如下
-
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.css"> <style> .container{ border:1px #000 solid; background: #CCC;} div[class^=col-] { color: white; border: 1px solid red;} </style> </head><body><div class="container"> <div class="row"> <div class="col-lg-3">col-lg-3</div> <div class="col-lg-3">col-lg-3</div> <div class="col-lg-3">col-lg-3</div> <div class="col-lg-3">col-lg-3</div> </div> <div class="row"> <div class="col-lg-4 col-lg-offset-3">col-lg-4</div> </div></div></body> <script src="js/jquery-2.1.3.js"></script> <script src="js/bootstrap.js"></script></html>Copier après la connexion - 最多偏移为12，若大于12则不起任何作用，demo以及代码运行效果如下
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.css"> <style> .container{ border:1px #000 solid; background: #CCC;} div[class^=col-] { color: white; border: 1px solid red;} </style> </head><body><div class="container"> <div class="row"> <div class="col-lg-3">col-lg-3</div> <div class="col-lg-3">col-lg-3</div> <div class="col-lg-3">col-lg-3</div> <div class="col-lg-3">col-lg-3</div> </div> <div class="row"> <div class="col-lg-4 col-lg-offset-13">col-lg-4 col-lg-offset-13</div> </div></div></body> <script src="js/jquery-2.1.3.js"></script> <script src="js/bootstrap.js"></script></html>Copier après la connexion - 列排序col-lg-push往后（往右）移动若干个，col-lg-pull往前（往左）移动若干个
-
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.css"> <style> .container{ border:1px #000 solid; background: #CCC;} div[class^=col-] { color: white; border: 1px solid red;} </style> </head><body><div class="container"> <div class="row"> <div class="col-lg-2">col-lg-2</div> <div class="col-lg-10">col-lg-10</div> </div> <div class="row"> <div class="col-lg-2 col-lg-push-10">col-lg-2</div> <div class="col-lg-10 col-lg-pull-2">col-lg-10</div> </div></div></body> <script src="js/jquery-2.1.3.js"></script> <script src="js/bootstrap.js"></script></html>Copier après la connexion
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1658
14
1415
52
1309
25
1257
29
1231
24
HTML est-il facile à apprendre pour les débutants?
Apr 07, 2025 am 12:11 AM
HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.
Comprendre HTML, CSS et JavaScript: un guide pour débutant
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.
Les rôles de HTML, CSS et JavaScript: responsabilités de base
Apr 08, 2025 pm 07:05 PM
HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.
Quel est un exemple d'une balise de départ dans HTML?
Apr 06, 2025 am 12:04 AM
Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.
HTML, CSS et JavaScript: outils essentiels pour les développeurs Web
Apr 09, 2025 am 12:12 AM
HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.
HTML: The Structure, CSS: The Style, Javascript: Le comportement
Apr 18, 2025 am 12:09 AM
Les rôles de HTML, CSS et JavaScript dans le développement Web sont: 1. HTML définit la structure de la page Web, 2. CSS contrôle le style de page Web, et 3. JavaScript ajoute un comportement dynamique. Ensemble, ils construisent le cadre, l'esthétique et l'interactivité des sites Web modernes.
L'avenir de HTML: évolution et tendances de la conception Web
Apr 17, 2025 am 12:12 AM
L'avenir de HTML est plein de possibilités infinies. 1) Les nouvelles fonctionnalités et normes comprendront plus de balises sémantiques et la popularité des composants Web. 2) La tendance de la conception Web continuera de se développer vers une conception réactive et accessible. 3) L'optimisation des performances améliorera l'expérience utilisateur grâce à des technologies de chargement d'image réactives et de chargement paresseux.
L'avenir de HTML, CSS et JavaScript: Tendances de développement Web
Apr 19, 2025 am 12:02 AM
Les tendances futures de HTML sont la sémantique et les composants Web, les tendances futures de CSS sont CSS-in-JS et CSShoudini, et les tendances futures de JavaScript sont WebAssembly et sans serveur. 1. La sémantique HTML améliore l'accessibilité et les effets de référencement, et les composants Web améliorent l'efficacité du développement, mais l'attention doit être accordée à la compatibilité du navigateur. 2. CSS-in-JS améliore la flexibilité de gestion du style mais peut augmenter la taille du fichier. CSShoudini permet le fonctionnement direct du rendu CSS. 3.WeBassembly optimise les performances de l'application du navigateur mais a une courbe d'apprentissage abrupte, et sans serveur simplifie le développement mais nécessite une optimisation des problèmes de démarrage à froid.
