কীভাবে বুটস্ট্র্যাপ সিএসএস এবং জেএসকে রিএ্যাকটিজস অ্যাপে অন্তর্ভুক্ত করবেন?

Question

আমি রিএ্যাকটিজে নতুন, আমি আমার প্রতিক্রিয়া অ্যাপে বুটস্ট্র্যাপ অন্তর্ভুক্ত করতে চাই

আমি বুটস্ট্র্যাপ ইনস্টল করেছি npm install bootstrap --save

এখন, আমার প্রতিক্রিয়া অ্যাপটিতে বুটস্ট্র্যাপ সিএসএস এবং জেএস লোড করতে চাই।

আমি ওয়েবপ্যাক ব্যবহার করছি।

webpack.config.js

var config = {
    entry: './src/index',

    output: {
        path: './',
        filename: 'index.js'
    },

    devServer: {
        inline: true,
        port: 8080,
        historyApiFallback: true,
        contentBase:'./src'
    },

    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                loader: 'babel',

                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
};

module.exports = config;

আমার সমস্যাটি হ'ল নোড_মডিউলগুলি থেকে কীভাবে বুটস্ট্র্যাপ সিএসএস এবং জেএসকে রেক্টজ অ্যাপে অন্তর্ভুক্ত করা যায়? " আমার প্রতিক্রিয়া অ্যাপটিতে অন্তর্ভুক্ত করার জন্য কীভাবে বুটস্ট্র্যাপ সেটআপ করবেন?

Comments

আপনি কি ব্যাকএন্ডে নোড.জেএস ব্যবহার করছেন?

— ড্যানিয়েল খান

আপনার HTML পৃষ্ঠায় কেবল বুটস্ট্র্যাপ ফাইলগুলি আমদানি করুন

— মিস্টালিস

@ ড্যানিয়েল খান: না, আমি নোড.জেএস ব্যবহার করছি না

— মেহুল মালি

আপনি কি বুটস্ট্র্যাপের কম সংস্করণ বা কেবল প্লেইন সিএসএস ব্যবহার করছেন? আধুনিকতার জন্য কেবল সিডিএন সংস্করণ ব্যবহার করে সিএসএস অন্তর্ভুক্ত করুন এবং জাভাস্ক্রিপ্ট অংশের জন্য আমাদের বুটস্ট্র্যাপ প্রতিক্রিয়া জানায়।

— ড্যানিয়েল খান

@ ড্যানিয়েল খান আমি প্লেইন সিএসএস ব্যবহার করেছি। আমি সিডিএন করতে চাই না। আমি নোড_মডিউলগুলি থেকে বুটস্ট্র্যাপ ব্যবহার করতে চাই।

— মেহুল মালি

Answer 1

আপনি যদি প্রতিক্রিয়ার ক্ষেত্রে নতুন এবং create-react-appক্লাইপ সেটআপ ব্যবহার করছেন তবে বুটস্ট্র্যাপের সর্বশেষ সংস্করণটি অন্তর্ভুক্ত করতে নীচের এনপিএম কমান্ডটি চালান ।

npm install --save bootstrap

অথবা

npm install --save bootstrap@latest

তারপরে index.jsফাইলটিতে নিম্নলিখিত আমদানি বিবৃতি যুক্ত করুন। ( https://getbootstrap.com/docs/4.4/getting-started/webpack/#importing-compiled-css )

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

অথবা

import 'bootstrap/dist/css/bootstrap.min.css';

classNameলক্ষ্য উপাদানগুলিতে অ্যাট্রিবিউট হিসাবে ব্যবহার করতে ভুলবেন না ( classNameপরিবর্তে অ্যাট্রিবিউট হিসাবে ব্যবহার হিসাবে প্রতিক্রিয়া class)।

Comments

আপনি যদি বুটস্ট্র্যাপ 4 ব্যবহার করতে চান তবে নিম্নলিখিত কমান্ডটি ব্যবহার করুন: এনপিএম ইনস্টল করুন বুটস্ট্রাপ@4.0.0-alpha.6 --save (এখন পর্যন্ত ইনস্টল কমান্ড বুটস্ট্র্যাপের শেষ স্থিতিশীল সংস্করণটি ইনস্টল করবে, যা 3.3.7)

— ল্যাংট

Relative imports outside of src/ are not supported.

— রিভ

আমি কেন এটি কেবল এইচটিএমএল টেমপ্লেটে লিঙ্ক দিচ্ছি না

— আইকানকিন্ডঅফকোড

সমাধানটি এখানে বর্ণিত হয়েছে: github.com/facebook/create-react-app/issues/301

— এনরিকো গিউরিন

জেএস ফাইল সম্পর্কে কী? jquery bootstrap.js

— মলিখ

Answer 2

এনপিএম এর মাধ্যমে , আপনি ভোলানো চালাবেন

npm install bootstrap jquery --save
npm install css-loader style-loader --save-dev

বুটস্ট্র্যাপ 4 হলে পপ্পার.জেগুলিও যুক্ত করুন

npm install popper.js --save

আপনার ওয়েবপ্যাক কনফিগার loaders: [ অ্যারেতে নিম্নলিখিতগুলি (একটি নতুন অবজেক্ট হিসাবে) যুক্ত করুন

{
  test: /\.css$/,
  loader: 'style-loader!css-loader'
}

আপনার সূচক বা বিন্যাসে নিম্নলিখিতগুলি যুক্ত করুন

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';

Comments

আপ টু ডেট উত্তর +1

— সুসিন পিভি

Answer 3

আপনি প্রতিক্রিয়া অ্যাপ্লিকেশনে বুটস্ট্র্যাপ জ্যাকুয়ারি ভিত্তিক জাভাস্ক্রিপ্ট উপাদানগুলি ব্যবহার করতে পারবেন না, কারণ যে কোনও কিছু যা প্রতিক্রিয়ার বাইরে ডমকে চালিত করার চেষ্টা করে তাকে খারাপ অভ্যাস হিসাবে বিবেচনা করা হয়। এখানে আপনি এটি সম্পর্কে আরও তথ্য পড়তে পারেন ।

আপনার প্রতিক্রিয়া অ্যাপটিতে কীভাবে বুটস্ট্র্যাপ অন্তর্ভুক্ত করবেন:

1) প্রস্তাবিত । অন্যান্য উত্তরগুলি নির্দিষ্ট করে আপনি বুটস্ট্র্যাপের কাঁচা সিএসএস ফাইলগুলি অন্তর্ভুক্ত করতে পারেন।

2) প্রতিক্রিয়া-বুটস্ট্র্যাপ লাইব্রেরি একবার দেখুন। এটি একচেটিয়াভাবে প্রতিক্রিয়া জন্য লেখা হয়।

3) বুটস্ট্র্যাপ 4 এর জন্য রিঅ্যাক্সট্র্যাপ রয়েছে

বোনাস

এই দিনগুলিতে আমি সাধারণত বুটস্ট্র্যাপ লাইব্রেরিগুলি এড়িয়ে চলি যা উপাদানগুলি ব্যবহার করার জন্য প্রস্তুত করে (উপরে বর্ণিত প্রতিক্রিয়া-বুটস্ট্র্যাপ বা রিঅ্যাকট্র্যাপ এবং আরও কিছু)। আপনি যেগুলি গ্রহণ করেন সেগুলির উপর আপনি নির্ভরশীল হয়ে উঠলে (আপনি তাদের অভ্যন্তরে কাস্টম আচরণ যুক্ত করতে পারবেন না) এবং এই উপাদানগুলি উত্পাদিত ডোমের উপর আপনি নিয়ন্ত্রণ হারাবেন।

সুতরাং হয় কেবল বুটস্ট্র্যাপ সিএসএস ব্যবহার করুন বা বুটস্ট্র্যাপটি ছেড়ে দিন। থাম্বের একটি সাধারণ নিয়ম হ'ল: আপনার এটির প্রয়োজন কিনা তা যদি নিশ্চিত না হন তবে আপনার এটি প্রয়োজন নেই। আমি প্রচুর অ্যাপ্লিকেশন দেখেছি যার মধ্যে বুটস্ট্র্যাপ অন্তর্ভুক্ত রয়েছে তবে এর একমাত্র অল্প পরিমাণ সিএসএস ব্যবহার করে এবং কখনও কখনও এই সিএসএসের বেশিরভাগটি কাস্টম শৈলীর দ্বারা ওভাররাইড করা হয়।

Comments

বিকল্প 1) সহ, আপনি কীভাবে বুটস্ট্র্যাপ জাভাস্ক্রিপ্ট (এবং jquery) অন্তর্ভুক্ত করবেন? না আপনি না?

— লর্ডআলাপাকা

দুর্ভাগ্যক্রমে বুটস্ট্র্যাপ 4 টি এখনও প্রতিক্রিয়া জানায় না বা রিয়েলট্র্যাপ সমর্থন করে না।

— জিম

"ছেড়ে দিন বুটস্ট্র্যাপ" একটি দুর্দান্ত व्यवहार्य বিকল্প। দুর্দান্ত পরামর্শ।

@ জিম এখন তারা কি!

— মারিয়ানা এস।

Answer 4

আপনি importযেখানে খুশি সেখানে কেবল সিএসএস ফাইল করতে পারেন। আপনি প্রয়োজনীয় হিসাবে লোডারটি কনফিগার করলে ওয়েবপ্যাক সিএসএস বান্ডিল করার জন্য যত্ন নেবে।

কিছুটা এইরকম,

import 'bootstrap/dist/css/bootstrap.css';

এবং ওয়েবপ্যাক কনফিগারেশন যেমন,

loaders: [{ test: /\.css$/, loader: 'style-loader!css-loader' }]

দ্রষ্টব্য: আপনার পাশাপাশি ফন্ট লোডার যুক্ত করতে হবে, অন্যথায় আপনি ত্রুটি পাচ্ছেন।

Comments

উত্তর দেওয়ার জন্য ধন্যবাদ. স্টাইল-লোডার এবং সিএসএস-লোডারের জন্য কোনও এনপিএম মডিউল দরকার?

— মেহুল মালি

হ্যাঁ ব্যবহার style-loader css-loaderলোডারগুলি ব্যবহার করুন

— থাডিক্কারন

ঠিক আছে, এখন ওয়েবপ্যাকটি কী তা দেখার জন্য (এটি একটি সামান্য জিনিস যেমন কিছু অন্তর্ভুক্ত করা এবং এটি শিখার জন্য ভয়ঙ্কর অন্য জেএস-জিনিস হিসাবে পরিণত হয়েছিল), এখন আমার অভ্যাসটি আমার টিউটোরিয়াল অ্যাপ্লিকেশনটিতে একটি বুটস্ট্র্যাপ 3 স্টাইল বোতাম ব্যবহার করা ছিল .... এখন আমি চাইতাম না 'টি

— জে.গুইরিন

@ J.Guarin আপনি ব্যবহার করছেন কিনা তা ফেসবুকের তৈরি-প্রতিক্রিয়া-অ্যাপ এটা সেট আপ করবে webpackসঙ্গে style-loaderআপনার জন্য।

— পিটার ডাব্লু

Answer 5

আমারও একই অবস্থা ছিল। আমার সেটআপটি নীচে নির্দেশিত হিসাবে ছিল

npm install create-react-app

এটি আপনাকে শুরু করতে একটি বয়লার-প্লেট কোড সেটআপ সরবরাহ করবে। মূল যুক্তির জন্য App.js ফাইলটি নিয়ে প্রায় খেলুন।

পরে আপনি সিএলআই সরঞ্জাম দ্বারা নির্মিত ইনডেক্স। Html এ বুটস্ট্র্যাপ সিডিএন ব্যবহার করতে পারেন। অথবা

npm install bootstrap popper jquery

এবং তারপরে এটিকে কেবল App.js ফাইলে অন্তর্ভুক্ত করুন।

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.bundle'

খুব কম লেখকই ক্লাসের পরিবর্তে ক্লাসনেম অ্যাট্রিবিউট ব্যবহার করে উল্লেখ করেছেন, তবে আমার ক্ষেত্রে, দুজনেই নীচের মতো কাজ করছিলেন। তবে আপনি যদি ক্লাস ব্যবহার করেন এবং ব্রাউজারে বিকাশকারী সরঞ্জামগুলিতে কনসোলটি দেখেন, আপনি ক্লাস ব্যবহারের জন্য ত্রুটি দেখতে পাবেন o সুতরাং পরিবর্তে শ্রেণিকাম ব্যবহার করুন।

    <div className="App" class = "container"> //dont use class attribute

এবং বুটস্ট্র্যাপের সাথে বিরোধগুলি এড়াতে ডিফল্ট সিএসএস আমদানি সরিয়ে দিতে ভুলবেন না।

আশা করি যে সাহায্য করবে, শুভ কোডিং !!!

Answer 6

প্রতিক্রিয়া সহ বুটস্ট্র্যাপ ব্যবহার করতে দয়া করে নীচের লিঙ্কটি অনুসরণ করুন। https://react-bootstrap.github.io/

ইনস্টলেশন জন্য:

$ npm install --save react react-dom
$ npm install --save react-bootstrap

------------------------------------ বা ------------- ------------------------

প্রতিক্রিয়াতে index.html ফাইলের ট্যাগে সিএসএসের জন্য বুটস্ট্র্যাপ সিডিএন রাখুন এবং সূচিপত্র HTML ফাইলের জেএসের জন্য বুটস্ট্র্যাপ সিডিএন রাখুন। Index.html এর নীচে শ্রেণীর অনুসরণের পরিবর্তে ClassName ব্যবহার করুন

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="../src/images/dropbox_logo.svg">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">




  </head>
  <body>

    <div id="root"></div>

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

  </body>
</html>

Comments

আপনার দেওয়া লিঙ্কটি মারা গেছে

— ডেভিড

ওহে ডেভিড, সিএসএসের জন্য বুটস্ট্র্যাপ সিডিএন রাখুন << হেড> ট্যাগের ইনডেক্স.জেএস ফাইলের ট্যাগে রিট্যাক্টে এবং বুটস্ট্র্যাপ সিডিএন জেএসের জন্য <body> ইনডেক্স.জেএস ফাইলের ট্যাগে। ক্লাসের ClassName ইনস্ট্র্যাড ব্যবহার করুন।

— আদিত্য পরমার

Answer 7

আপনাকে jquery এবং বুটস্ট্র্যাপ দেওয়ার সম্পূর্ণ উত্তর যেহেতু jquery বুটস্ট্র্যাপ.জেএস এর জন্য প্রয়োজনীয়:

নোড_মডিউলগুলিতে jquery এবং বুটস্ট্র্যাপ ইনস্টল করুন:

npm install bootstrap
npm install jquery

এই সঠিক ফাইলপথটি ব্যবহার করে আপনার উপাদানগুলিতে আমদানি করুন:

import 'jquery/src/jquery'; //for bootstrap.min.js
//bootstrap-theme file for bootstrap 3 only
import 'bootstrap/dist/css/bootstrap-theme.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';

Comments

আমার jquery আমদানি করার দরকার নেই, এটি কেবল এনপিএম দিয়ে ইনস্টল করুন। আমি মনে করি বুটস্ট্র্যাপ এটিকে নিজেই লোড করে

— ম্যাডাকল

বুটস্ট্র্যাপ 3-এ আপনার কিছু কার্যকারিতার জন্য

— জ্যাকেইরি বোঝা দরকার

আপনি যদি বুটস্ট্র্যাপ ৪.৪.১ ব্যবহার করেন তবে আপনাকে popper.jsএনপিএম মডিউলও ইনস্টল করতে হবে যা দ্বারা উল্লেখ করা হয়েছে 'bootstrap/dist/js/bootstrap.min.js'।

— বিনিতা ভারতী

উত্তম উত্তর, বুটস্ট্র্যাপ 3 নিয়ে এবং এটি সংশোধন করার import 'jquery/src/jquery'পরিবর্তে ব্যবহার করে এই সমস্যার মধ্যে import 'jquery'পড়ে

— সাইফার

Answer 8

npm install --save bootstrap 

এবং এই আমদানি বিবৃতিটি আপনার index.js ফাইলে যুক্ত করুন

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

অথবা আপনি কেবল আপনার সূচি html ফাইলে সিডিএন যুক্ত করতে পারেন।

Comments

jquery সম্পর্কে কি?

— ভালরব

আপনার প্রকল্পে জ্যাকোরি যুক্ত করতে @ ভলরব: এনপিএম আই জ্যাকুয়ারি - সেভ করুন 'জ্যাকুয়ারি' থেকে import আমদানি করুন

— নিখিল

Answer 9

আশা করি এটি সহায়ক;)

পদক্ষেপ 1: এনপিএম ব্যবহার করে এই বেলো কমান্ডটি ইনস্টল করুন

npm install --save reactstrap@next react react-dom

পদক্ষেপ 2: উদাহরণস্বরূপ index.js প্রধান স্ক্রিপ্ট আমদানি বেলো কমান্ড

import 'bootstrap/dist/css/bootstrap.min.css';

পদক্ষেপ 3: ইউআই উপাদানগুলি বেলো ওয়েবসাইটগুলি রিয়েলসট্র্যাপ.github.io উল্লেখ করে

Answer 10

আপনি এটি মাধ্যমে dirctly ইনস্টল করতে পারেন

$ npm install --save react react-dom
$ npm install --save react-bootstrap

তারপরে বুটস্ট্র্যাপ থেকে আপনার যা প্রয়োজন তা আমদানি করুন:

import Button from 'react-bootstrap/lib/Button';

// বা

import  Button  from 'react-bootstrap';

এবং আপনি ইনস্টল করতে পারেন:

npm install --save reactstrap@next react react-dom

এই চেক আউট এখানে ক্লিক ।

এবং সিএসএসের জন্য আপনি এই লিঙ্কটি কারফুলিও পড়তে পারেন

এখানে পড়ুন

Answer 11

আপনার প্রকল্পের "npm ইনস্টল --save bootstrap@3.3.7" বুটস্ট্র্যাপ ইনস্টল করার পরে আপনাকে প্রজেক্ট এসআরসি ফোল্ডারে index.js ফাইলটিতে যেতে হবে এবং নোড মডিউল প্যাকেজ থেকে বুটস্ট্র্যাপ আমদানি করতে হবে।

আমদানি করুন 'বুটস্ট্র্যাপ / ডিস / সিএসএস / বুটস্ট্র্যাপ.মিন.সিএসএস';

আপনি যদি পছন্দ করেন তবে এই ভিডিওটি থেকে সহায়তা পেতে পারেন, নিশ্চিত এটি আপনাকে অনেক সাহায্য করবে।

প্রতিক্রিয়া প্রকল্পে বুটস্ট্র্যাপ আমদানি করুন

Answer 12

আমি নির্দেশ দিয়ে চেষ্টা:

npm install bootstrap
npm install jquery popper.js

তারপরে src / index.js এ:

import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<Dropdown />, document.getElementById('root'));
registerServiceWorker();

Answer 13

শুধু যদি আপনি ব্যবহার করতে পারেন yarn যা প্রতিক্রিয়া অ্যাপ্লিকেশনগুলির জন্য প্রস্তাবিত হয়,

আপনি করতে পারেন,

yarn add bootstrap@4.1.1 // this is to add bootstrap with a specific  version

এটি আপনার package.jsonপাশাপাশি নির্ভরতা হিসাবে বুটস্ট্র্যাপ যুক্ত করবে ।

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "4.1.1", // it will add an entry here
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts": "1.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

এর পরে bootstrapআপনার index.jsফাইলটিতে কেবল আমদানি করুন।

import 'bootstrap/dist/css/bootstrap.css';

Answer 14

যেহেতু বুটস্ট্র্যাপ / রিয়েটস্ক্র্যাপ তাদের সর্বশেষ সংস্করণ অর্থাৎ বুটস্ট্র্যাপ 4 প্রকাশ করেছে আপনি এই পদক্ষেপগুলি অনুসরণ করে এটি ব্যবহার করতে পারেন

1. আপনার প্রকল্পে নেভিগেট করুন
2. টার্মিনালটি খুলুন

3. আমি ধরে নিলাম এনপিএম ইতিমধ্যে ইনস্টল করা আছে এবং তারপরে নিম্নলিখিত কমান্ডটি টাইপ করুন

   npm install --save reactstrap react react-dom

এটি আপনার প্রকল্পের নির্ভরতা হিসাবে রেক্টসট্র্যাপ ইনস্টল করবে।

রিয়েটস ট্র্যাপ ব্যবহার করে তৈরি করা বোতামের কোড এখানে

import React from 'react';
import { Button } from 'reactstrap';

export default (props) => {
  return (
    <Button color="danger">Danger!</Button>
  );
};

আপনি তাদের অফিশিয়াল পৃষ্ঠাটিতে গিয়ে রিট্যাকস ট্র্যাপ চেক করতে পারেন

Answer 15

কোনওভাবে গৃহীত উত্তরটি কেবল বুটস্ট্র্যাপ থেকে সিএসএস ফাইল অন্তর্ভুক্ত করার বিষয়ে কথা বলছে।

তবে আমি মনে করি এই প্রশ্নটি এখানে একটির সাথে সম্পর্কিত - বুটস্ট্র্যাপ ড্রপডাউন প্রতিক্রিয়াতে কাজ করছে না

এমন বেশ কয়েকটি উত্তর রয়েছে যা সহায়তা করতে পারে -

1. https://stackoverflow.com/a/52251319/4266842
2. https://stackoverflow.com/a/54188034/4266842

Answer 16

আপনি যদি আপনার প্রকল্পে সিআরএ (ক্রিয়েট-রিঅ্যাক্ট-অ্যাপ) ব্যবহার করেন তবে আপনি এটি যুক্ত করতে পারেন:

npm install react-bootstrap bootstrap

আপনি যদি নিজের অ্যাপ্লিকেশন বুটস্ট্র্যাপ ব্যবহার করেন এবং যদি এটি কাজ না করে থাকে তবে এটি সূচী HTML এ ব্যবহার করুন:

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
  integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
  crossorigin="anonymous"
/>

অনুরূপ সমস্যা সমাধানের জন্য আমি উপরেরটি করেছি। আশা করি এটি আপনার জন্য দরকারী :-)

Answer 17

আমি কেবল যুক্ত করতে চাই যে আপনার index.js ফাইলটিতে বুটস্ট্র্যাপ ইনস্টল করা এবং আমদানি করা বুটস্ট্র্যাপ উপাদান ব্যবহারের জন্য যথেষ্ট হবে না। আপনি যখনই কোনও উপাদান ব্যবহার করতে চান আপনার এটিকে আমদানি করা উচিত, যেমন: আমার একটি ধারক এবং একটি সারি ব্যবহার করা দরকার

    <Container>
        <Row>
        <Col sm={4}> Test </Col>
        <Col sm={8}> Test </Col>
        </Row>
</Container>

আপনার জেএস ফাইলটি আমদানি করা উচিত

import {Container, Row, Col} from 'react-bootstrap';

Comments

ডকুমেন্টেশনে পছন্দের উপায়টি প্রতিটি উপাদান পৃথকভাবে আমদানি করা। যেমন সারিটির জন্য এটি 'রিএ্যাক্ট-বুটস্ট্র্যাপ / সারি' থেকে সারি আমদানি করে; সূত্র: রিঅ্যাক্ট- বুটস্ট্র্যাপ.github.io/getting-st

— ডিলান

Answer 18

কীভাবে সর্বশেষ বুটস্ট্র্যাপ https://react-bootstrap.github.io/getting-st সূত্র / সংযোজন অন্তর্ভুক্ত করবেন

1.Install

এনপিএম ইনস্টল রিঅ্যাক্ট-বুটস্ট্র্যাপ বুটস্ট্র্যাপ

2. তারপরে App.js এ আমদানি করুন 'বুটস্ট্র্যাপ / ডিস্ট / সিএসএস / বুটস্ট্র্যাপ.মিন সিএসএস';

3. তারপরে আপনার অ্যাপ্লিকেশনটিতে আপনি যে উপাদানগুলি ব্যবহার করছেন তা আমদানি করতে হবে, উদাহরণস্বরূপ আপনি যদি নাবার, এনএভি, বোতাম, ফর্ম, ফর্মকন্ট্রোল ব্যবহার করেন তবে নীচের মতো এই সমস্তগুলি আমদানি করুন:

import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import Form from 'react-bootstrap/Form'
import FormControl from 'react-bootstrap/FormControl'
import Button from 'react-bootstrap/Button'


// or less ideally
import { Button } from 'react-bootstrap';

Comments

প্রশ্নটি প্রতিক্রিয়া-বুটস্ট্র্যাপ সম্পর্কে নয়। এটি বুটস্ট্র্যাপ সিএসএস কাঠামো সম্পর্কে। তার মানে এটি ( প্রতিক্রিয়া-বুটস্ট্র্যাপ.github.io ) নয় এটি একটি ( getbootstrap.com )

— মোঃ রানা