React-BootStrap框架快速體驗上手

阿新 • • 發佈：2019-01-04

安裝
在終端cd到你的專案目錄下執行：$ npm install react-bootstrap

然後需要我們手動引用css

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css" 
>

但是我們在學習的時候使用外部的URL，太慢了。因此我們索引把bootstrap安裝到本地。

$ npm install bootstrap

然後你會發現在你的node_modules目錄下多了bootstrap。
這樣頁面上就可以引用本地的css了

<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

const React = require("react");
const ReactDOM = require("react-dom" 
);

import {Navbar} from "react-bootstrap";
const navbarInstance = (
    <Navbar>
        <Navbar.Header>
            <Navbar.Brand>
                <a href="#">react-bootstrap</a>
            </Navbar.Brand>
        </Navbar.Header>
    </Navbar>
);

// 然後我們渲染到body裡
ReactDOM.render(navbarInstance,document 
.body);

html頁面上:

<!DOCTYPE html>
<html>
<head>
    <title>es2105的寫法</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div id="abc"></div>
</body>
    <script src="webpack-dev-server.js"></script>
    <script src="index-webpack.js"></script>
</html>

效果如下：
這裡寫圖片描述
主要看瀏覽器地址，這是我們前面配置的”熱啟動”。
執行命令 $ npm start 就開啟了服務

React-BootStrap框架快速體驗上手

安裝在終端cd到你的專案目錄下執行：$ npm install react-bootstrap 然後需要我們手動引用css  <link rel=

Bootstrap框架-快速上手

什麼是 Bootstrap？ Bootstrap 是一個用於快速開發 Web 應用程式和網站的前端框架。由 Twitter 的 Mark Otto 和 Jacob Thornton 合作開發的一套HTML、CSS和JS框架。Bootstrap是基於HTML5和

人生苦短，我用Python（六）—通過Flask結合Bootstrap框架快速搭建Web應用（實現前後臺聯動）-3

寫在前面：這篇文章，寫的比較倉促，先在此致歉。具體情況，可以直接看總結部分。 Flask是一個基於Python開發，依賴jinja2模板和Werkzeug WSGI服務的一個微型框架。Werkzeug用來處理Socket服務，其在Flask中被用於接受和處理http請求；Jinja2被用來

人生苦短，我用Python（五）—通過Flask結合Bootstrap框架快速搭建Web應用-2

寫在前面： Flask是一個基於Python開發，依賴jinja2模板和Werkzeug WSGI服務的一個微型框架。Werkzeug用來處理Socket服務，其在Flask中被用於接受和處理http請求；Jinja2被用來對模板進行處理，將模板和資料進行渲染，返回給使用者的瀏覽器。 Boo

人生苦短，我用Python（四）—通過Flask結合Bootstrap框架快速搭建Web應用-1

寫在前面： Flask是一個給予Python開發，依賴jinja2模板和Werkzeug WSGI服務的一個微型框架。Werkzeug用來處理Socket服務，其在Flask中被用於接受和處理http請求；Jinja2被用來對模板進行處理，將模板和資料進行渲染，返回給使用者的瀏覽器。 Boo

阿里Weex框架快速體驗與環境搭建

本期六篇文章目錄(可點選跳轉) 1. 前言 Weex能夠完美兼顧效能與動態性，讓移動開發者通過簡捷的前端語法寫出Native級別的效能體驗，並支援iOS、安卓、YunOS及Web等多端部署。對於移動開發者來說，We

分散式_事務_01_2PC框架raincat快速體驗

一、前言這一節我們來看下github上一個優秀的2PC分散式事務開源框架的快速體驗。二、原始碼原始碼請見：相關視訊 http://www.iqiyi.com/u/1243078745/v 三、接入步驟 1.啟動 TxManagerApplica

掌握Taro多端框架快速上手小程式/H5開發

第1章課程導學介紹課程整體的內容，技術點講解，專案演示以及適用人群等第2章 Taro基礎框架學習及應用本章將對taro的基本框架知識點進行講解，涉及state，props,生命週期，事件等taro基礎知識，最後將通過問答示例開發的方式進行講解。第3章網站專案前期準備本章將通過幾個小節來展示在正式

React框架快速入門

React快速入門 ReactJS介紹 ReactJS是什麼? 1). Facebook開源的一個js庫； 2). 一個用於動態構建使用者介面的js庫； 3). React的特點；

React + Ant Design 快速上手

背景及目標日常開發過程中，經常需要做一些 Web 管理平臺供同事或自己使用。作為一個後臺開發前臺知識不紮實，很難簡單快速做出易用的 Web 應用。但是 React 和 Ant Design 的出現使得這種情況有所改善。這篇文章提供了一個路線圖，供沒有太多前臺經驗的開發快速上手

Arquillian測試框架快速上手教程（一）

本系列教程共五篇，分別是：二、JBoss Forge、ShrinkWrap快速指南五、使用 Arquillian 在雲端進行測試其中，Web容器以JBoss-as-7.1.1為例，工程以maven目錄結構為準。本文所涉及到的內容有： 1. Arquillia

簡單響應式Bootstrap框架中文官網頁面模板

str 頁面 nbsp 中文技術分享 http images bsp ots 鏈接：http://pan.baidu.com/s/1o7MQ6RC 密碼：kee5簡單響應式Bootstrap框架中文官網頁面模板

使用JavaTodo框架快速搭建網站

java環境一段時間紀念新手網站收獲不能選擇 web 最近一段時間一直忙著做一個網站，這是我們導師接的一個私活，現在基本功能算是完成了。比較有收獲的是了解了JavaTodo框架。寫一些東西留作紀念吧。如果對於同樣是Web方面新手的你有一絲絲幫助。以前用ser

整合django和bootstrap框架

word log ons 替換 shee head base 版本 fin 環境: python版本:2.7.8 django版本:1.7.1 bootstrap版本:3.3.0 首先github上面有兩個開源的項目用來整合django和bootstrap. ht

bootstrap框架 - jquery庫 - 引用地址

otc pan -s pac boot http trap strong 3.2 bootstrap框架: //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css jquery庫: http:/

Vue vs React: Javascript 框架

實的 row 元素而不是展示看看吧 too 虛擬表 tro 正如我們之前提到的，WordPress 的核心團隊正爭論著為應該將哪款（前端框架）加入現在的架構之中。目前看來，暫時脫穎而出的是React與Vue.js，社區中的很多成員正權衡著這兩款框架的利弊。那到

【轉】Bootstrap 框架柵格布局系統底層設計原理

auto open 分析大致感覺 copy 效果布局 str 如果你是初次接觸Bootstrap，你一定會為它的柵格布局感到敬佩。事實上，這個布局系統提供了一套響應式的布局解決方案。既然這麽好用，那他是如何用CSS來實現的呢？我特意去Bootstrap官方下載了源

BootStrap框架選擇

clean ash lte sta 點擊 -a ring 介紹 board 1. mentronic4.0 效果非常好，但是商業版收費下面是一個.net的系統，基於mentronic4.0開發，感覺不錯 http://www.cnblogs.com/guozi

Springmvc+mybatis+restful+bootstrap框架整合

ssa 存儲 strong lan 介紹 int boot 客戶端 ogr Spring MVC工作流程圖圖一圖二 Spring工作流程描述 1. 用戶向服務器發送請求，請求被Spring 前端控制Servelt DispatcherServlet捕

在Bootstrap框架中，form-control的效果

bootstrap 使用 ots ron 效果如果成了 control 就是在Bootstrap框架中，通過定制了一個類名`form-control`，也就是說，如果這幾個元素使用了類名“form-control”，將會實現一些設計上的定制效果。 1、寬度變成了100

React-BootStrap框架快速體驗上手

相關推薦