受欢迎的博客标签

Mobile website series: Customize Bootstrap5 CSS for mobile, reduce css size

Published

Learn how to theme, customize, and extend Bootstrap5 with Sass.Customize Bootstrap5 CSS for mobile, reduce css size

https://getbootstrap.com/docs/5.1/customize/optimize/

https://v5.getbootstrap.com/docs/5.0/customize/optimize/

https://getbootstrap.com/docs/versions/

Step 1:Download bootstrap5 source Sass, JavaScript

see:https://v5.getbootstrap.com/docs/5.0/getting-started/download/

download bootstrap5 source zip from github.com

https://github.com/twbs/bootstrap/releases

https://codeload.github.com/twbs/bootstrap/zip/v5.1.3

you will get  file downloaded:

bootstrap-5.1.3.zip

Step 2:unzip

驱动器 C 中的卷没有标签。
 卷的序列号是 8CE4-9239

 C:\tmp\bootstrap5\bootstrap-5.0.0-alpha2 的目录

2020/10/31  00:26    <DIR>          .
2020/10/31  00:26    <DIR>          ..
2020/09/29  23:33    <DIR>          scss       //here
2020/09/29  23:33    <DIR>          nuget
2020/09/29  23:33    <DIR>          js         //here
2020/09/29  23:33    <DIR>          dist
2020/09/29  23:33    <DIR>          site
2020/09/29  23:33    <DIR>          build
2020/09/29  23:33    <DIR>          .github
2020/09/29  23:33               177 .gitattributes
2020/09/29  23:33               750 .gitignore
2020/09/29  23:33                59 .stylelintignore
2020/09/29  23:33               502 .stylelintrc
2020/09/29  23:33             1,421 .eslintrc.json
2020/09/29  23:33                89 .eslintignore
2020/09/29  23:33               667 composer.json
2020/09/29  23:33             3,422 config.yml
2020/09/29  23:33               167 .editorconfig
2020/09/29  23:33             1,293 .bundlewatch.config.json
2020/09/29  23:33             1,131 LICENSE
2020/09/29  23:33               184 .browserslistrc
2020/09/29  23:33           485,167 package-lock.json
2020/09/29  23:33               478 package.js
2020/09/29  23:33             8,275 package.json
2020/09/29  23:33            13,039 README.md
2020/09/29  23:33               162 .babelrc.js
2020/09/29  23:33               471 SECURITY.md
2020/09/29  23:33             3,274 CODE_OF_CONDUCT.md
2020/10/31  00:26                 0 t.txt
              20 个文件        520,728 字节
               9 个目录 119,025,053,696 可用字节

 

https://v5.getbootstrap.com/docs/5.0/customize/overview/

step 3:Copy source files to target path

copy /js  and /scss to local webroot

First Create a folder calles 'bootstarp5' at the project root alongside wwwroot,then Copy source files to target path \wwwroot\bootstarp5 .

copy /js  and /scss to /wwwroot/bootstrap5

Step4:Creating source files

Second Create a folder calles 'scss' at the project root alongside wwwroot,then Inside that folder, Create a SCSS file as ~/wwwroot/scss/custom.scss

When a developer starts out a asp .net core project, they are greeted with the following file structure:

 

Nop.WebSeoForMobile\wwwroot(your asp .net core project/
├── scss
│   └── custom.scss
└── bootstrap5/
    ├── js
    └── scss
           ├── _utilities.scss
           ├── _variables.scss
           └── _root.scss

Step3: Edit custom.scss,Include parts of Bootstrap as you need

In your custom.scss, you’ll import Bootstrap’s source Sass files.You have one options:  pick the parts you need. 

copy from bootstart.scss and paste into custom.scss

Nop.WebSeoForMobile:custom scss Import just what we need bootstrap5.1.3

 and provide the variables to override as shown below.

/ Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../bootstrap5/scss/functions";
@import "../bootstrap5/scss/variables";
@import "../bootstrap5/scss/mixins";

// Optional
@import "../bootstrap5/scss/root";
@import "../bootstrap5/scss/reboot";
@import "../bootstrap5/scss/type";
@import "../bootstrap5/scss/images";
@import "../bootstrap5/scss/containers";
@import "../bootstrap5/scss/grid";

github:https://github.com/eujinong/gulp-structure

 

Step 5: compile SCSS to CSS

In order to compile scss, we need some npm packages to do our work.

Option1:Compile Sass Files in Visual Studio 2019 Using Web Compiler

https://andyp.dev/posts/compile-sass-files-in-visual-studio-2019-using-web-compiler

https://blazor.syncfusion.com/documentation/common/how-to/customize-font-size-and-color/#install-web-compiler

Install The Extension  Web Compiler


This tutorial assumes that you already have an ASP.NET Web Application open in Visual Studio.

We start by installing the Web Compiler extension.

Click on Extensions > Manage Extensions > Online
Now search for "Web Compiler"
Click on the Download button
Close Visual Studio and wait for the installer to appear. Follow the steps to install the extension.

other options:

option 2. use LigerShark.WebOptimizer.Sass

The easiest way to add .scss to your ASP.NET Core apps is by going to the Nuget Package Manager and installing LigerShark.WebOptimizer.Core and LigerShark.WebOptimizer.Sass

detail:https://github.com/ligershark/WebOptimizer

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="LigerShark.WebOptimizer.Core" Version="3.0.250" />
    <PackageReference Include="LigerShark.WebOptimizer.Sass" Version="3.0.40-beta" />
  </ItemGroup>

</Project>

 

     public void ConfigureServices(IServiceCollection services)
        {
            services.AddResponseCaching();
            services.AddControllersWithViews();

            // Bundling, minification and Sass transpilation (https://github.com/ligershark/WebOptimizer)
            services.AddWebOptimizer(
                pipeline =>
                {
                    pipeline.MinifyJsFiles();
                    pipeline.CompileScssFiles()
                            .InlineImages(1);
                });
        }

 

 public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
            }

            app.UseWebOptimizer();  //add here

            app.UseStaticFiles();

            app.UseRouting();

            app.UseAuthorization();

            app.UseResponseCaching();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Home}/{action=Index}/{id?}");
            });
        }

After that, you can just put

    <!-- Customize Bootstrap5  CSS for mobile, reduce  css size  -->
    <link rel="stylesheet" href="~/scss/custom.scss" asp-append-version="true" />

in the head of the _Layout.cshtml file and the LigerShark.WebOptimizer.Sass package will compile all of your sass files automatically.

output

http://localhost:5000/scss/custom.scss

:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#343a40;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,

 

Step 6:publish on Ubuntu 18.04 *64

error message:

 System.UnauthorizedAccessException: Access to the path '/Nop.WebSeoForMobile/bin/release/net5.0/publish/obj/WebOptimizerCache' is denied.

create obj directory

Nop.WebSeoForMobile/bin/release/net5.0/publish/obj

obj directory's permission

 

 

Bootstrap 5 tutorial: learn how to get started without jQuery

This article describle how to compile SCSS to CSS with Gulp 4 and BrowserSync

 

Utility API

Utilities API 是基於 Sass maps 的技術,基本上 Sass maps 就是一連串的 key / value pairs,用小括號括起來。調用端可以用 map.get function 去把指定變數裡的指定的 key 的值讀取出來.

Bootstrap 5 基於 Sass maps 的架構衍伸出一套讓開發者可以自行設定 utility classes,就是 Utilities API,而且 Bootstrap 5 預設的 utility classes 也是用 Utilities API 實作的。

custom $utilities map

https://v5.getbootstrap.com/docs/5.0/utilities/api/

see:https://blog.yuyansoftware.com.tw/2020/12/bootstrap-5-features/

 

 

RTL

Learn how to enable support for right-to-left text in Bootstrap across our layout, components, and utilities.

https://getbootstrap.com/docs/5.0/getting-started/rtl/

https://getbootstrap.com/docs/5.0/examples/#rtl

 

Useful links

Download bootstrap 5.1.3 examples

https://getbootstrap.com/docs/5.1/getting-started/download/#examples

Customize Bootstrap 5.1.3 's Sass variables to get your very own version.

https://minime.stephan-brumme.com/bootstrap/5.1.3/

http://bootstrapcustomizer.compoutpost.com/

https://getbootstrap.com/docs/5.1/customize/sass/