Maison php教程 PHP开发 bootstrap布局篇详解(一)

bootstrap布局篇详解(一)

Jun 07, 2016 pm 05:22 PM
bootstrap div nbsp quot span

说到布局,有人习惯使用div+css代码来,有人喜欢Dreamweaver 可视化布局。不管你是哪一种习惯都没关系,因为bootstrap都能满足你的需求。

注意了,这个功能只能是bootstrap2.x版本的专利了,bootstrap3.x的官方还没有升级,当然了,也不是说bootstrap3.x不能使用可视化布局,只是不能直接使用,需要通过标签转化,后面我会详细讲。

bootstrap的可视化布局设置

bootstrap布局篇详解(一)

打开http://www.bootcss.com/p/layoutit/,然后拖动8 4到右边,则出现如下的效果图

bootstrap布局篇详解(一)


一个两栏的页面布局,就在”拖“的过程中完成了,是不是很轻松呢?

下载代码

点击顶端的下载,则可以把布局好的html代码复制下来

bootstrap布局篇详解(一)

<div class="container-fluid">
 <div class="row-fluid">
  <div class="span8">
  </div>
  <div class="span4">
  </div>
 </div>
</div>
Copier après la connexion

代码解释

Bootstrap默认的栅格系统为12列 ,形成一个940px宽的容器。对于简单的两列式布局,创建一个 .row 容器,并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格,所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。


小结:下载的html代码,保存在html文件,用浏览器打开是无法看到布局效果的,需要在span标类中加上css背景色才能看到。


Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Solution : Votre organisation vous demande de modifier votre code PIN Solution : Votre organisation vous demande de modifier votre code PIN Oct 04, 2023 pm 05:45 PM

Le message « Votre organisation vous a demandé de modifier votre code PIN » apparaîtra sur l'écran de connexion. Cela se produit lorsque la limite d'expiration du code PIN est atteinte sur un ordinateur utilisant les paramètres de compte basés sur l'organisation, sur lesquels ils contrôlent les appareils personnels. Cependant, si vous configurez Windows à l'aide d'un compte personnel, le message d'erreur ne devrait idéalement pas apparaître. Même si ce n'est pas toujours le cas. La plupart des utilisateurs qui rencontrent des erreurs déclarent utiliser leur compte personnel. Pourquoi mon organisation me demande-t-elle de modifier mon code PIN sous Windows 11 ? Il est possible que votre compte soit associé à une organisation et votre approche principale devrait être de le vérifier. Contacter votre administrateur de domaine peut vous aider ! De plus, des paramètres de stratégie locale mal configurés ou des clés de registre incorrectes peuvent provoquer des erreurs. Tout de suite

Comment ajuster les paramètres de bordure de fenêtre sous Windows 11 : modifier la couleur et la taille Comment ajuster les paramètres de bordure de fenêtre sous Windows 11 : modifier la couleur et la taille Sep 22, 2023 am 11:37 AM

Windows 11 met au premier plan un design frais et élégant ; l'interface moderne vous permet de personnaliser et de modifier les moindres détails, tels que les bordures des fenêtres. Dans ce guide, nous discuterons des instructions étape par étape pour vous aider à créer un environnement qui reflète votre style dans le système d'exploitation Windows. Comment modifier les paramètres de bordure de fenêtre ? Appuyez sur + pour ouvrir l'application Paramètres. WindowsJe vais dans Personnalisation et clique sur Paramètres de couleur. Changement de couleur Paramètres des bordures de fenêtre Fenêtre 11" Largeur = "643" Hauteur = "500" > Recherchez l'option Afficher la couleur d'accent sur la barre de titre et les bordures de fenêtre et activez le commutateur à côté. Pour afficher les couleurs d'accent dans le menu Démarrer et la barre des tâches Pour afficher la couleur du thème dans le menu Démarrer et la barre des tâches, activez Afficher le thème dans le menu Démarrer et la barre des tâches.

10 façons de régler la luminosité sous Windows 11 10 façons de régler la luminosité sous Windows 11 Dec 18, 2023 pm 02:21 PM

La luminosité de l’écran fait partie intégrante de l’utilisation des appareils informatiques modernes, en particulier lorsque vous regardez l’écran pendant de longues périodes. Il vous aide à réduire la fatigue oculaire, à améliorer la lisibilité et à visualiser le contenu facilement et efficacement. Cependant, en fonction de vos paramètres, il peut parfois être difficile de gérer la luminosité, notamment sous Windows 11 avec les nouvelles modifications de l'interface utilisateur. Si vous rencontrez des difficultés pour régler la luminosité, voici toutes les manières de gérer la luminosité sous Windows 11. Comment modifier la luminosité sous Windows 11 [10 méthodes expliquées] Les utilisateurs d'un seul moniteur peuvent utiliser les méthodes suivantes pour régler la luminosité sous Windows 11. Cela inclut les systèmes de bureau utilisant un seul moniteur ainsi que les ordinateurs portables. Commençons. Méthode 1 : Utiliser le Centre d'action Le Centre d'action est accessible

Comment désactiver l'authentification de navigation privée pour iPhone dans Safari ? Comment désactiver l'authentification de navigation privée pour iPhone dans Safari ? Nov 29, 2023 pm 11:21 PM

Dans iOS 17, Apple a introduit plusieurs nouvelles fonctionnalités de confidentialité et de sécurité dans son système d'exploitation mobile, dont la possibilité d'exiger une authentification à deux facteurs pour les onglets de navigation privée dans Safari. Voici comment cela fonctionne et comment le désactiver. Sur un iPhone ou un iPad exécutant iOS 17 ou iPadOS 17, le navigateur d'Apple nécessite désormais une authentification Face ID/Touch ID ou un mot de passe si un onglet de navigation privée est ouvert dans Safari, puis quittez la session ou l'application pour y accéder à nouveau. En d'autres termes, si quelqu'un met la main sur votre iPhone ou iPad alors qu'il est déverrouillé, il ne pourra toujours pas consulter votre vie privée sans connaître votre mot de passe.

Le script d'activation numérique Win10/11 MAS version 2.2 prend à nouveau en charge l'activation numérique Le script d'activation numérique Win10/11 MAS version 2.2 prend à nouveau en charge l'activation numérique Oct 16, 2023 am 08:13 AM

La célèbre version du script d'activation MAS2.2 prend à nouveau en charge l'activation numérique. La méthode provient de @asdcorp et de l'équipe. L'auteur de MAS l'appelle HWID2. Téléchargez collectosstate.exe (non original, modifié) depuis https://github.com/massgravel/Microsoft-Activation-Scripts, exécutez-le avec des paramètres et générez GenuineTicket.xml. Jetez d’abord un œil à la méthode d’origine : rassemblezstate.exePfn=xxxxxxx;DownlevelGenuineState=1, puis comparez-la avec la dernière méthode : rassemblez

Comment introduire le bootstrap dans Eclipse Comment introduire le bootstrap dans Eclipse Apr 05, 2024 am 02:30 AM

Introduisez Bootstrap dans Eclipse en cinq étapes : Téléchargez le fichier Bootstrap et décompressez-le. Importez le dossier Bootstrap dans le projet. Ajoutez une dépendance Bootstrap. Chargez Bootstrap CSS et JS dans des fichiers HTML. Commencez à utiliser Bootstrap pour améliorer votre interface utilisateur.

Comment masquer et afficher des dossiers sous Windows 11 [3 façons] Comment masquer et afficher des dossiers sous Windows 11 [3 façons] Sep 23, 2023 am 08:37 AM

Masquer des dossiers est un excellent moyen de garder votre bureau organisé. Peut-être souhaitez-vous garder vos fichiers personnels ou certaines informations sur vos clients à l'abri des regards indiscrets. Quoi qu’il en soit, la possibilité de les ranger et de les afficher si nécessaire constitue une grande économie. Bref, ces fichiers cachés n'apparaîtront pas dans le menu principal, mais ils seront toujours accessibles. C'est très simple et ne devrait pas vous prendre trop de temps. Comment masquer un dossier sous Windows 11 ? 1. Utilisez l'Explorateur de fichiers et appuyez sur la touche + pour ouvrir l'Explorateur de fichiers. WindowsE Recherchez le dossier que vous souhaitez masquer, cliquez dessus avec le bouton droit et sélectionnez Propriétés. Accédez à l'onglet Général, cochez la case Masquer, cliquez sur Appliquer, puis cliquez sur OK. Dans la boîte de dialogue suivante, cochez Appliquer les modifications à ce dossier, sous-dossier

Comment introduire une idée dans bootstrap Comment introduire une idée dans bootstrap Apr 05, 2024 am 02:33 AM

Étapes pour introduire Bootstrap dans IntelliJ IDEA : Créez un nouveau projet et sélectionnez « Application Web ». Ajoutez la dépendance Maven "Bootstrap". Créez un fichier HTML et ajoutez des références Bootstrap. Remplacez par le chemin réel du fichier CSS Bootstrap. Exécutez le fichier HTML pour utiliser les styles Bootstrap. Astuce : Vous pouvez utiliser un CDN pour importer Bootstrap ou personnaliser des modèles de fichiers HTML.

See all articles