Bootstrap
Bootstrap是一个开源的,响应式的,移动优先的前端CSS框架.其中某些互动效果需要依赖JQuery和Popper库,大部分情况可以只引用bootstrap的CSS就够了.
安装
有三种使用bootstrap的方式
- npm包管理器
npm install bootstrap
2.CDN的方式
可以到下面的链接找到相应的CDN链接
https://www.bootstrapcdn.com/
3.手动下载代码
基本功能示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <link rel="stylesheet" href="bootstrap/bootstrap.min.css"> <title>Bootstrap</title> </head> <body> <div > <section > <div >侠客行</div> <blockquote > 赵客缦胡缨，吴钩霜雪明。 银鞍照白马，飒沓如流星。 十步杀一人，千里不留行。 事了拂衣去，深藏身与名。 闲过信陵饮，脱剑膝前横。 将炙啖朱亥，持觞劝侯嬴。 三杯吐然诺，五岳倒为轻。 眼花耳热后，意气素霓生。 救赵挥金槌，邯郸先震惊。 千秋二壮士，烜赫大梁城。 纵死侠骨香，不惭世上英。 谁能书阁下，白首太玄经。 <div >李白</div> </blockquote> </section> </div> </body> </html>
应用bootstrap CSS效果
去掉bootstrap CSS效果
使用bootstrap会:重置浏览器默认的样式,使应用样式后效果更加一致,1rem=16px,使用border-box计算尺寸,使用本地font.
Bootstrap内置颜色
文本颜色 text-COLOR
其中COLOR是一些内置的颜色关键字包括:
(primary,secondary,success,danger,warning,info,light,dark,white)
背景颜色 bg-COLOR 其中COLOR同上
<div > <p >Text of primary color</p> <p >Text of secondary color</p> <p >Text of success color</p> <p >Text of danger color</p> <p >Text of warning color</p> <p >Text of info color</p> <p >Text of light color</p> <p >Text of dark color</p> <p >Text of white color</p> </div>
文字颜色示例
有关图片的基本样式
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>标签中
figure-image 用在image标签
figure-caption
<style>
img{
display: block;
}
</style>
<body>
<div >
<figure >
<img src="bootstrap/fabian-grohs-597395-unsplash.jpg">
<figcaption >
简单的图片说明
</figcaption>
</figure>
<figure >
<img src="bootstrap/frano-duvnjak-468807-unsplash.jpg">
<figcaption>
冬季雪景
</figcaption>
</figure>
</div>
</body>
应用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;
示例
<div > <a href="#">My Link</a> </div>
可以自己写样式覆盖该变量
<style>
:root{
--blue:aqua;
}
</style>
但是内置的text-primary等颜色不能被覆盖,具有更高的优先级.
