Bootstrap apprentissage de base_javascript compétences

Bootstrap est un framework de structure front-end basé sur une structure de grille (bien sûr, il a également JS, JQuery). Son avantage est que le framework de contenu peut être rapidement construit sur la base d'une requête multimédia, la page construite peut s'adapter rapidement. différents utilisateurs, qu'il s'agisse d'un téléphone mobile, d'une tablette ou d'un PC, il peut fondamentalement s'adapter. Bien sûr, la nouvelle version ne prend plus en charge IE6, et la prise en charge d'IE8 est également très limitée. Après tout, IE8 le fait. ne supporte pas très bien HTML5. (Pour être honnête, je ne le supporte pas moi-même.) Je n'aime pas IE6 ~ 8. Pour un joueur junior comme moi, la compatibilité est parfois très difficile. Non seulement j'ai besoin de l'utiliser. pour des projets, mais j'ai aussi besoin de l'utiliser pour des entretiens. Avez-vous fait une erreur ? Si vous le rencontrez, il suffit de le vérifier en ligne, encore faut-il savoir comment faire )

Sans plus attendre, commençons par résumer mes notes de BS durant cette période !

1. En termes de contenu structurel, le contrôle de BS sur le contenu structurel est essentiellement contrôlé par les classes. Par exemple, le contrôle sur la structure est

<div class="container">
  <div class="row">
   <div class="col-md-4 col-xs-6">
     这一块div的类名中，是由col-md-4,col-xs-6这两个类名来控制他的框架宽度；其中col代表是栅格,md代表客户端显示器的宽度为pc中屏，同样的xs则代表客户端显示器为超小屏，也就是手机屏；4，6就代表了栅格的长度，意思就是在中屏显示器下宽度为4个栅格，在手机端宽度为6个栅格 ，一般情况下把把一整块div最多可以划成12个栅格，所以他的兄弟div在中屏下则是8个栅格！ 
   </div>
   <div class="col-md-8  text-muted">这一块div的类名中，抛去col-md-8不说，来说说text-muted.这个类则是控制这个div下的内容字体颜色的，当你把BS的css下载到本地后，你在css我文件中搜索text-muted，就会看到他的定义只有颜色，和他在一起的其他类名就分别定义了不同的颜色 </div>
  </div>
</div>

2. La structure a été mentionnée ci-dessus, parlons de certains composants spécifiques de la page. Parlons d'abord de la navigation. À l'origine, la navigation que nous avons créée était composée d'un ul de base en ligne (le css suivant peut être implémenté). en BS),

<ul class="list-inline">
  <li>W3cplus</li>
  <li>Blog</li>
  <li>CSS3</li>
  <li>jQuery</li>
  <li>PHP</li>
</ul>

Mais dans BS, il existe la classe nav pour l'implémenter, mais la classe nav doit être combinée avec d'autres classes pour faire ressortir l'effet de page, comme les pilules de navigation et les onglets de navigation. c'est dans la classe Ajouter nav-stacked

<ul class="nav nav-pill">
  <li><a href="##">Home</a></li>
  <li><a href="##">CSS3</a></li>
   <li><a href="##">Sass</a></li>
   <li><a href="##">jQuery</a></li>
   <li><a href="##">Responsive</a></li>
</ul>

3. Après avoir parlé de la barre de navigation, parlons du menu déroulant. Le menu déroulant dans BS doit s'appuyer sur un fichier js qui l'accompagne, et son propre js repose également sur JQuery, donc ceux-ci. deux fichiers sont nécessaires. Il convient d'expliquer que le code de ce menu déroulant est un peu compliqué. Le data-toggle="dropdown" dans le bouton doit être le même que le nom de la classe div externe.

<div class="dropdown">
 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  下拉菜单
  <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
 </ul>
</div>

4. Il semble qu'il soit temps de parler de formulaires. Dans le framework Bootstrap, un nom de classe `form-control` est personnalisé. En d'autres termes, si ces éléments utilisent le nom de classe "form-control", ils le feront. Obtenez des effets de personnalisation de conception.

<form role="form">
 <div class="form-group">
  <label for="exampleInputEmail1">邮箱：</label>
  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
 </div>
 <div class="form-group">
  <label for="exampleInputPassword1">密码</label>
  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
 </div>
 <div class="checkbox">
  <label>
   <input type="checkbox"> 记住密码
  </label>
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
</form>

Ce qui précède représente l'intégralité du contenu de cet article, j'espère que vous l'aimerez tous