Bootstrap碎语_html/css_WEB-ITnose

 

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

 

1、有关Bootstrap的参考网站：

 

● 官方：http://getbootstrap.com/
● 主题：http://bootswatch.com/
● Font-Awsome: http://fortawesome.github.io/Font-Awesome/
● 幻灯片：lokeshdhakar.com/projects/lightbox2/
● 幻灯片：ashleydw.github.io/lightbox/
● 表格字段排序：http://tablesorter.com/docs/
● scss：http://www.sass-lang.com/
● less: http://winless.org/
● google fonts: https://www.google.com/fonts
● 关于动画的css：https://daneden.github.io/animate.css/
● 页面滚动动画效果：http://mynameismatthieu.com/WOW/

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

 

   

       

           

           

       

   

 

注意：

放在

的里面。

 

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中有这样一段代码：

 

 

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

 

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

 

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

 

5、图片同比例缩放？

 

.someimg{
    width:50%;
}

 

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

 

   

       

           
       

       

       

   

 

显示的时候，temp.png这张图片的宽度占了

所占宽度的大小，比原尺寸更大。

 

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

 

 

.temp{
    width:100%;
}

 

7、Accordion的构造？

 

 

   

     

       
          标题标题
       
     

   

   

     

        内容内容
     

   

 

    ......

 

8、form的构造？

 

   

       
       
   

 

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

 

通过media，结合网格类名。

 

可以为一个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、导航菜单的构造？

 

 

   

     
        Toggle navigation
       
       
       
     
      公司名
   

   

     

       
• Home

       
• About

       
• Contact

     

   

 

 

11、使用scss文件？

 

→scss文件语法，参考这里：http://www.sass-lang.com/

→下载Scout(http://mhs.github.io/scout-app/),安装并打开Scout

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

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

 

先找到当前Java的版本：C:\Program Files\Java\jre1.8.0_25

 

打开C:\Program Files (x86)\Scout\javascripts\app文件夹下的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

 

 

.temp{
  max-width:100%;
}

 

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

 

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

 

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

 

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

 

 

    1996 - 1999
 

 

   

Whittier Technical High School

   

Vestibulum in erat tempor, rutrum diam fringilla, feugiat augue

 

 

15、进度条如何实现？

 

 

    PHP & MySQL
 

 

16、alert如何实现？

 

HTML/CSS Website Design

 

17、页脚如何实现？

 

 

   

Copyright © 2015, All Rights Reserved

 

18、行内表单

 

 

    Name
   
 

 

如何使container中的行内表单右靠呢？

float:right

 

19、如何让container中的图片左靠呢？

 

float:left

 

20、Panel的构造？

 

 

   

Panel title

 

 

    Panel content
 

 

21、在表单中如何让一些元素右靠？

 

   

     

        Text
        Image
        Video
     

   

 

22、一些小图标icon哪里找？

 

● http://getbootstrap.com/components/#glyphicons
● https://fortawesome.github.io/Font-Awesome/icons/  但需下载引用font-awesome.css这个文件，还需要把下载下来fonts文件夹里的字体全部复制到当前项目的fonts文件夹里。

23、Panel中可以有row吗？

 

--可以。

 

 

   

    ......
   

 

 

24、上方的缩略图片+下方的文字作为a的一部分？

 

 

   
     
     

DevUser1

   
 

 

25、prevent strang wrapping?

 

...

...

 

26、col-xs,col-sm,col-md,col-lg?

 

● .col-xs-, 屏幕尺寸● .col-sm-, 屏幕尺寸大于或等于768px,container宽度大于或等于750px
● .col-md-, 屏幕尺寸大于或等于992px,container宽度大于或等于970px
● .col-lg-, 屏幕尺寸大于或等于1200px,container宽度大于或等于1170px

27、圆角框左侧中间的箭头图示？

 

 

 

   

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt eget ante eget feugiat. Praesent adipiscing tortor eu tincidunt tempus.
   

 

 

.bubble{
位置: 相対;
幅: 580px;
最小高さ: 65px;
パディング: 15px;
背景: #fff;
ボーダー半径: 10px;
ボーダー: 1px ソリッド #ccc ;
}

.bubble:after{
コンテンツ: '';
位置: 絶対;
境界線スタイル: 実線;
境界線幅: 15px 15px 15px 0;
境界線色: 透明 #fff;
表示:ブロック;
幅: 0;
z-index: 1;
margin-top: -15px;
left: -15px;
top: 50%;
}

.bubble:before{
content: '';
位置: 絶対;
境界線のスタイル: ソリッド;
境界線の幅: 15px 15px 15px 0;
境界線の色: 透明 #ccc;
表示: ブロック;
幅: 0;
z-index: 0;
margin-上: -15px;
左: -16px;
上: 50%;
}

28. 画像表示効果?

参照: ashleydw.github.io/lightbox/
ここからダウンロード: https://github.com/ashleydw/lightbox

上記のプラグインは次のことを実現できます: 複数のサムネイルを表示し、サムネイルをクリックしてポップアップしますテンプレート ステータス ウィンドウには大きな画像が表示され、大きな画像をクリックする前後で画像の表示を制御できます。設定は、数行の js コードと要素の属性だけで完了します。

→distフォルダー内のekko-lightbox.jsファイルをこのプロジェクトのjsフォルダーにコピー
→distフォルダー内のekko-lightbox.cssファイルをこのプロジェクトのcssフォルダーにコピー
→ページ上で引用上記2つのファイル
→html部分は以下の通りです:

 

   

     
• 

     
• 

     
• 

     
• 

     
• 

     
• 

   

 

 

● 以上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部分

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

29、使用Less?

 

→ http://winless.org/
→ 下载，安装，打开
→ 在项目文件夹中创建一个less文件夹,在less文件夹下创建vendors文件夹和一个main.less文件。在vendors文件夹中创建bootstrap文件夹；在vendors文件夹中创建一个font-awesome文件夹。
→ http://getbootstrap.com/getting-started/ 点击下载"Source code"，把less文件夹中的所有文件拷贝到以上的bootstrap文件夹
→ https://fortawesome.github.io/Font-Awesome/
→ 下载，把其中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

 

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;
}

 

比如：

 

   

      Gross but sometimes useful.
   

 

display:table-cell; とvertical-align:middle; は、div 内のコンテンツが垂直方向の中央に配置されるようにするために一緒に使用されます。

31. スライドショー?

→ 開く: lokeshdhakar.com/projects/lightbox2/
→ ダウンロードし、lightbox.css ファイルをプロジェクト フォルダーにコピーし、lightbox.js ファイルをプロジェクト ファイル フォルダーにコピーします。 , imgフォルダー内の画像をすべてプロジェクトフォルダーにコピーします
→その中にaタグとimageタグを以下のように設定します

32. ブートストラップ テーマ?

→開く: http://bootswatch.com/
→クリックしてテーマをダウンロードし、CSS ファイルを開いてすべてコピーし、現在の CSS フォルダーにある bootstrap.css の内容をすべて置き換えます
→[プレビュー] をクリックしてプレビュー トピック

33. テーブルの並べ替え?

→ 開く: http://tablesorter.com/docs/
→ フルリリースの jquery.tablesorter.zip をダウンロード
→ jquery.tablesorter.js をプロジェクトにコピー
→ js ファイルをページに導入
→テーブルには完全な thead、tbody 構造が必要です

;
;th>カテゴリ









/table>

js 経由で呼び出し:

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

Tablesorter を渡すとテーブル ヘッダーのスタイルが設定されます:

.tablesorter th{
Cursor: pointer;

}

34、Font-Awesome?

→ 開く: http://fortawesome.github.io/Font-Awesome/

→ クリックしてダウンロード

→ ダウンロードした font-awesome.css ファイルを現在のプロジェクトにコピーします

→ ダウンロードしたフォント フォルダー内のすべてのファイルを現在のプロジェクトのフォントフォルダー

→ ページ上の font-awesome.css ファイルを引用

35, bootswatch?

→ 開く: http://bootswatch.com/

→ テーマの 1 つを選択し、ダウンロードをクリックします

→ すべてのコンテンツをコピーし、CSS のすべてのコンテンツを置き換えます

36、その他?

● text-transform:uppercase; フォント変換
● min-height:100px; 最小高さ
● overflow:auto; 多すぎる場合は、ボックスの外に表示されます。多すぎる場合はトリミングされます。スクロール バーが多数ある場合は、スクロール バーが自動的に表示されます。親要素のオーバーフロー設定が継承されます。
● margin-top:-60px;元の位置から引き上げます
● display:block;この要素はブロックレベルの要素として表示され、この要素の前後に改行が入ります
● background-image: line-gradient( #04519b, #044687,60%, #033769) グラデーション背景を設定します
● border-radius: 10px; 角丸
● input[type='text'] フィルター タイプ
● 写真を丸い枠で囲みます
●

●

● border-bottom:1px Solid rgba(255,255,255,0.3); 0.3 は透明度を表します
● margin:0 0 35px 上が 0、下が 35、左右が 0
● アウトライン:なし; アウトラインは枠線 A のボックスの外側ですが、ボックス モデルに属しません。アウトラインは 1px の破線のように、同時に 4 つの辺にのみ設定できます。
● - webkit-transition:background .3sease-in-out; Safari に適した背景にトランジション効果を適用します
● -moz-transition:background .3s easy-in-out; Firefox に適しています
●background: url(../ img/intro-bg.jpg) no-repeat 下部中央scroll;sroll は、background-attachment の属性値です。scroll|fixed|local|initial|inherit; は、背景を意味します。要素とともにスクロールします。
● 背景サイズ:カバー; 背景サイズは背景画像のサイズを設定します: auto|length|cover|contain|initial|inherit;cover は背景画像が領域を覆うことを意味します。
●background:none;背景色を設定しません
●a の下線を削除できない場合は、display:block;text-decoration:none;の使用を検討してください
●float:float:none;をキャンセルします
●幅を設定します背景画像:background-size: 100%;

	ページタイトル	著者
td> /td>