BootStrap学习

时间 2019-12-05

原文原文链接

简介：Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局，移动设备优先的WEB项目。由Twitter于2011年8月在GitHub上发布，，它将常见的CSS布局小组件和JavaScript插件进行了完整的封装，大大提高工做效率。javascript

<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>H</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="container"> asdfasdfdsafdsaaa </div>
    </body>
</html>

栅格系统css

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>H</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css"> div{ border: 1px #46B8DA solid; } </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
            </div>
            <div class="row">
                <div class="col-md-8 col-sm-6">col-md-8</div>
                <div class="col-md-4 col-sm-6">col-md-4</div>
                <div class="col-md-8">col-md-8</div>
            </div>
        </div>
    </body>
</html>

媒体查询：屏幕宽度小于某个值时候显示特定的内容。html

@media (max-width:767px) { div{ background: #AC2925; } }

列偏移：java

<div class="col-md-4 col-md-offset-4"> col-md-4
</div>

列排序jquery

<div class="row">
       <div class="col-md-3 col-md-push-5"> col-md-3
       </div>
       <div class="col-md-6 col-md-pull-2"> col-md-6
       </div>
</div>

清除浮动bootstrap

默认使用float:left排列浏览器

<div class="row">
                <div class="col-xs-6 col-sm-3"> col-xs-6 col-sm-3 1<br>asdfasdfdsfdsa </div>
                <div class="col-xs-6 col-sm-3"> col-xs-6 col-sm-3 2
                </div>
                <div class="clearfix visible-xs">
                    
                </div>
                <div class="col-xs-6 col-sm-3"> col-xs-6 col-sm-3 3
                </div>
                <div class="col-xs-6 col-sm-3"> col-xs-6 col-sm-3 4
                </div>
            </div>

1.BootStrap全局样式框架

body背景为白色，margin:0,字体、大小，行间距都进行了设置，全部默认样式都在normalize less 和scaffolding lessless

Normalize.css BootStrap第三方库，将不一样浏览器css样式效果统一的css库。布局

1. Bootstrap学习 Base
2. Bootstrap学习4
3. Bootstrap学习1
4. 03-Bootstrap学习
5. bootstrap学习
6. Bootstrap学习二
7. 学习Bootstrap
8. bootstrap学习------2------
9. bootstrap学习二
10. Bootstrap学习
更多相关文章...
• 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
• 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
• Tomcat学习笔记（史上最全tomcat学习笔记）
• 适用于PHP初学者的学习线路和建议