bootstrap课程4 Bootstrap的css风格需要注意什么？

顺晟科技

2022-09-13 13:09:39

bootstrap课程4 bootstrap的css样式有哪些内容需要注意

一、总结

一句话总结：

1、如何选择产品（框架）的版本？

大版本下的最后一个版本，但是同时又要选择稳定的版本，也就是如果做产品的话，不建议选最新的，可以选稳定的，我学thinkphp的时候，5版本已经出来很久了，所以可以选这个，其实可以选5后面修订的最好的那个版本

2、如何查看一个网站上曾经下载过什么资源（也就是网站用的静态资源，js/css等）？

f12+resourse

3、img-thumbnail使用的时候的注意事项是什么？

要使用有色背景图片才能看到thumbnail的效果

4、bootstrap的字体颜色分哪两种？

字体颜色和背景颜色
text-primary
bg-primary
每一种都是5种比较好看的颜色

5、close类有什么用？

把你的×小×号放到右上角

22         <h2 class=\'bg-info\'>linux is very much! <span class=\'close\'>&times;</span></h2>

6、caret类是干嘛的？

下三角，用于更多，一般用于button

22         <h2 class=\'bg-info\'>linux is very much! <button class=\'btn btn-primary\'>更多 <span class=\'caret\'></span></button></h2>

二、bootstrap的css样式有哪些内容需要注意

1、相关知识

css样式:
图片
1.img-rounded
2.img-circle
3.img-thumbnail

文本颜色:
.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger

背景颜色:
.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger

关闭:
.close

三角:
.caret

浮动:
.pull-left
.pull-right
.clearfix

块居中:
.center-block

显示和隐藏:
.hide
.show

2、代码

关闭按钮

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10 
11         img{
12             background: #ccc;
13         }
14     </style>
15     <link rel="stylesheet" href="bs/css/bootstrap.css">
16     <script src="bs/js/jquery.min.js"></script>
17     <script src="bs/js/bootstrap.js"></script>
18 </head>
19 <body>
20     <div class="container">
21         <h1 class=\'page-header\'>Bootstrap前端框架</h1>
22         <h2 class=\'bg-info\'>linux is very much! <span class=\'close\'>&times;</span></h2>
23     </div>
24 </body>
25 <script>
26 $(\'.close\').click(function(){
27     $(this).parent().hide();
28 });
29 </script>
30 </html>

caret下三角

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10 
11         img{
12             background: #ccc;
13         }
14     </style>
15     <link rel="stylesheet" href="bs/css/bootstrap.css">
16     <script src="bs/js/jquery.min.js"></script>
17     <script src="bs/js/bootstrap.js"></script>
18 </head>
19 <body>
20     <div class="container">
21         <h1 class=\'page-header\'>Bootstrap前端框架</h1>
22         <h2 class=\'bg-info\'>linux is very much! <button class=\'btn btn-primary\'>更多 <span class=\'caret\'></span></button></h2>
23     </div>
24 </body>
25 </html>

上一篇：标签的CSS样式“Bootstrap 下一篇：CSS像素、物理像素、逻辑像素、设备

网站建设

Css