Bootstrap基础学习

  Bootstrap是一个基于栅格结构的前端结构框架(当然也有JS,JQuery),它的优点是内容框架能够迅速搭建起来,基于媒介查询可以使搭建的页面迅速的适应不同的用户端,无论是手机,平板,还是PC,基本上都能自适应,当然新版本已经开始不支持IE6了,对IE8的支持也很有限,毕竟IE8对HTML5的支持不太好,(说实话,我自己也不喜欢IE6~8,对于我这种初级选手来说,兼容性有时候真费劲,不仅项目上要用,连面试也要用,有没有搞错嘛,遇到了,上网查一下不就行了。发个牢骚,该会的还是得会啊!!!)

  闲言碎语不多讲,开始总结自己这段时间BS笔记!

  1.在结构内容方面,BS对结构内容的控制基本是有类来控制,比如对结构的控制就是

?

1
2
3
4
5
6
7
8

<div class="container">
<div class="row">
<div class="col-md-4 col-xs-6">
这一块div的类名中,是由col-md-4,col-xs-6这两个类名来控制他的框架宽度;其中col代表是栅格,md代表客户端显示器的宽度为pc中屏,同样的xs则代表客户端显示器为超小屏,也就是手机屏;4,6就代表了栅格的长度,意思就是在中屏显示器下宽度为4个栅格,在手机端宽度为6个栅格 ,一般情况下把把一整块div最多可以划成12个栅格,所以他的兄弟div在中屏下则是8个栅格!
</div>
<div class="col-md-8 text-muted">这一块div的类名中,抛去col-md-8不说,来说说text-muted.这个类则是控制这个div下的内容字体颜色的,当你把BS的css下载到本地后,你在css我文件中搜索text-muted,就会看到他的定义只有颜色,和他在一起的其他类名就分别定义了不同的颜色 </div>
</div>
</div>

2.结构上面说完了,那就说说页面中具体的一些组件,先说说导航吧,原先我们自己制作导航是由一个基本的内联ul组成(以下css在BS中可以实现),

?

1
2
3
4
5
6
7

<ul class="list-inline">
<li>W3cplus</li>
<li>Blog</li>
<li>CSS3</li>
<li>jQuery</li>
<li>PHP</li>
</ul>

但在BS中,则有nav这个类来实现,但是nav这个类需要和其他类合用才能让页面效果发挥出来,譬如说nav-pills和nav-tabs,如果是垂直导航的话则在类名中加入nav-stacked

?

1
2
3
4
5
6
7

<ul class="nav nav-pill">
<li><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>

        3.说完导航条再来说说下拉菜单,BS中的下拉菜单得依靠它自带的一个js文件来实现,而它本身的js还依靠了JQuery,所以这两个文件是必备的。值得说明的是关于这个下拉菜单代码方面有点复杂,button中的data-toggle="dropdown"必须和外层的div类名相同。

?

1
2
3
4
5
6
7
8
9
10
11
12

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div>

        4.貌似该说说表单了,在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果。

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">邮箱:</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 记住密码
</label>
</div>
<button type="submit" class="btn btn-default">进入邮箱</button>
</form>

        以上所述就是本文的全部内容了,希望大家能够喜欢

时间: 2024-10-29 06:56:39

Bootstrap基础学习的相关文章

Bootstrap基础学习_javascript技巧

Bootstrap是一个基于栅格结构的前端结构框架(当然也有JS,JQuery),它的优点是内容框架能够迅速搭建起来,基于媒介查询可以使搭建的页面迅速的适应不同的用户端,无论是手机,平板,还是PC,基本上都能自适应,当然新版本已经开始不支持IE6了,对IE8的支持也很有限,毕竟IE8对HTML5的支持不太好,(说实话,我自己也不喜欢IE6~8,对于我这种初级选手来说,兼容性有时候真费劲,不仅项目上要用,连面试也要用,有没有搞错嘛,遇到了,上网查一下不就行了.发个牢骚,该会的还是得会啊!!!) 闲

Bootstrap零基础学习第一课之模板_javascript技巧

最近需要做一个简单的Web页面.  考虑到前端经验不足,为了快速产出,同时项目只是一个工具,对项目没有什么要求,所以我选择了Bootstrap这个框架作为Web框架.  写从零开始学Bootstrap的初衷:  看了半天的Bootstrap的文档,包括官方的(http://v3.bootcss.com/getting-started/)和非官方的(http://www.runoob.com/bootstrap/bootstrap-tutorial.html),以及他人写的简单入门博客(http:

bootstrap基础知识学习笔记_javascript技巧

在此就不做 bootstrap 的介绍了,近几年 bootstrap 越来越流行,一点不亚于 js 中的 jquery. 以下为 bootstrap 3.3.5 学习中记录的东西,方便查阅,作者使用的是 jsp ,跟 html 可能有稍许不同,请自行参考修改 [引用文件] [页面引用] 路径请自行规划 <script type="text/javascript" src="<%=path%>/js-lib/jquery/jquery-1.11.2.min.j

Bootstrap &lt;基础二十二&gt;超大屏幕(Jumbotron)

原文:Bootstrap <基础二十二>超大屏幕(Jumbotron) Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: 创建一个带有 class .jumbotron. 的容器 <div>. 除了更大的 <h1>,字体粗细 font-weight 被减为 200px. 下面的实例演示了这点: <!DOCTYPE

分布式基础学习【一】 —— 分布式文件系统

分布式基础学习 所谓分布式,在这里,很狭义的指代以Google的三驾马车,GFS.Map/Reduce.BigTable 为框架核心的分布式存储和计算系统.通常如我一样初学的人,会以Google这几份经典的论 文作为开端的.它们勾勒出了分布式存储和计算的一个基本蓝图,已可窥见其几分风韵,但 终究还是由于缺少一些实现的代码和示例,色彩有些斑驳,缺少了点感性.幸好我们还有 Open Source,还有Hadoop.Hadoop是一个基于Java实现的,开源的,分布式存储和计算的项 目.作为这个领域最

C#的基础学习

这是一篇C#的基础学习文章,高手就可以跳过了, 1.基本类型: 基本与C\C++相同 decimal decimal是一个128位的高精度浮点数. bool 注意的是bool类型只有true和faulse两个可取值,在C#中,不能将bool值强制转换为整形值.如,将true转换为1或将1,0转换为bool值都是不行的. Parse和TryParse转换字符串 基本的数字类型包含Parse和TryParse的方法,可将数字字符串类型转换为指定的数字类型,例如 int iParse = Int32.

IOS基础学习UIButton使用详解

  UIButton按钮是IOS开发中最常用的控件,作为IOS基础学习教程知识 ,初学者需要了解其基本定义和常用设置,以便在开发在熟练运用. 第一.UIButton的定义 UIButton *button=[[UIButton buttonWithType:(UIButtonType); 能够定义的button类型有以下6种, typedef enum { UIButtonTypeCustom = 0, 自定义风格 UIButtonTypeRoundedRect, 圆角矩形 UIButtonTy

怎样从零基础学习EXCEL?

  怎样从零基础学习EXCEL?          后来工作会对你的数据处理能力提出要求(除非你懒,错过了那么好的学习机会).可能开始的时候,你会发现一个函数能自动计算求和(sum),能算平均数(average),你就很开心了.接下来你会发现经常要从一个表里面寻找另一个表里面的内容(vlookup就很有用),有时候很多要做条件(if函数就很有用). 其实到这里就能解决大概80%的工作问题了.就几个函数不会很难吧,特别是当你发现以前要好久的时间,现在很快就完成了.至于以后的深入学习就看你的工作是否

Linux shell脚本基础学习详细介绍(完整版)

Linux shell脚本基础学习这里我们先来第一讲,介绍shell的语法基础,开头.注释.变量和 环境变量,向大家做一个基础的介绍,虽然不涉及具体东西,但是打好基础是以后学习轻松地前提. 1. Linux 脚本编写基础 ◆1.1 语法基本介绍1.1.1 开头 程序必须以下面的行开始(必须方在文件的第一行): #!/bin/sh 符号#!用来告诉系统它后面的参数是用来执行该文件的程序.在这个例子中我们使用/bin/sh来执行程序. 当编辑好脚本时,如果要执行该脚本,还必须使其可执行. 要使脚本可