Bootstrap 4 入门

Bootstrap 4 入门

Bootstrap

Bootstrap是一个开源的,响应式的,移动优先的前端CSS框架.其中某些互动效果需要依赖JQuery和Popper库,大部分情况可以只引用bootstrap的CSS就够了.

安装

有三种使用bootstrap的方式

  1. npm包管理器
npm install bootstrap

2.CDN的方式

可以到下面的链接找到相应的CDN链接

https://www.bootstrapcdn.com/

3.手动下载代码

基本功能示例



 
 
 
 
 
 Bootstrap


侠客行
赵客缦胡缨,吴钩霜雪明。 银鞍照白马,飒沓如流星。 十步杀一人,千里不留行。 事了拂衣去,深藏身与名。 闲过信陵饮,脱剑膝前横。 将炙啖朱亥,持觞劝侯嬴。 三杯吐然诺,五岳倒为轻。 眼花耳热后,意气素霓生。 救赵挥金槌,邯郸先震惊。 千秋二壮士,烜赫大梁城。 纵死侠骨香,不惭世上英。 谁能书阁下,白首太玄经。
Bootstrap 4 入门

应用bootstrap CSS效果

Bootstrap 4 入门

去掉bootstrap CSS效果

使用bootstrap会:重置浏览器默认的样式,使应用样式后效果更加一致,1rem=16px,使用border-box计算尺寸,使用本地font.

Bootstrap内置颜色

文本颜色 text-COLOR

其中COLOR是一些内置的颜色关键字包括:

(primary,secondary,success,danger,warning,info,light,dark,white)

背景颜色 bg-COLOR 其中COLOR同上

Text of primary color

Text of secondary color

Text of success color

Text of danger color

Text of warning color

Text of info color

Text of light color

Text of dark color

Text of white color

Bootstrap 4 入门

文字颜色示例

有关图片的基本样式

img-fluid 使得图片成为响应式的

rounded 加圆角

rounded-DIR

DIR可以是top,right,bottom,left,circle

rounded-0 清除圆角

float-left 左对齐

float-right 右对齐

text-center 显示模式是inline的时候用来居中图片

mx-auto 显示模式是block的时候用来居中图片

figure 用在

标签中

figure-image 用在image标签

figure-caption



简单的图片说明
冬季雪景
Bootstrap 4 入门

应用bootstrp图片样式

内置CSS变量

Bootstrap默认内置了一些CSS变量,有关于颜色,breakpoint和字体的变量.

 --blue: #007bff;
 --indigo: #6610f2;
 --purple: #6f42c1;
 --pink: #e83e8c;
 --red: #dc3545;
 --orange: #fd7e14;
 --yellow: #ffc107;
 --green: #28a745;
 --teal: #20c997;
 --cyan: #17a2b8;
 --white: #fff;
 --gray: #6c757d;
 --gray-dark: #343a40;
 --primary: #007bff;
 --secondary: #6c757d;
 --success: #28a745;
 --info: #17a2b8;
 --warning: #ffc107;
 --danger: #dc3545;
 --light: #f8f9fa;
 --dark: #343a40;
 --breakpoint-xs: 0;
 --breakpoint-sm: 576px;
 --breakpoint-md: 768px;
 --breakpoint-lg: 992px;
 --breakpoint-xl: 1200px;
 --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

示例


可以自己写样式覆盖该变量


 

但是内置的text-primary等颜色不能被覆盖,具有更高的优先级.

加入我们

热门文章