add bootstrap

This commit is contained in:
aslan 2024-06-19 16:46:09 +03:00
parent 502bc49042
commit 13b17d0292
12 changed files with 206 additions and 5 deletions

View File

@ -7,7 +7,8 @@
"require": { "require": {
"php": "^8.3", "php": "^8.3",
"laravel/framework": "^11.11.0", "laravel/framework": "^11.11.0",
"laravel/tinker": "^2.9.0" "laravel/tinker": "^2.9.0",
"laravel/ui": "^4.5"
}, },
"require-dev": { "require-dev": {
"fakerphp/faker": "^1.23.1", "fakerphp/faker": "^1.23.1",

62
composer.lock generated
View File

@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically" "This file is @generated automatically"
], ],
"content-hash": "73f44fbd87d96963c111fa8e12ea0da9", "content-hash": "ffaf61243231b9c2c37ca72d32ca8734",
"packages": [ "packages": [
{ {
"name": "brick/math", "name": "brick/math",
@ -1371,6 +1371,66 @@
], ],
"time": "2024-01-04T16:10:04+00:00" "time": "2024-01-04T16:10:04+00:00"
}, },
{
"name": "laravel/ui",
"version": "v4.5.2",
"source": {
"type": "git",
"url": "https://github.com/laravel/ui.git",
"reference": "c75396f63268c95b053c8e4814eb70e0875e9628"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/laravel/ui/zipball/c75396f63268c95b053c8e4814eb70e0875e9628",
"reference": "c75396f63268c95b053c8e4814eb70e0875e9628",
"shasum": ""
},
"require": {
"illuminate/console": "^9.21|^10.0|^11.0",
"illuminate/filesystem": "^9.21|^10.0|^11.0",
"illuminate/support": "^9.21|^10.0|^11.0",
"illuminate/validation": "^9.21|^10.0|^11.0",
"php": "^8.0",
"symfony/console": "^6.0|^7.0"
},
"require-dev": {
"orchestra/testbench": "^7.35|^8.15|^9.0",
"phpunit/phpunit": "^9.3|^10.4|^11.0"
},
"type": "library",
"extra": {
"branch-alias": {
"dev-master": "4.x-dev"
},
"laravel": {
"providers": [
"Laravel\\Ui\\UiServiceProvider"
]
}
},
"autoload": {
"psr-4": {
"Laravel\\Ui\\": "src/",
"Illuminate\\Foundation\\Auth\\": "auth-backend/"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Taylor Otwell",
"email": "taylor@laravel.com"
}
],
"description": "Laravel UI utilities and presets.",
"keywords": [
"laravel",
"ui"
],
"time": "2024-05-08T18:07:10+00:00"
},
{ {
"name": "league/commonmark", "name": "league/commonmark",
"version": "2.4.2", "version": "2.4.2",

59
package-lock.json generated
View File

@ -5,12 +5,15 @@
"packages": { "packages": {
"": { "": {
"devDependencies": { "devDependencies": {
"@popperjs/core": "^2.11.6",
"@tailwindcss/forms": "^0.5.2", "@tailwindcss/forms": "^0.5.2",
"alpinejs": "^3.4.2", "alpinejs": "^3.4.2",
"autoprefixer": "^10.4.2", "autoprefixer": "^10.4.2",
"axios": "^1.6.4", "axios": "^1.6.4",
"bootstrap": "^5.2.3",
"laravel-vite-plugin": "^1.0", "laravel-vite-plugin": "^1.0",
"postcss": "^8.4.31", "postcss": "^8.4.31",
"sass": "^1.56.1",
"tailwindcss": "^3.1.0", "tailwindcss": "^3.1.0",
"vite": "^5.0" "vite": "^5.0"
} }
@ -516,6 +519,17 @@
"node": ">=14" "node": ">=14"
} }
}, },
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"dev": true,
"license": "MIT",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@rollup/rollup-android-arm-eabi": { "node_modules/@rollup/rollup-android-arm-eabi": {
"version": "4.14.3", "version": "4.14.3",
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.3.tgz", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.3.tgz",
@ -899,6 +913,26 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/bootstrap": {
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
"integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
"dev": true,
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/twbs"
},
{
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
}
],
"license": "MIT",
"peerDependencies": {
"@popperjs/core": "^2.11.8"
}
},
"node_modules/brace-expansion": { "node_modules/brace-expansion": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@ -1378,6 +1412,13 @@
"node": ">= 0.4" "node": ">= 0.4"
} }
}, },
"node_modules/immutable": {
"version": "4.3.6",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",
"integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==",
"dev": true,
"license": "MIT"
},
"node_modules/is-binary-path": { "node_modules/is-binary-path": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@ -2061,6 +2102,24 @@
"queue-microtask": "^1.2.2" "queue-microtask": "^1.2.2"
} }
}, },
"node_modules/sass": {
"version": "1.77.6",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.77.6.tgz",
"integrity": "sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==",
"dev": true,
"license": "MIT",
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/shebang-command": { "node_modules/shebang-command": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",

View File

@ -6,12 +6,15 @@
"build": "vite build" "build": "vite build"
}, },
"devDependencies": { "devDependencies": {
"@popperjs/core": "^2.11.6",
"@tailwindcss/forms": "^0.5.2", "@tailwindcss/forms": "^0.5.2",
"alpinejs": "^3.4.2", "alpinejs": "^3.4.2",
"autoprefixer": "^10.4.2", "autoprefixer": "^10.4.2",
"axios": "^1.6.4", "axios": "^1.6.4",
"bootstrap": "^5.2.3",
"laravel-vite-plugin": "^1.0", "laravel-vite-plugin": "^1.0",
"postcss": "^8.4.31", "postcss": "^8.4.31",
"sass": "^1.56.1",
"tailwindcss": "^3.1.0", "tailwindcss": "^3.1.0",
"vite": "^5.0" "vite": "^5.0"
} }

View File

@ -1,4 +1,5 @@
import './bootstrap'; import './bootstrap';
import '../css/app.css'
import Alpine from 'alpinejs'; import Alpine from 'alpinejs';

View File

@ -1,4 +1,34 @@
import 'bootstrap';
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
import axios from 'axios'; import axios from 'axios';
window.axios = axios; window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo';
// import Pusher from 'pusher-js';
// window.Pusher = Pusher;
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: import.meta.env.VITE_PUSHER_APP_KEY,
// cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
// wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
// wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
// wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
// forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
// enabledTransports: ['ws', 'wss'],
// });

View File

@ -0,0 +1,7 @@
// Body
$body-bg: #fff;
// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

8
resources/sass/app.scss Normal file
View File

@ -0,0 +1,8 @@
// Fonts
@import url('https://fonts.bunny.net/css?family=Nunito');
// Variables
@import 'variables';
// Bootstrap
@import 'bootstrap/scss/bootstrap';

View File

@ -14,4 +14,36 @@
</div> </div>
</div> </div>
</div> </div>
<div class="container">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</x-app-layout> </x-app-layout>

View File

@ -12,7 +12,7 @@
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" /> <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-- Scripts --> <!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js']) @vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head> </head>
<body class="font-sans antialiased"> <body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100 dark:bg-gray-900"> <div class="min-h-screen bg-gray-100 dark:bg-gray-900">

View File

@ -12,7 +12,7 @@
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" /> <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-- Scripts --> <!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js']) @vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head> </head>
<body class="font-sans text-gray-900 antialiased"> <body class="font-sans text-gray-900 antialiased">
<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100 dark:bg-gray-900"> <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100 dark:bg-gray-900">

View File

@ -5,7 +5,7 @@ export default defineConfig({
plugins: [ plugins: [
laravel({ laravel({
input: [ input: [
'resources/css/app.css', 'resources/sass/app.scss',
'resources/js/app.js', 'resources/js/app.js',
], ],
refresh: true, refresh: true,