玩转Bootstrap（基础）_学习笔记

首页免费课玩转Bootstrap（基础）笔记

玩转Bootstrap（基础）

                
                大漠
            Web前端工程师

                    查看讲师更多课程 
                    大漠讲师的其他课程
                
Sass进阶篇
中级·46635
免费课程
                                
Sass入门篇
中级·104426
免费课程
                                
玩转Bootstrap（JS插件篇）
中级·128651
免费课程
                                
十天精通CSS3
初级·242591
免费课程
                                
                难度初级
            
                时长10小时 0分
            
                学习人数
            
综合评分9.53
                            686人评价
                        查看评价
                                9.8
                                内容实用
                            
                                9.4
                                简洁易懂
                            
                                9.4
                                逻辑清晰

最热最新

一只想要学好前端的小白
```
表格
```
Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：
.table：基础表格
.table-striped：斑马线表格
.table-bordered：带边框的表格
.table-hover：鼠标悬停高亮的表格
.table-condensed：紧凑型表格
.table-responsive：响应式表格
查看全部

0 采集收起来源：表格
2018-04-01
一只想要学好前端的小白
在高度上出现滚动条
正如前面所示，<pre>元素一般用于显示大块的代码，并保证原有格式不变。但有时候代码太多，而且不想让其占有太大的页面篇幅，就想控制代码块的大小。Bootstrap也考虑到这一点，你只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
CSS样式如下：
```
.pre-scrollable { max-height: 340px; overflow-y: scroll; }
```
查看全部

0 采集收起来源：代码（二）
2018-04-01

一只想要学好前端的小白

三种显示风格code/pre/kbd

code风格：

<div>Bootstrap的代码风格有三种：  <code>&lt;code&gt;</code>  <code>&lt;pre&gt;</code>  <code>&lt;kbd&gt;</code></div>

pre风格：

<div><pre>&lt;ul&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;</pre></div>

kbd风格：

<div>请输入<kbd>ctrl+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>

查看全部

0 采集收起来源：代码（一）

2018-04-01

一只想要学好前端的小白
1、使用<code></code>来显示单行内联代码
2、使用<pre></pre>来显示多行块代码
3、使用<kbd></kbd>来显示用户输入代码
查看全部

0 采集收起来源：代码（一）
2018-04-01
一只想要学好前端的小白
```
水平定义列表
```
```
在定义列表中添加类名.dl-horizontal
eg：
<dl class="dl-horizontal">
</dl>
```
查看全部

0 采集收起来源：列表--水平定义列表
2018-04-01
一只想要学好前端的小白
```
清除列表
```
样式
<ul classs="list-unstyle"></ul>
查看全部

0 采集收起来源：列表--内联列表
2018-04-01
一只想要学好前端的小白
```
强调相关的类
```
在Bootstrap中除了使用标签<strong>、<em>等说明正文某些字词、句子的重要性，Bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下：
- .text-muted：提示，使用浅灰色（#999）
- .text-primary：主要，使用蓝色（#428bca）
- .text-success：成功，使用浅绿色(#3c763d)
- .text-info：通知信息，使用浅蓝色（#31708f）
- .text-warning：警告，使用黄色（#8a6d3b）
- .text-danger：危险，使用褐色（#a94442）
eg:<div class="text-muted">.text-muted 效果</div>
查看全部

0 采集收起来源：强调相关的类
2018-04-01
一只想要学好前端的小白
```
副标题small
```
1、行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。
2、由于<small>内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%；
详细代码请参阅bootstrap.css文件中第407行~第443行。
eg:<h1>我是好人<small>真的是好人</small></h1>
查看全部

0 采集收起来源：标题（二）
2018-04-01
一只想要学好前端的小白
```
Bootstrap（h1-h6）标签
```
Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样，具体定义的规则可以如下表所示：
通过比较可以发现，Bootstrap标题样式进行了以下显著的优化重置：
1、重新设置了margin-top和margin-bottom的值， h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。
2、所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体。
3、固定不同级别标题字体大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。
查看全部

0 采集收起来源：标题（一）
2018-04-01
一只想要学好前端的小白
```
bootstrap适配代码
```
移动端配适问题。 <meta name="viewport" content="width=device-width, initial-scale=1"> 加在<head></head>标签里。

bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码：
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
查看全部

0 采集收起来源：基本的HTML模板
2018-04-01
qq_暖栀_5
- .text-muted：提示，使用浅灰色（#999）
- .text-primary：主要，使用蓝色（#428bca）
- .text-success：成功，使用浅绿色(#3c763d)
- .text-info：通知信息，使用浅蓝色（#31708f）
- .text-warning：警告，使用黄色（#8a6d3b）
- .text-danger：危险，使用褐色（#a94442）
查看全部

0 采集收起来源：强调相关的类
2018-03-31
慕姐3432061

三种用于显示代码的风格：(1)使用<code></code>来显示单行内联代码;(2)使用<pre></pre>来显示多行块代码;(3)使用<kbd></kbd>来显示用户输入代码。
注意：不管哪种代码风格，在代码中碰到小于号(<)要使用硬编码"<"来替代，大于号(>)使用">"来替代。

查看全部

0 采集收起来源：代码（一）
2018-03-31
慕姐3432061

通过添加类名".list-inline"实现内联列表，也就是把垂直列表换成水平列表，而且去掉项目符号(编号)，保持水平显示，如制作水平导航。

查看全部

0 采集收起来源：列表--内联列表
2018-03-31
慕姐3432061

通过给无序或有序列表添加一个类名".list-unstyled"去除默认的列表样式的风格。

查看全部

0 采集收起来源：列表--去点列表
2018-03-31
慕姐3432061

bootstrap中通过定义四个类名来控制文本的对齐风格，如下：
.text-left:左对齐
.text-center:居中对齐
.text-right:右对齐
.text-justify:两端对齐(其在各浏览器下解析各有不同，特别是应用于中文文本的时候，因此项目中慎用。)

查看全部

0 采集收起来源：文本对齐风格
2018-03-31

首页上一页 143 144 145 146 147 148 149 下一页尾页

0/150

提交

取消

开始学习

课程须知: 本教程适合具有一定前端基础的人员，对HTML和CSS有一定的了解，对于定制Bootstrap的同学需要具备LESS和Sass基础知识。

老师告诉你能学到什么？: 1、了解Bootstrap框架 2、如何使用Bootstrap制作Web页面或Web应用程序 3、如何定制个性化Bootstrap

微信扫码，参与3人拼团

热搜

最近搜索清空

玩转Bootstrap（基础）