2019-07-15 11:27:39 he271481178 阅读数 900
  • 使用 Bootstrap 4 提升网页实战教程

    使用Bootstrap 4提升网页实战视频课程,课程内容包含使用bootstrap开发购物网、Landing page、个人网站、企业网站、客制化网站都将难不倒您!这堂课会手把手地透过Bootstrap 4 实作各种业界案例,有了这样的加持,面对各种版型的网站,都能轻松应对。Bootstrap入门到进阶必备教程。

    11089 人正在学习 去看看 苏朝辉

Shards

Shards 是采用Bootstrap 4 框架进行开发的主题或者说UI Kit,含有丰富的 UI 组件,包含了大部分的网页端常用的元素,方便用户进行定制,提供了几个页面模板。

官网和演示、下载地址:https://designrevision.com/demo/shards/

在这里插入图片描述

Now UI Kit

Now UI Kit 类似Shards 也是Bootstrap 4 框架进行开发的主题,同样含有丰富的 UI 组件,包含了大部分的网页端常用的元素,也提供了几个页面模板,方便进行定制。

官网和演示、下载地址:https://www.creative-tim.com/product/now-ui-kit

演示地址:https://demos.creative-tim.com/now-ui-kit/index.html

在这里插入图片描述

以上两款Bootstrap 4 主题都是基于MIT 协议,可以免费商用 。

2019-01-18 21:58:19 haifeng10001 阅读数 1255
  • 使用 Bootstrap 4 提升网页实战教程

    使用Bootstrap 4提升网页实战视频课程,课程内容包含使用bootstrap开发购物网、Landing page、个人网站、企业网站、客制化网站都将难不倒您!这堂课会手把手地透过Bootstrap 4 实作各种业界案例,有了这样的加持,面对各种版型的网站,都能轻松应对。Bootstrap入门到进阶必备教程。

    11089 人正在学习 去看看 苏朝辉

bootstrap4有个网站叫做bootswatch,其中已经设计了一些很美的主题:
bootswatch首页的部分截图
要想使用也是很简单的,只需要下载其中的bootstrap.css或者bootstrap.min.css并覆盖到自己项目的对应文件就行了。如果你想动态切换的话,现在提供的思路是:
用JavaScript写一个函数响应页面上一个按钮的点击,这个函数主要是获取页面导入css的链接< link >标签,修改它的href值就行了。
当然如果你想让整个网站都应用上同一个动态修改后的主题,下文也用到了,主要是采用cookies记录的方式解决。

下面的代码来自Django,在HTML页面上的一些语法和大家常见的JavaEE不大相同,但本文涉及的内容只和JavaScript和Bootstrap有关,无需在意哈。但我要说一下我Django网站上各页面都有的一个特点,那就是每个HTML页面都继承于或被包含于一个基础页面,这样的话,便只需要修改基础页面的css或js就行了,相信JavaEE那边也是这样做的。

网页上涉及到的代码

<link rel="stylesheet" href="{% static 'bootstrap4.0.0/css/bootstrap.min.css' %}" id="default-theme">

切换时主要针对上面< link >标签的hrefid进行修改,一个href对应一个id。本程序用到两个主题版本的css文件,其id和文件名的对应为:

id 同目录下的css文件名
default-theme bootstrap.min.css
gray-theme bootstrap_gray.min.css

这样就清晰明了了哈哈哈,下面是切换的按钮,触发changeTheme()方法:

<!--切换主题的按钮-->
<input id="change-theme-btn" type="button" class="btn btn-light" onclick="changeTheme()" value="切换主题"/>

涉及的JavaScript代码

具体说明请看注释:

// 按钮触发的切换主题方法
function changeTheme() {
    var link = document.getElementsByTagName("link")[0];
    //判断目前页面上的link的id是哪个,如果是默认主题的话,就传送新主题的id给change()函数,否则亦然
    if (link.id === "default-theme") {
        change("dark-theme");
    } else {
        change("default-theme");
    }
}

//真正的切换主题方法
function change(themeName){
    var link = document.getElementsByTagName("link")[0];

    if(themeName === "default-theme"){
        link.id = "default-theme";
        link.href = '/static/bootstrap4.0.0/css/bootstrap.min.css';
        
        //记录新的主题到cookies,这里一定要写上path=/,否则就不是修改cookies而是在不同页面创建cookies了
        document.cookie = "themeCookies=default-theme;path=/";
    }else if(themeName === "dark-theme"){
        link.id = "dark-theme";
        link.href = '/static/bootstrap4.0.0/css/bootstrap_gray.min.css';
        document.cookie = "themeCookies=dark-theme;path=/";
    }
}

// 获取cookie中当前主题的id,没有则返回默认的default-theme
function getThemeName() {
    var themeCookies = "themeCookies=";
    var allCookies = document.cookie.split(';');
    for(var i=0; i<allCookies.length; i++){
        var c = allCookies[i].trim();
        if(c.indexOf(themeCookies) === 0)
            return c.substring(themeCookies.length, c.length);
    }
    return "default-theme";
}

$(document).ready(function () {
    change(getThemeName());
});

2018-12-14 10:16:22 geliang0021 阅读数 384
  • 使用 Bootstrap 4 提升网页实战教程

    使用Bootstrap 4提升网页实战视频课程,课程内容包含使用bootstrap开发购物网、Landing page、个人网站、企业网站、客制化网站都将难不倒您!这堂课会手把手地透过Bootstrap 4 实作各种业界案例,有了这样的加持,面对各种版型的网站,都能轻松应对。Bootstrap入门到进阶必备教程。

    11089 人正在学习 去看看 苏朝辉

DevExpress 使用BootStrap主题

Dev在16.2.4之后的版本中发布了对BootStrap主题的支持。但是采用的方式是剥离开的,也就是说Dev并没有将BootStrap的主题集成进去。在使用往常的方式直接拖拽控件空,其样式并不会显示出来。参照官方的文档,需要进行下一步的处理。

第一步

使用以下步骤将DevExpress Bootstrap控件集成到您的应用程序中:

  1. 下载并安装DevExpress .NET组件套件。
    https://www.devexpress.com/Home/Try

  2. 配置应用程序以使用bootstrap.css和DevExpress Bootstrap Control库。 根据您是要修改现有项目还是创建新项目,该过程会有所不同。

修改现有项目:

  • 手动安装Bootstrap或使用其中一个可用的软件包管理器,并将bootstrap.css链接添加到页面(母版页或layout.cshtml)。
<link href="Content/bootstrap.min.css" rel="stylesheet" />
  • 将所需的META声明添加到页面的HEAD部分。
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  • 将一个Bootstrap控件从Visual Studio工具箱拖放到页面上。 VS会自动将DevExpress Bootstrap控件所需的所有配置节和程序集引用添加到应用程序的web.config文件中。

在这里插入图片描述

  • 也可以使用DevExpress项目向导添加所需的引用,从Visual Studio主菜单(DevExpress - > ASP.NET控件 - >运行向导到更新项目)运行向导。
    在这里插入图片描述

原以为这样就结束了,其实不然,接下来,还要设置Web.config文件
将DevExpress的节点设置如下

  <devExpress>
    <themes enableThemesAssembly="false" styleSheetTheme="" theme="" customThemeAssemblies="" baseColor="" font="" />
    <compression enableHtmlCompression="false" enableCallbackCompression="true" enableResourceCompression="true" enableResourceMerging="true" />
    <settings doctypeMode="Html5" rightToLeft="false" ieCompatibilityVersion="edge" accessibilityCompliant="true" checkReferencesToExternalScripts="false" protectControlState="true" />
    <errors callbackErrorRedirectUrl="" />
    <resources>
      <add type="DevExtreme" />
      <add type="ThirdParty" />
    </resources>
    <bootstrap mode="Bootstrap4" iconSet="Embedded" />
  </devExpress>

参考链接:https://demos.devexpress.com/bootstrap/GettingStarted.aspx

2018-02-15 18:55:27 GaiMingZhong 阅读数 1553
  • 使用 Bootstrap 4 提升网页实战教程

    使用Bootstrap 4提升网页实战视频课程,课程内容包含使用bootstrap开发购物网、Landing page、个人网站、企业网站、客制化网站都将难不倒您!这堂课会手把手地透过Bootstrap 4 实作各种业界案例,有了这样的加持,面对各种版型的网站,都能轻松应对。Bootstrap入门到进阶必备教程。

    11089 人正在学习 去看看 苏朝辉
unify最新版 unify-v2.5 Bootstrap4模板 

unify v2.5 最新网站模板(截止到2018.2.8号),基于bootstrap4 制作,新增加了很多后台管理的模板,资源压缩后有446多M大,有一小部分缺失(图片什么的),不影响整体使用

链接:https://pan.baidu.com/s/1mj0SyMk 密码:cbs9
2019-03-07 10:19:21 fengsh998 阅读数 893
  • 使用 Bootstrap 4 提升网页实战教程

    使用Bootstrap 4提升网页实战视频课程,课程内容包含使用bootstrap开发购物网、Landing page、个人网站、企业网站、客制化网站都将难不倒您!这堂课会手把手地透过Bootstrap 4 实作各种业界案例,有了这样的加持,面对各种版型的网站,都能轻松应对。Bootstrap入门到进阶必备教程。

    11089 人正在学习 去看看 苏朝辉

基于Bootstrap 4.3.1版本:https://getbootstrap.com/docs/4.3/getting-started/introduction/

基于react脚手架来进行说明!

基础知识,针对bootstrap使用有一定了解的人群,对webpack有一定了解的人群,对react脚手架有了解。

一步步来,不要急,一口吞不了象。

 运行终端:

1. cd 到一个目录。自行定义。

2. 安装脚手架。create-react-app bootstrap_customstyle

3.因为脚手架都给我们把webpack的相关配置都写的比较完整了,默认是看不到webpack.config.js的。而bootstrap官网上提到如果要自定义主题色或扩展之类的。有几个方式:

a.下载bootstrap源代码,修改源文件编译出css。

b.直接修改编译出来的css。

但这两种都不推荐。因为一个是入侵了原css样式设计。而编译原码的方式,改动一次需要重编一次。比较麻烦。为解决灵活性,官网推荐了一种扩展复盖的方式。

https://getbootstrap.com/docs/4.3/getting-started/theming/

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

现在就来试试这个自定义custom.scss的方式进行自定义主题。

把工程执行npm run eject.把webpack.config.js的相关配置给开放出来。因为后面需要增加sass-loader来加载scss.

用vscode打开文件夹。

按照官方说明,把相应的目录结构设置完了。现在执行npm start看看能不能运行先。

我的node 6.5 babel7.x 版本,开放eject后跟起来有几个错。不要紧,处理下就好了。

提示@bable/plugin-transform-react-jsx.可能是因为react的脚手架生成的是jsx的语法需要jsx的解晰器。

安装npm install -S babel-preset-es2015 babel-preset-react

装完后运行npm start.提示找不到resolve.解晰器,装下呗。

AdeMacBook-Pro-3:bootstrap_customstyle a$ npm start

> bootstrap_customstyle@0.1.0 start /Users/a/Downloads/tt/bootstrap_customstyle
> node scripts/start.js

internal/modules/cjs/loader.js:583
    throw err;
    ^

Error: Cannot find module 'resolve'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
...

npm install -S resolve

跑起来后。把无用的一些文件删除。像App.test.js, logo.svg. serviceWorker.js,App.css

然后修改App.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="container">
        bootstrap hello world ! custom theming!
      </div>
    );
  }
}

export default App;

修改index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

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

最终目录结构;

好了,现在只是可以运行。并没有使用bootstrap.下面安装下bootstrap.

5.npm install -S bootstrap

   因为bootstrap依赖jquery 和popper.js所以也安装一把。

npm install -S jquery popper.js

修改App.js

import React, { Component } from 'react';

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

class App extends Component {
  render() {
    return (
      <div className="container bg-primary">
        bootstrap hello world ! custom theming!
      </div>
    );
  }
}

export default App;

这里使用直接引css的方式。只是为了看效果。

好了,现在换种引用方式。

把import 'bootstrap/dist/css/bootstrap.css';改为import 'bootstrap';却发现样式不启作用了。

接下来,我们通过官网建议使用scss的方式导入。

修改custom.scss

@import "~bootstrap/scss/bootstrap";
// @import "../node_modules/bootstrap/scss/bootstrap";

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
// @import "../node_modules/bootstrap/scss/reboot";
// @import "../node_modules/bootstrap/scss/type";
// @import "../node_modules/bootstrap/scss/images";
// @import "../node_modules/bootstrap/scss/code";
// @import "../node_modules/bootstrap/scss/grid";

接下来安装npm install -S sass-loader postcss-loader autoprefixer

参考这个:https://getbootstrap.com/docs/4.3/getting-started/webpack/

配置一段规则到wepack.config.js中。

...
{
  test: /\.(scss)$/,
  use: [{
    loader: 'style-loader', // inject CSS to page
  }, {
    loader: 'css-loader', // translates CSS into CommonJS modules
  }, {
    loader: 'postcss-loader', // Run postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader' // compiles Sass to CSS
  }]
},
...

加规则特别注意,我之前经为可以随便加的。放在最前面,结果出BUG。后面我放到最后一段。当然具体位置要阅读webpack.config.js配置中的规则,看下放在那里合适。因为规则解晰是自下而上的。

修改好配置后。把App.js的改入改为

import React, { Component } from 'react';

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

然后npm start发现提示 

Failed to compile.

./src/App.js
Module not found: You attempted to import ../scss/custom.scss which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

发现不能访问src外的资源文件。原因为是脚手架帮我们做了限制。只需要找到webpack.config.js中的

new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),注释起来就好了。

Failed to compile.

./scss/custom.scss (./node_modules/css-loader!./node_modules/postcss-loader/src??ref--6-oneOf-3-2!./node_modules/sass-loader/lib/loader.js!./scss/custom.scss)
To import Sass files, you first need to install node-sass.
Run `npm install node-sass` or `yarn add node-sass` inside your workspace.

需要安装node-sass后再运行。OK。

修改App.js中的className样式为className="container bg-primary text-danger text-center display-3"

运行效果。

好了,到此bootstrap能使用。并且可以加需自定义的scss文件了。那么自定义主题色就可以执行了。按官方所后的。在custom.scss中对变量的复写。具体有那些变量可以参看scss/_variables.scss

在custom.scss复写主题

$theme-colors: (
    "primary": #00ff00,//#0074d9,
    "danger": #f7f307
  );

@import "~bootstrap/scss/bootstrap";
// @import "../node_modules/bootstrap/scss/bootstrap";

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
...

然后运行。

OK,自定义主题色完成。并没有改动源代码。也没有下载bootstrap源码编译。其实大家多看看文档说明,找找,练练。捣整下,都会弄出来的。

demo:https://download.csdn.net/download/fengsh998/11003919

bootstrap v4 demo

阅读数 312

bootstrap

阅读数 99

没有更多推荐了,返回首页