Bootstrap笔记（记录不会的知识）

 

 

 

head：

引入bootstrap.min.css文件

content="width=device-width：设为页面自适应

initial-scale=1：缩放比例：当前不缩放

 

 

例1：

body：

 写头部（navbar-fixed-top）底部（navbar-fixed-bottom）导航栏

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
            <div class="container">
                
                <div class="navbar-header">
                    <a href="#" class="navbar-brand">Projectnamea>
                div>
                
                <div id="navabar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Homea>li>
                        <li><a href="#">Abouta>li>
                        <li><a href="#">Contacta>li>
                    ul>
                div>
            div>
        nav>

 页面效果：

 

 例2：

<div class="container">
            <h1>ilove学习h1>
            <h2>ilove学习h2>
            <h3>ilove学习h3>
        div>

 页面效果：

 

 

副标题：

 

 

 

 

 

 

Bootstrap把全局字体设为14px，行高：1.248（直接赋值body）

 p标签：设置了等高10px的底部外边距

 

p的：

 

 

 

 

 标记（换背景）

 

 

 

 字体对齐格式

 

 改变大小写

 

 

 

 缩略语：

 

 

地址：

 

 

 

 无样式列表：

 

 

 

 栅栏：

 

 

 

 

 

 

 

 

 共12行：

 

 

如果多一个就会是：

这种格式

 

觉得不好看，设置个格式

 

 

用3和1对比：

加上：

结果：

 

 

如果将页面改为手机使用：

 

 

会发现缩到很小的时候md-1格局变了，但xs-3格局还是这样。

将上面的部分md改为xs时，会呈现出这样的页面。

 

 内容自适应：

 

 偏移：

4个： 

 

 

1个：

 

 

嵌套：

 

 

 

排序：

可以说用栅栏来分区是很方便的了。

 

转载于:https://www.cnblogs.com/Jimn3/p/10040129.html