react bootstrap初探|青训营笔记

在react中，可以直接安装bootstrap5套件:

npm install bootstrap
// 或者
yarn install bootstrap

使用bootstrap在react中快速建立网页:

在App.js中汇入bootstrap 路径:

import React from 'react';
import "../node_modules/bootstrap/dist/css/bootstrap.min.css"

bootstrap5画面连接

到Bootstrap5主画面左边栏位点选Layout>Grid，在右边画面复制三个等宽的columns的程式码，将程式码贴入<div></div>的区块中

const App = () => {
    return ( 
        <div> 
           <div class="container"> 
               <div class="row"> 
                   <div class="col">
                   Column 
                   </div> 
                   <div class="col"> 
                   Column 
                   </div> 
                   <div class="col">
                   Column 
                    </div> 
               </div> 
           </div> 
       </div> 
     )

到Bootstrap5主画面左边栏位点选Components>Card在右边画面复制Card的程式码，把程式码贴入在Column的地方，贴入后记得更改<img src="..." class="card-img-top" alt="..."/>为自闭标签，全部的class改为className，Style的值必需加上二个{{}} =>style={{width: '18rem' }}

可以到Lorem Picsum假图产生器网站，只需在URL 后添加您想要的图像尺寸（宽度和高度），您就会得到一个随机图像。

import React from 'react'; 
import "../node_modules/bootstrap/dist/css/bootstrap.min.css"; 
     const App = () => { 
         return ( 
             <div> 
             <h1 className="text-center" style={{margin:'40px'}}>
             Welcome
             </h1> 
             <div className="container"> 
                 <div className="row"> 
                     <div className="col"> 
                         <div className="card text-center" style={{width: '18rem' }}> 
                         <img src="https://picsum.photos/seed/picsum/200/300" className="card-img-top" alt="..."/> 
                             <div className="card-body"> 
                             <h5 className="card-title">Card title</h5> 
                             <p className="card-text">
                             Some quick example text to build on the card title and make up the bulk of the card's content.
                             </p> 
                             <a href="#" className="btn btn-primary">
                             Go somewhere
                             </a> 
                         </div> 
                      </div> 
                  </div> 
               <div className="col"> 
             <div className="card text-center" style={{width: '18rem' }} > 
             <img src="https://picsum.photos/200/300?grayscale" className="card-img-top" alt="..."/> 
                 <div className="card-body"> 
                 <h5 className="card-title">Card title</h5> 
                 <p className="card-text">
                 Some quick example text to build on the card title and make up the bulk of the card's content.
                 </p> 
                 <a href="#" className="btn btn-primary">
                 Go somewhere
                 </a> 
                </div> 
              </div> 
             </div> 
             <div className="col"> 
                 <div className="card text-center" style={{width: '18rem' }} > 
                 <img src="https://picsum.photos/seed/picsum/200/300" className="card-img-top" alt="..."/> 
                 <div className="card-body"> 
                 <h5 className="card-title">Card title</h5> 
                 <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> 
                 <a href="#" className="btn btn-primary ">Go somewhere</a> 
                  </div> 
                </div> 
              </div> 
            </div> 
         </div> 
     </div> ) } 
 export default App;

bootstrap是目前最流行的CSS框架之一。它是CSS、HTML和Javascript工具的开源集合，可帮助开发人员在构建网页时最大限度地减少编码时间。Bootstrap最初由Twitter开发用于前端设计，自创建以来已被广泛用于为网页添加排版、按钮、图标和各种导航工具。

React-Bootstrap采用 Bootstrap 的 CSS 框架，并用严格的 React 组件替换任何现有的 JavaScript。这意味着您不再需要 jQuery 或其他依赖项来更改 JavaScript 元素。基本上，React-Bootstrap 集成通过切断中间人来创建更加无缝的前端开发体验。开发人员可以更好地控制此模型中组件的外观和功能。