{"id":28806,"date":"2021-05-28T19:52:00","date_gmt":"2021-05-28T16:52:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28806"},"modified":"2021-10-17T04:35:13","modified_gmt":"2021-10-17T01:35:13","slug":"hur-man-skapar-dynamisk-bootstrap-dragspel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/hur-man-skapar-dynamisk-bootstrap-dragspel\/","title":{"rendered":"Hur man skapar dynamisk Bootstrap dragspel"},"content":{"rendered":"

Dragspel (hopf\u00e4llbart inneh\u00e5ll) \u00e4r det b\u00e4sta s\u00e4ttet att v\u00e4xla (d\u00f6lja och visa) stort inneh\u00e5ll. En FAQ \u00e4r ett av de vanligaste exemplen p\u00e5 dragspel. Dragspel anv\u00e4nds f\u00f6r att visa mer data p\u00e5 mindre utrymme. Det fungerar p\u00e5 ett kollaps-expand-format. Med dragspel kan man d\u00f6lja och se inneh\u00e5ll mellan olika sektioner.<\/p>\n

Bootstrap kommer med m\u00e5nga anv\u00e4ndbara komponenter som enkelt kan integreras p\u00e5 webbplatsen. En av dem \u00e4r dragspel som vi kommer att anv\u00e4nda i denna handledning. Om du vill se hur Bootstraps dragspel fungerar, kolla in exemplet h\u00e4r<\/a>.<\/p>\n

I den h\u00e4r artikeln visar jag dig hur du skapar ett dynamiskt Bootstrap-dragspel. F\u00f6r att skapa ett dynamiskt dragspel kommer vi att h\u00e4mta resultat fr\u00e5n databasen och skapa dragspel med dessa poster.<\/p>\n

Hur man l\u00e4gger till statisk Bootstrap-dragspel p\u00e5 webbplatsen<\/h3>\n

Att l\u00e4gga till det statiska Bootstrap-dragspelet p\u00e5 webbplatsen \u00e4r super enkelt. Du beh\u00f6ver bara kopiera k\u00e4llkoden fr\u00e5n Bootstrap och placera den var du vill visa dragspel. Nedan \u00e4r exempelkoden f\u00f6r att l\u00e4gga till en statisk bootstrap-dragspel.<\/p>\n

<html>\n<head>\n\u00a0\u00a0\u00a0\u00a0<title>Accordion Examples<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css\" integrity=\"sha384-ggOyR0iXCbMQv3Xipma34MD+dH\/1fQ784\/j6cY\/iJTQUOhcWr7x9JvoRxT2MZw1T\" crossorigin=\"anonymous\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<div class=\"accordion\" id=\"accordionExample\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card-header\" id=\"headingOne\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2 class=\"mb-0\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button class=\"btn btn-link\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapseOne\" aria-expanded=\"true\" aria-controls=\"collapseOne\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Collapsible Group Item #1\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/h2>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div id=\"collapseOne\" class=\"collapse show\" aria-labelledby=\"headingOne\" data-parent=\"#accordionExample\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card-body\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card-header\" id=\"headingTwo\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2 class=\"mb-0\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button class=\"btn btn-link collapsed\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapseTwo\" aria-expanded=\"false\" aria-controls=\"collapseTwo\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Collapsible Group Item #2\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/h2>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div id=\"collapseTwo\" class=\"collapse\" aria-labelledby=\"headingTwo\" data-parent=\"#accordionExample\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card-body\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/code.jquery.com\/jquery-3.3.1.slim.min.js\" integrity=\"sha384-q8i\/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo\" crossorigin=\"anonymous\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/js\/bootstrap.min.js\" integrity=\"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf\/nJGzIxFDsf4x0xIM+B07jRM\" crossorigin=\"anonymous\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
Ovanst\u00e5ende kod visar statisk Bootstrap-dragspel p\u00e5 din webbsida. Om du f\u00f6redrar att anv\u00e4nda den med statiskt inneh\u00e5ll beh\u00f6ver du bara \u00e4ndra titeln och inneh\u00e5llet fr\u00e5n ovanst\u00e5ende HTML.<\/p>\n
Syftet med denna handledning \u00e4r dock att skapa ett dynamiskt Bootstrap-dragspel. S\u00e5 l\u00e4s vidare, jag visar dig hur i n\u00e4sta steg.<\/p>\n
Komma ig\u00e5ng<\/h3>\n
L\u00e5t oss anta att du m\u00e5ste visa vanliga fr\u00e5gor enligt dragspel. F\u00f6r vanliga fr\u00e5gor beh\u00f6ver vi en databastabell fylld med n\u00e5gra dummyposter. S\u00e5 skapa en databas som heter ’bootstrap’ och k\u00f6r fr\u00e5gan nedan f\u00f6r att skapa en tabell inuti den.<\/p>\n
CREATE TABLE `faq` (\u00a0`id` int(11) NOT NULL AUTO_INCREMENT,\n\u00a0`title` text NOT NULL,\n\u00a0`content` text NOT NULL,\n\u00a0PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=latin1;<\/code><\/pre>\n
Efter att du har skapat en tabell, l\u00e5t oss l\u00e4gga till n\u00e5gra dummy-poster i den. Dessa dummy-poster kommer att anv\u00e4ndas f\u00f6r att skapa ett dynamiskt dragspel.<\/p>\n
INSERT INTO `faq` (`id`, `title`, `content`) VALUES\n(1, 'Question 1', 'This is answer 1.'),\n(2, 'Question 2', 'This is answer 2.'),\n(3, 'Question 3', 'This is answer 3.');<\/code><\/pre>\n
N\u00e4sta del \u00e4r att skriva kod f\u00f6r anslutning av en databas i PHP. Skapa en fil index.php<\/code>och l\u00e4gg till anslutningskod enligt nedan.<\/p>\n
$con = mysqli_connect(\"localhost\", \"MYSQL_USERNAME\", \"MYSQL_PASSWORD\", \"bootstrap\");\n\u00a0\n\/\/ Check connection\nif (mysqli_connect_errno()) {\n\u00a0\u00a0\u00a0\u00a0echo \"Failed to connect to MySQL: \". mysqli_connect_error();\n}<\/code><\/pre>\n
N\u00e4r du har anslutit databasen framg\u00e5ngsrikt, h\u00e4mta resultatet fr\u00e5n databastabellen som vi beh\u00f6ver omedelbart.<\/p>\n
$sql = \"SELECT * FROM faq ORDER BY id DESC\";\n$result = mysqli_query($con,$sql);<\/code><\/pre>\n
Skapa ett dynamiskt Bootstrap-dragspel<\/h3>\n
Du har h\u00e4mtat posterna fr\u00e5n databastabellen och tilldelat dem till PHP-variabeln $result<\/code>. Vi kommer att g\u00e5 igenom denna variabel och g\u00f6ra saker dynamiska.<\/p>\n
Om du noggrant tittar p\u00e5 dragspelets HTML-kod kommer du att m\u00e4rka att samma typ av markering upprepas. Samtidigt som vi g\u00f6r det dynamiskt m\u00e5ste vi justera n\u00e5gra av attributen som id, klass, aria-expanderad, aria-kontroller, etc i denna markering.<\/p>\n
Nedan \u00e4r koden som genererar ett dynamiskt Bootstrap-dragspel.<\/p>\n
<div class=\"accordion\" id=\"accordionExample\">\n\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0$i=1;\n\u00a0\u00a0\u00a0\u00a0while($row = mysqli_fetch_assoc($result)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card-header\" id=\"heading<?php echo $i; ?>\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2 class=\"mb-0\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button class=\"btn btn-link <?php if($i>1) echo \"collapsed\"; ?>\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapse<?php echo $i; ?>\" aria-expanded=\"<?php echo ($i==1)? 'true': 'false'; ?>\" aria-controls=\"collapse<?php echo $i; ?>\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php echo $row['title']; ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/h2>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div id=\"collapse<?php echo $i; ?>\" class=\"collapse <?php if($i==1) echo 'show'; ?>\" aria-labelledby=\"heading<?php echo $i; ?>\" data-parent=\"#accordionExample\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card-body\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php echo $row['content']; ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$i++;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0?>\n<\/div><\/code><\/pre>\n
V\u00e5r slutliga kod \u00e4r som f\u00f6ljer.<\/p>\n
<?php\n$con = mysqli_connect(\"localhost\", \"root\", \"\", \"bootstrap\");\n\u00a0\n\/\/ Check connection\nif (mysqli_connect_errno()) {\n\u00a0\u00a0\u00a0\u00a0echo \"Failed to connect to MySQL: \". mysqli_connect_error();\n}\n\u00a0\n$sql = \"SELECT * FROM faq ORDER BY id DESC\";\n$result = mysqli_query($con,$sql);\n?>\n\u00a0\n<html>\n<head>\n\u00a0\u00a0\u00a0\u00a0<title>Accordion Examples<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css\" \/>\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<div class=\"accordion\" id=\"accordionExample\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$i=1;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0while($row = mysqli_fetch_assoc($result)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card-header\" id=\"heading<?php echo $i; ?>\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2 class=\"mb-0\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button class=\"btn btn-link <?php if($i>1) echo \"collapsed\"; ?>\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapse<?php echo $i; ?>\" aria-expanded=\"<?php echo ($i==1)? 'true': 'false'; ?>\" aria-controls=\"collapse<?php echo $i; ?>\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php echo $row['title']; ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/h2>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div id=\"collapse<?php echo $i; ?>\" class=\"collapse <?php if($i==1) echo 'show'; ?>\" aria-labelledby=\"heading<?php echo $i; ?>\" data-parent=\"#accordionExample\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card-body\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php echo $row['content']; ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$i++;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/code.jquery.com\/jquery-3.3.1.slim.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/js\/bootstrap.min.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
Det \u00e4r allt! Jag hoppas att du f\u00f6rst\u00e5r hur du skapar ett dynamiskt Bootstrap-dragspel. Dela dina tankar och f\u00f6rslag i kommentarsektionen nedan.<\/p>\n
relaterade artiklar<\/h4>\n