Bootstrap碎语金冠53777,bootstrap

作者:操作系统

Bootstrap碎语,bootstrap

 

这里记录下某段时间Bootstrap的零散碎片。

 

1、有关Bootstrap的参考网站:

 

● 官方:
● 主题:
● Font-Awsome:
● 幻灯片:lokeshdhakar.com/projects/lightbox2/
● 幻灯片:ashleydw.github.io/lightbox/
● 表格字段排序:
● scss:
● less:
● google fonts:
● 关于动画的css:
● 页面滚动动画效果:

2、在Bootstrap如何设置宽幅广告内容区域?

 

<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-md-6"></div>
            <div class="col-md-6"></div>
        </div>
    </div>
</dinv>

 

注意:<div class="container">放在<div class="jumbotron">的里面。

 

3、Bootstrap中自定义的css类设置无效?

 

.someclass{
    color: #1caa98;
}

 

在Bootstrap中,如果某个自定义css类设置无效,很有可能是因为自定义的css类和Bootstrap自带的类名重复了,按如下方式解决:

 

.someclass{
    color: #1caa98 !important;
}

 

4、相对路径?

 

比如有如下的文件、文件夹层级关系:

 

img文件夹→temp.png
css文件夹→style.css
index.html

 

index.html引用style.css,在index.html中有这样一段代码:

 

<div class="someclass"></div>

 

如何把img文件夹的temp.png作为背景图片呢?

 

.someclass{
    background: url(../img/temp.png) no-repeat top center;
}

 

..表示style.css的上一级,即和img文件夹同级。

 

5、图片同比例缩放?

 

.someimg{
    width:50%;
}

 

6、图片显示的时候比原尺寸大?

 

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <img src="img/temp.png">
        </div>
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
    </div>
</div>

 

显示的时候,temp.png这张图片的宽度占了<div class="col-md-4">所占宽度的大小,比原尺寸更大。

 

解决办法是通过类来控制图片的宽度为100%。

 

<img src="img/temp.png" class="temp">

 

.temp{
    width:100%;
}

 

7、Accordion的构造?

 

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          标题标题
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        内容内容
      </div>
    </div>
  </div>
    ......
</div>

 

8、form的构造?

 

<form>
    <div class="form-group">
        <lable></label>
        <input type="text" class="form-control" placeholder="Enter Name">
    </div>
</form>

 

9、为移动端做的自适应?

 

通过media,结合网格类名。

 

可以为一个div设置不同的网格类名:

 

<div class="col-md-6 col-xs-12"></div>

 

关于media可以按如下设置:

/*991以下*/
@media(max-width: 991px){

}

/*768-990*/
@media(min-width: 768px) and (max-width: 990px){

}

/*768以下*/
@media(max-width: 768px){

}

/*500以下*/
@media(max-width: 500px){

}

 

10、导航菜单的构造?

 

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">公司名</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

 

11、使用scss文件?

 

→scss文件语法,参考这里:

→下载Scout(

→选择Input Folder,比如一个名称是scss的文件夹。选择Output Folder,比如一个名称是css的文件夹。选择JavaScripts Folder,比如一个名称是js的文件夹。选择Images Folder,比如一个名称为img的文件夹。在Environment下选择Production项。

→设置完毕按Play按钮,可能会得到Error#3214这个报错,这是因为没有找到Java正确的版本。

 

先找到当前Java的版本:C:Program FilesJavajre1.8.0_25

 

打开C:Program Files (x86)Scoutjavascriptsapp文件夹下的process_interaction.js文件,修改如下:

 

path = air.File.applicationDirectory.resolvePath("C:\Program Files\Java\jre1.8.0_25\bin\java.exe");

 

关闭报错窗口,关闭Scout窗体,重新打开Scout,报错没有了。

 

但是开始运行,还是会报错:

 

Error : TypeError on line 3414 of org/jruby/RubyString.java: no implicit conversion from nil to integer
Run with --trace to see the full backtrace

 

引起这个问题的原因是网站文件放在了带有中文的文件夹中。把网站文件放在没有中文的文件夹中即可。

 

再次运行,在css文件夹里多生成了一个style.css文件。

 

→保持Scout运行着,编辑scss文件夹中的style.scss文件,保存,相应地,css文件夹里的style.css也会自动有更新。

 

Scount的作用显而易见,就是把动态的scss文件编译成css文件。而在scss文件中可以使用变量、嵌套,等等。

 

比如按如下在scss文件中设置变量:

$bodypadding:40px;

body{
  padding-bottom:$bodypadding;
}

 

scss文件夹里的style.scss如何把Bootstrap所有的样式编译到css文件夹里的style.css里呢?

 

→在scss文件夹中添加vendors文件夹
→把bootstrap.css文件放入其中,并改名为_bootstrap.scss
→在style.scss文件中编写如下:

 

@import 'vendors/_bootstrap.scss';

body{
  padding-bottom:50px;
}

 

→保存style.scss,运行Scout,这样就把Boostrap所有样式写到css文件夹中的style.css文件中了

12、如何让一个图片不超过一个container

<div class="container">
  <img class="temp" src="">
</div>

 

.temp{
  max-width:100%;
}

 

这样就可以把图片控制在container之内

 

13、如何让一个container中的图片单独一行并且居中?

 

通过display:block;让其单独一行,通过margin:auto;让其居中。

 

14、如果简单的2列可以用什么实现?

 

<div class="media">
  <div class="media-left">
    1996 - 1999
  </div>
  <div class="media-body">
    <h4 class="media-heading">Whittier Technical High School</h4>
    <p>Vestibulum in erat tempor, rutrum diam fringilla, feugiat augue</p>
  </div>
</div>

 

15、进度条如何实现?

 

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100">

 

<div class="bubble">
  <div class="pointer">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt eget ante eget feugiat. Praesent adipiscing tortor eu tincidunt tempus.
    </p>
  </div>
  <div class="pointer-border"></div>
</div>

 

.bubble{
  position: relative;
  width: 580px;
  min-height: 65px;
  padding: 15px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #ccc;
}

.bubble:after{
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 15px 15px 15px 0;
  border-color: transparent #fff;
  display: block;
  width: 0;
  z-index: 1;
  margin-top: -15px;
  left: -15px;
  top: 50%;
}

.bubble:before{
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 15px 15px 15px 0;
  border-color: transparent #ccc;
  display: block;
  width: 0;
  z-index: 0;
  margin-top: -15px;
  left: -16px;
  top: 50%;
}

 

28、图片展示效果?

 

参考:ashleydw.github.io/lightbox/
到这里下载:

以上插件可以实现:呈现多个缩略图,点击某个缩略图弹出模态窗口展示大图,并可以通过点击大图前后控制展示图片。通过简单的几行js代码以及元素属性即可完成设置。

→把dist文件夹下的ekko-lightbox.js文件拷贝到本项目的js文件夹
→把dist文件夹下的ekko-lightbox.css文件宝贝到本项目的css文件夹
→在页面引用以上两个文件
→html部分如下:

 

<div class="container">
  <div class="row">
    <ul class="photos gallery-parent">
      <li><a href="img/sample1.jpg" data-title="Image One" data-footer="This is image 1" data-toggle="lightbox" data-gallery="mygallery" data-parent=".gallery-parent" data-hover="tooltip" data-placement="top" title="This is image one"><img src="img/sample1.jpg" class="img-thumbnail"></a></li><!--加img-thumbnail在图片四周多了圆角框-->
      <li><a href="img/sample2.jpg" data-title="Image Two" data-footer="This is image 2" data-toggle="lightbox" data-gallery="mygallery" data-parent=".gallery-parent" data-hover="tooltip" data-placement="top" title="This is image two"><img src="img/sample2.jpg" class="img-thumbnail"></a></li>
      <li><a href="img/sample3.jpg" data-title="Image Three" data-footer="This is image 3" data-toggle="lightbox" data-gallery="mygallery" data-parent=".gallery-parent" data-hover="tooltip" data-placement="top" title="This is image three"><img src="img/sample3.jpg" class="img-thumbnail"></a></li>
      <li><a href="img/sample4.jpg" data-title="Image Four" data-footer="This is image 4" data-toggle="lightbox" data-gallery="mygallery" data-parent=".gallery-parent" data-hover="tooltip" data-placement="top" title="This is image four"><img src="img/sample4.jpg" class="img-thumbnail"></a></li>
      <li><a href="img/sample5.jpg" data-title="Image Five" data-footer="This is image 5" data-toggle="lightbox" data-gallery="mygallery" data-parent=".gallery-parent" data-hover="tooltip" data-placement="top" title="This is image five"><img src="img/sample5.jpg" class="img-thumbnail"></a></li>
      <li><a href="img/sample6.jpg" data-title="Image Six" data-footer="This is image 6" data-toggle="lightbox" data-gallery="mygallery" data-parent=".gallery-parent" data-hover="tooltip" data-placement="top" title="This is image six"><img src="img/sample6.jpg" class="img-thumbnail"></a></li>
    </ul>
  </div>
</div>

 

● 以上data-title="Image One" data-footer="This is image 1" data-toggle="lightbox" data-gallery="mygallery" data-parent=".gallery-parent"是针对ekko-lightbox.js的。

● 以上data-hover="tooltip" data-placement="top" title="This is image three"是针对bootstrap.js的。

 

→css部分

/*等于这里确定好li的宽度*/
.photos li{
  list-style: none;
  float: left;
  margin: 5px;
  width: 23%;
}

/*图片的宽度是建立在li的宽度之上的*/
.photos img{
  width: 100%;
}

 

→js部分

<script type="text/javascript">
  $(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
      event.preventDefault();
      $(this).ekkoLightbox();
  });

  $(function () {
    $('[data-hover="tooltip"]').tooltip()
  })     
</script>

29、使用Less?

 


→ 下载,安装,打开
→ 在项目文件夹中创建一个less文件夹,在less文件夹下创建vendors文件夹和一个main.less文件。在vendors文件夹中创建bootstrap文件夹;在vendors文件夹中创建一个font-awesome文件夹。
→ 点击下载"Source code",把less文件夹中的所有文件拷贝到以上的bootstrap文件夹

→ 下载,把其中less文件夹下的所有文件拷贝到font-awesome文件夹
→ 打开main.less文件,编写如下:

 

@import "vendors/bootstrap/bootstrap.less";
@import "vendors/font-awesome/font-awesome.less";

 

→ 打开WinLess,点击"打开",选择项目中的"less"文件夹,勾选"main.less",点击"Compile"。
→ 在网站的css文件夹中多了一个main.css文件,里面包含了bootstrap和font-awesome的样式。
→ 打开网页文件引用css

<link href="css/main.css" rel="stylesheet">

 

30、有关display?

 

● display:inline;行内元素,是span, em, b等的默认值。可以设置margin和padding,但只会水平方向影响,不会垂直方向影响。
● display:inline-block;行内块级元素,不仅可以设置margin和padding,还可以设置width和height。
● display:block;通常用来设置div, section, ul, p, h1, 等等,不在行内待着,会另起一行。
● display:none;隐藏,常用。
● display:table;像处理表格一样处理块级元素

 

div {
  display: table;
  display: table-cell;
  display: table-column;
  display: table-colgroup;
  display: table-header-group;
  display: table-row-group;
  display: table-footer-group;
  display: table-row;
  display: table-caption;
}

 

比如:

<div style="display: table;">
  <div style="display: table-row;">
    <div style="display: table-cell;">
      Gross but sometimes useful.
    </div>
  </div>
</div>

display:table-cell;和vertial-align:middle;配合使用,保证div中的内容垂直居中。

 

31、幻灯片?

 

→ 打开:lokeshdhakar.com/projects/lightbox2/
→ 下载,把lightbox.css文件拷贝到项目文件夹中,把lightbox.js文件也拷贝到项目文件夹中,把img文件夹下的所有图片拷贝到项目文件夹中
→ 给a标签以及其中的image标签设置如下:

<a href="img/sample1.jpg" data-lightbox="gallery" data-title="Sample Image One"><img src="img/sample1.jpg" class="img-thumbnail"></a>

32、Bootstrap主题?

 

→打开:
→点击下载某一个主题,打开css文件,复制所有,替换掉当前css文件夹中bootstrap.css里的所有内容
→点击Preview可预览主题

 

33、表格排序?

 

→ 打开:
→ 下载Full release中的jquery.tablesorter.zip
→ 把jquery.tablesorter.js拷贝到项目中
→ 把该js文件引入到页面
→ table需要有完整的thead, tbody结构

 

<table id="sort-table" class="table table-striped tablesorter">
  <thead>
    <tr>
      <th><input type="checkbox"></th>
      <th>Page Title <i class="glyphicon glyphicon-chevron-down"></i></th>
      <th>Category <i class="glyphicon glyphicon-chevron-down"></i></th>
      <th>Author <i class="glyphicon glyphicon-chevron-down"></i></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox"></td>
      <td><a href="page.html">Sample Page One</a></td>
      <td>Category One</td>
      <td>John Doe</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td><a href="page.html">Sample Page Two</a></td>
      <td>Category Two</td>
      <td>John Doe</td>
    </tr>
  </tbody>                                                      
</table>  

通过js调用:

$('#sort-table').tablesorter({
  sortList:[[0,0],[1,0]]
});

 

通过tablesorter对表头样式进行设置:

.tablesorter th{
  cursor: pointer;
}

 

34、Font-Awesome?

 

→ 打开:
→ 点击下载
→ 把下载下来的font-awesome.css文件拷贝到当前项目下
→ 把下载下来的fonts文件夹下的所有文件拷贝到当前项目的fonts文件夹下
→ 在页面引用font-awesome.css文件

 

35、bootswatch?

 

→ 打开:
→ 选择其中的一个主题,点击Download
→ 拷贝所有内容,替换掉当前bootstrap.css中的所有内容

 

36、其它?

● text-transform:uppercase; 字体转换
● min-height:100px;最低高度
● overflow:auto;默认不会被修剪,多了会在框之外;hidden,多了会修剪;scroll,多了有滚动条;auto,多了,自动显示滚动条;inherit继承父元素的overflow设置。
● margin-top:-60px;从原来的位置往上提
● display:block;此元素显示为块级元素,此元素前后都有换行符
● background-image: linear-gradient(#04519b, #044687,60%, #033769) 设置渐变背景
● border-radius: 10px; 圆角
● input[type='text'] 过滤类型
● <img src="img/user.png" class="img-thumbnail">图片外包裹一个圆角框
● <h1 class="brand-heading"></h1>
● <p class="intro-text"></p>
● border-bottom:1px solid rgba(255,255,255,0.3); 0.3表示透明度
● margin:0 0 35px; 上是0,下是35,左和右是0
● outline:none; outlinie为border之外的一个框,但它不属于盒模型,不能对单独的边设置,只能对4条边同时设置,如outline: 1px dashed red;
● -webkit-transition:background .3s ease-in-out;对background实施过渡效果,适合Safari
● -moz-transition:background .3s ease-in-out;适合Firefox
● background: url(../img/intro-bg.jpg) no-repeat bottom center scroll;sroll是background-attachment的一个属性值,background-attachment: scroll|fixed|local|initial|inherit; scroll是默认值,表示背景随着元素滚动。
● background-size:cover;background-size设置背景图片大小,background-size: auto|length|cover|contain|initial|inherit;cover表示让背景图片覆盖区域。
● background:none;设置没有背景色
● 当一个a的下划线无法去除,可考虑使用: display:block;text-decoration:none;
● 取消float:float:none;
● 设置背景图片的宽度:background-size: 100%;

这里记录下某段时间Bootstrap的零散碎片。 1、有关Bootstrap的参考网站: ● 官方: ● 主题:http://b...

本文由金冠53777-金冠娱乐53777-Welcome发布,转载请注明来源

关键词: