bootstrap1
bootstrap1
一、bootstrap基础
1、什么是bootstrap?(工具)
bootstrap—— 前端框架 ——框架是代码的可重用设计,体现为一些组件,或抽象的方法。
bootstrap—— 对html、css、和javascript进行封装,使它们用起来更方便,我们只需要使用它已经设定好的类,或规则,即可快速应用它提供的功能。
bootstrap使用了一些html5元素和css3属性(如媒体查询);
注意——前提:使用html5文档类型<!DOCTYPE html>
2、bootstrap的组成:3部分——全局css样式、组件、javascript插件;(记忆)
3、使用bootstrap的母的
4、bootstrap使用方式 http://www.bootcss.com/
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栅格系统
一个使用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>
实例:
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>
三、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> </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>
【强调标签】——行内元素
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当中的用法一样,直接写标签即可;
用户评论