欢迎访问移动开发之家(rcyd.net),关注移动开发教程。移动开发之家  移动开发问答|  每日更新
页面位置 : > > > 内容正文

bootstrap1

来源: 开发者 投稿于  被查看 47478 次 评论:222

bootstrap1


一、bootstrap基础
1、什么是bootstrap?(工具)
bootstrap—— 前端框架 ——框架是代码的可重用设计,体现为一些组件,或抽象的方法。
bootstrap—— 对html、css、和javascript进行封装,使它们用起来更方便,我们只需要使用它已经设定好的类,或规则,即可快速应用它提供的功能。
bootstrap使用了一些html5元素和css3属性(如媒体查询);
注意——前提:使用html5文档类型<!DOCTYPE html>
2、bootstrap的组成:3部分——全局css样式、组件、javascript插件;(记忆)

bootstrap1 3、使用bootstrap的母的

bootstrap1 4、bootstrap使用方式 http://www.bootcss.com/

bootstrap1

bootstrap1 html 代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后!-->
    <title>bootstrap基础1</title>
    <!--引入css样式表-->
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>

     可以使用了

<!--要引入的jQuery代码!-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

二、bootstrap栅格系统

bootstrap1

bootstrap1 一个使用bootstrap栅格的小实例:
html 代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后!-->
    <title>bootstrap基础1</title>
    <!--引入css样式表-->
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        .leftdiv{
            background: cyan;
        }
        .rightdiv{
            background: pink;
        }
        .centerdiv{
            background: greenyellow;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 leftdiv">第一行左边部分</div>
            <div class="col-md-4 centerdiv">第一行中间部分</div>
            <div class="col-md-4 rightdiv">第一行右边部分</div>
        </div>
    </div>
<!--要引入的jQuery代码!-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

bootstrap1 实例:
html 代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后!-->
    <title>bootstrap基础1</title>
    <!--引入css样式表-->
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        .leftdiv{
            background: cyan;
        }
        .rightdiv{
            background: pink;
        }
        .centerdiv{
            background: greenyellow;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 leftdiv">第一行左边部分</div>
            <div class="col-md-4 centerdiv">第一行中间部分</div>
            <div class="col-md-4 rightdiv">第一行右边部分</div>
        </div>
        <div class="row">
            <div class="col-md-6 leftdiv">第一行左边部分</div>
            <div class="col-md-4 centerdiv">第一行中间部分</div>
            <div class="col-md-2 rightdiv">第一行右边部分</div>
        </div>
        <div class="row">
            <div class="col-md-2 leftdiv">第一行左边部分</div>
            <div class="col-md-10 rightdiv">第一行右边部分</div>
        </div>
    </div>
<!--要引入的jQuery代码!-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

bootstrap1 三、bootstrap排版

bootstrap1

bootstrap1 实例:
html 代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后!-->
    <title>bootstrap基础1</title>
    <!--引入css样式表-->
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>

    </style>
</head>
<body>
<!--内联子标题就是副标题-->
<!--用法:1在标题标签中放入<small> 2在标题标签中添加small类-->
    <h1>我是标题1 <small>这是副标题</small></h1>
     <small>small标签</small>  <!--不能这样写-->
    <h2>我是标题2 <span class="small">副标题</span></h2>
    <h3>我是标题3</h3>
    <h4>我是标题4</h4>
    <h5>我是标题5</h5>
    <h6>我是标题6</h6>
    <p>BBC要把阿加莎·克里斯蒂七部小说搬上荧幕<small>新版《控方证人》为2集迷你剧</small></p>  <!--没效果,因为它不是标题标签(h1~h6)-->
<!--要引入的jQuery代码!-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

bootstrap1 【强调标签】——行内元素
bootstrap直接使用了html中用于标注强调的标签,并给他们另外赋予了少许样式;
small —— 不需要强调,字号为85%;
strong (用到最多)—— 超级强调,很强调,加粗文本bold;
em —— 一般强调,显示为斜体;
【文字对齐类】
简单方便将文字对齐的类,一般应用在p标签上(用在div上不符合规范,用在span标签则不能生效);
text-left —— 文字左对齐;
text-center —— 文字居中对齐;
text-right —— 文字右对齐;
【强调类】
这些强调类,是通过颜色来表示强调;通过添加这些类,会显示不同的颜色;
text-muted —— muted 减弱的 #777;
text-warning —— 警告色 橙灰色;
text-danger —— 危险的;
text-info —— 信息;
text-success—— 这是正确的强调信息;
【缩略语】
<abbr>缩略语元素带有title属性,外观表现为带有较浅的虚线框,鼠标移至上面时会变成带有“问号”的指针;
写法:<abbr title="鼠标放上后显示完整文字">这是缩写</abbr>
为abbr添加.initialism(翻译为“缩略词”)类,会显示为更小一号的字体;
【地址】
<address>——正常字体显示——用在footer中
【引用】
在你的文档中引用其他来源的内容,yongblockquote标签来包裹起来,这个标签是html4中就有的,在bootstrap中为它写了新样式;
引用选项:
(1)使用small和cite标签的混合使用,来表示引用来源
<small>斯里兰卡 <cite>名人</cite></small> 或 <small><cite titile="people">斯里兰卡 </cite></small>
(2)通过blockquote添加对其类来指明引用对齐方式;
pull-left 引用靠左显示;
pull-right 引用靠右显示;
【列表】
无序列表:不关心先后顺序的一组元素的集合,在bootstrap中只是把它的margin-top清0,margin-bottom为10px;

有序列表:强调顺序的一组元素的集合;
未定义样式列表
在ul中添加list-unstyled类,它的作用是移除了默认的list-style(子节点下再添加ul列表时会有列表样式);
行内列表
给ul标签添加list-inline类,让列表项水平排列一行,同时每项都有少量的内补(padding值);
在不使用bootstrap时,我们要传列表水平排列,会为li都加上float属性;
我们观察list-inline属性,它是把li用display:inline-block;变为了行内元素。

*这几个列表和在html当中的用法一样,直接写标签即可;

bootstrap1

用户评论